/* ============================================================ MARKETING 4 AFRO HAIR — Design Token System v2 tokens.css Visual Direction: Warm Luxury · Burnished Copper · Deep Espresso ============================================================ */ :root { /* ── SECTION 1: Core Brand Palette ───────────────────────── */ /* Burnished Copper — primary CTA family */ --copper-50: #FDF6EC; --copper-100: #FAE9CE; --copper-200: #F4CE9C; --copper-300: #ECAB5E; --copper-400: #E2883A; /* hover */ --copper-500: #C9701E; /* base CTA */ --copper-600: #A8570F; /* pressed */ --copper-700: #84400A; /* Electric Gold — accent highlight */ --gold-100: #FFF8E7; --gold-200: #FDEDB8; --gold-300: #F9D96A; --gold-400: #F5C518; /* strong accent */ --gold-500: #D4A017; /* body accent */ --gold-600: #A67C0C; /* Deep Espresso — premium secondary */ --espresso-50: #F5F0EA; --espresso-100: #E6DDD2; --espresso-200: #C4B09A; --espresso-300: #9A7D5E; --espresso-800: #2C1A0E; --espresso-900: #1A0E06; --espresso-950: #0F0804; /* Warm Neutrals — light surfaces */ --cream-50: #FDFAF5; /* page bg light */ --cream-100: #F8F3EB; /* card bg light */ --cream-200: #F0E9DB; /* section alt light */ --cream-300: #E4D9C8; /* border light */ --cream-400: #C9BAA3; /* muted border */ --cream-500: #9E8A73; /* placeholder */ /* Premium Dark Neutrals — dark mode */ --dark-50: #F0EBE3; --dark-100: #D6CABF; --dark-200: #A89080; --dark-800: #231510; /* dark card */ --dark-850: #1A0F0A; /* dark section */ --dark-900: #130C07; /* dark bg */ --dark-950: #0B0603; /* darkest */ /* ── SECTION 2: Semantic Colour Tokens (Light Mode) ──────── */ --color-bg: var(--cream-50); --color-bg-alt: var(--cream-100); --color-bg-tint: var(--cream-200); --color-bg-inverse: var(--espresso-900); --color-bg-card: #FFFFFF; --color-bg-card-hover: var(--cream-50); --color-bg-overlay: rgba(26, 14, 6, 0.04); --color-surface-dark: var(--espresso-900); --color-surface-mid: var(--espresso-800); --color-text-primary: var(--espresso-900); --color-text-body: #3D2410; --color-text-secondary: #6B4A2F; --color-text-muted: var(--cream-500); --color-text-inverse: var(--cream-50); --color-text-on-copper: #FFFFFF; --color-border: var(--cream-300); --color-border-light: var(--cream-200); --color-border-strong: var(--cream-400); --color-border-copper: var(--copper-300); --color-accent: var(--copper-500); --color-accent-hover: var(--copper-400); --color-accent-pressed: var(--copper-600); --color-accent-muted: rgba(201, 112, 30, 0.10); --color-accent-glow: rgba(201, 112, 30, 0.22); --color-gold: var(--gold-500); --color-gold-bright: var(--gold-400); --color-gold-muted: rgba(212, 160, 23, 0.14); --color-success: #2D7A4F; --color-success-bg: rgba(45, 122, 79, 0.08); --color-error: #C0392B; --color-error-bg: rgba(192, 57, 43, 0.08); /* ── SECTION 3: Dark Mode Token Overrides ────────────────── */ /* Applied via [data-theme="dark"] on */ /* ── SECTION 4: Typography Scale ─────────────────────────── */ --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif; --font-ui: 'DM Sans', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Fluid display sizes */ --fs-display-2xl: clamp(3rem, 7vw, 5.25rem); /* 48–84px */ --fs-display-xl: clamp(2.5rem, 5.5vw, 4rem); /* 40–64px */ --fs-display-lg: clamp(2rem, 4.5vw, 3.25rem); /* 32–52px */ --fs-display-md: clamp(1.625rem,3.5vw, 2.5rem); /* 26–40px */ --fs-display-sm: clamp(1.375rem,2.5vw, 1.875rem); /* 22–30px */ /* Body sizes */ --fs-xl: 1.25rem; /* 20px */ --fs-lg: 1.125rem; /* 18px */ --fs-md: 1rem; /* 16px */ --fs-sm: 0.9375rem; /* 15px */ --fs-xs: 0.875rem; /* 14px */ --fs-2xs: 0.8125rem; /* 13px */ --fs-3xs: 0.75rem; /* 12px */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.72; --lh-loose: 1.9; --ls-tight: -0.02em; --ls-normal: 0em; --ls-wide: 0.04em; --ls-wider: 0.08em; --ls-widest: 0.14em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold:800; /* ── SECTION 5: Spacing Scale ─────────────────────────────── */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ --sp-28: 7rem; /* 112px */ --sp-32: 8rem; /* 128px */ --section-y: clamp(4rem, 8vw, 6.5rem); --section-y-lg: clamp(5rem, 10vw, 8.5rem); --container-px: clamp(1.25rem, 5vw, 2.5rem); /* ── SECTION 6: Border Radius ─────────────────────────────── */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 32px; --radius-3xl: 48px; --radius-full: 9999px; /* ── SECTION 7: Shadow System ─────────────────────────────── */ /* Warm-tinted shadows — not generic grey */ --shadow-xs: 0 1px 3px rgba(44, 26, 14, 0.06); --shadow-sm: 0 2px 8px rgba(44, 26, 14, 0.08), 0 1px 2px rgba(44, 26, 14, 0.04); --shadow-md: 0 6px 20px rgba(44, 26, 14, 0.10), 0 2px 6px rgba(44, 26, 14, 0.06); --shadow-lg: 0 16px 40px rgba(44, 26, 14, 0.12), 0 4px 12px rgba(44, 26, 14, 0.06); --shadow-xl: 0 28px 60px rgba(44, 26, 14, 0.15), 0 8px 24px rgba(44, 26, 14, 0.08); --shadow-copper: 0 6px 28px rgba(201, 112, 30, 0.28), 0 2px 8px rgba(201, 112, 30, 0.14); --shadow-copper-sm: 0 3px 14px rgba(201, 112, 30, 0.22); --shadow-gold: 0 4px 20px rgba(212, 160, 23, 0.30); /* Inset glow for cards */ --glow-copper: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(201, 112, 30, 0.20); /* ── SECTION 8: Motion ────────────────────────────────────── */ --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); --ease-decel: cubic-bezier(0, 0, 0.2, 1); --ease-accel: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.34, 1.8, 0.64, 1); --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 420ms; --dur-slower: 600ms; /* ── SECTION 9: Z-index ───────────────────────────────────── */ --z-base: 0; --z-lift: 10; --z-float: 50; --z-overlay: 100; --z-modal: 200; --z-nav: 300; --z-toast: 400; --z-top: 500; /* ── SECTION 10: Layout ───────────────────────────────────── */ --max-w-xs: 480px; --max-w-sm: 640px; --max-w-md: 800px; --max-w-lg: 1024px; --max-w-xl: 1200px; --max-w-2xl: 1360px; --max-w-3xl: 1520px; } /* ── Dark Mode Overrides ──────────────────────────────────── */ [data-theme="dark"] { --color-bg: var(--dark-900); --color-bg-alt: var(--dark-850); --color-bg-tint: var(--dark-800); --color-bg-inverse: var(--cream-50); --color-bg-card: var(--dark-800); --color-bg-card-hover: #2A1A10; --color-bg-overlay: rgba(255, 255, 255, 0.04); --color-surface-dark: var(--dark-900); --color-surface-mid: var(--dark-850); --color-text-primary: var(--cream-50); --color-text-body: var(--cream-100); --color-text-secondary: var(--cream-200); --color-text-muted: var(--dark-200); --color-text-inverse: var(--espresso-900); --color-border: rgba(255, 255, 255, 0.08); --color-border-light: rgba(255, 255, 255, 0.05); --color-border-strong: rgba(255, 255, 255, 0.14); --color-border-copper: rgba(201, 112, 30, 0.35); --color-accent: var(--copper-400); --color-accent-hover: var(--copper-300); --color-accent-pressed: var(--copper-500); --color-accent-muted: rgba(226, 136, 58, 0.14); --color-accent-glow: rgba(226, 136, 58, 0.28); --color-gold: var(--gold-400); --color-gold-bright: var(--gold-300); --color-gold-muted: rgba(245, 197, 24, 0.12); --shadow-xs: 0 1px 3px rgba(0,0,0,0.25); --shadow-sm: 0 2px 8px rgba(0,0,0,0.32); --shadow-md: 0 6px 20px rgba(0,0,0,0.38); --shadow-lg: 0 16px 40px rgba(0,0,0,0.44); --shadow-xl: 0 28px 60px rgba(0,0,0,0.50); --shadow-copper: 0 6px 28px rgba(226, 136, 58, 0.30); --shadow-copper-sm: 0 3px 14px rgba(226, 136, 58, 0.24); --shadow-gold: 0 4px 20px rgba(245, 197, 24, 0.28); }