/* ========================================== Schickst Store - Core Design System & Tokens Black & Gold identity, with Light / Dark themes ========================================== */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap'); :root { /* Brand Color Palette — Black & Gold */ --primary-deep: #171310; /* rich warm black — headings, dark surfaces */ --primary-purple: #2A2118; /* deep espresso brown — secondary dark tone */ --primary-violet: #C9A24A; /* signature gold — primary brand / CTA color */ --primary-light: #E4C77A; /* light gold — highlights */ --lavender-soft: #F3EAD3; /* soft warm cream — replaces pastel tint */ --lavender-light: #FAF6EA; /* lighter cream tint */ /* Accent Colors */ --accent-pink: #8B1E3F; /* deep burgundy — sale / discount accents */ --accent-rose: #A32846; /* secondary ruby */ --accent-coral: #C9A24A; /* gold (unused slot kept in family) */ --accent-amber: #B8862E; /* deep gold amber */ --accent-yellow: #E8C468; /* bright gold highlight */ --accent-emerald: #2F6F4E; /* muted emerald — success state only */ --accent-cyan: #3A6E75; /* muted teal (unused slot kept in family) */ /* Neutral Spectrum (Light theme defaults) */ --bg-main: #FBF9F4; --bg-card: #FFFFFF; --bg-alt: #F3EEE1; --text-dark: #171310; --text-main: #262019; --text-muted: #6E6252; --text-light: #A79C87; --border-light: #E7DFC9; --border-glass: 1px solid rgba(0, 0, 0, 0.08); /* Fixed-dark surfaces (always dark, regardless of theme — footer, toasts) */ --ink: #121012; /* Gradients */ --grad-hero: linear-gradient(135deg, #171310 0%, #3A2E1A 45%, #8A6A2B 80%, #C9A24A 100%); --grad-promo: linear-gradient(90deg, #171310 0%, #4A3B1E 55%, #C9A24A 100%); --grad-card: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 246, 240, 0.95) 100%); --grad-accent: linear-gradient(135deg, #8B1E3F 0%, #A32846 100%); --grad-amber: linear-gradient(135deg, #B8862E 0%, #E8C468 100%); --grad-dark: linear-gradient(180deg, #1E1A14 0%, #0D0B09 100%); /* Elevation & Shadows */ --shadow-sm: 0 2px 4px rgba(23, 19, 16, 0.05); --shadow-md: 0 4px 12px rgba(23, 19, 16, 0.09); --shadow-lg: 0 10px 25px -5px rgba(23, 19, 16, 0.16); --shadow-xl: 0 20px 35px -10px rgba(15, 12, 9, 0.26); --shadow-glow: 0 0 20px rgba(201, 162, 74, 0.35); /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(201, 162, 74, 0.25); --glass-blur: blur(12px); /* Border Radii */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 9999px; /* Typography */ --font-en: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-ar: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-active: var(--font-en); /* Transitions */ --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Layout Max-Width */ --max-width: 1400px; } /* ========================================== Dark Theme — toggled via [data-theme="dark"] on ========================================== */ html[data-theme="dark"] { --bg-main: #0D0B09; --bg-card: #17130F; --bg-alt: #1E1912; --text-dark: #F5EFDD; --text-main: #E8E1D2; --text-muted: #B5A98F; --text-light: #877A63; --border-light: #332B1F; --border-glass: 1px solid rgba(255, 255, 255, 0.08); --lavender-soft: #241E15; --lavender-light: #1B1610; --grad-card: linear-gradient(180deg, rgba(23, 19, 15, 0.9) 0%, rgba(13, 11, 9, 0.95) 100%); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 35px -10px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 24px rgba(201, 162, 74, 0.45); --glass-bg: rgba(23, 19, 15, 0.85); --glass-border: rgba(201, 162, 74, 0.3); } /* LTR / RTL Font Settings */ html[lang="ar"], html[dir="rtl"] { --font-active: var(--font-ar); } html[lang="en"], html[dir="ltr"] { --font-active: var(--font-en); }