/* * Echo Perfume — Design Tokens * Black / White / Gold luxury palette. Light is the default; dark is * applied via [data-theme="dark"] on , toggled and persisted by * assets/js/theme-toggle.js. Respects prefers-color-scheme on first visit. */ :root { /* ---- Typography ---- */ --font-display: "Bodoni Moda", "Times New Roman", serif; --font-body: "Jost", "Segoe UI", sans-serif; --fs-hero: clamp(2.75rem, 6vw, 6rem); --fs-h1: clamp(2.25rem, 4vw, 3.5rem); --fs-h2: clamp(1.75rem, 3vw, 2.5rem); --fs-h3: clamp(1.25rem, 2vw, 1.75rem); --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.6875rem; --lh-tight: 1.1; --lh-normal: 1.6; --tracking-wide: 0.14em; --tracking-wider: 0.22em; /* ---- Spacing scale ---- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; --container-max: 1440px; --container-pad: clamp(1.25rem, 5vw, 4rem); /* ---- Radius ---- */ --radius-sm: 2px; --radius-md: 6px; --radius-lg: 18px; --radius-pill: 999px; /* ---- Motion ---- */ --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1); --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 240ms; --dur-med: 550ms; --dur-slow: 900ms; /* ---- Light theme palette (default) ---- */ --color-bg: #ffffff; --color-bg-alt: #f8f6f2; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-text: #131211; --color-text-muted: #6b6660; --color-border: rgba(19, 18, 17, 0.1); --color-border-strong: rgba(19, 18, 17, 0.22); --color-gold: #a9834f; --color-gold-light: #c9a869; --color-gold-soft: rgba(169, 131, 79, 0.12); --color-black: #0d0c0b; --color-inverse-text: #f7f4ee; --shadow-card: 0 1px 2px rgba(19, 18, 17, 0.04), 0 12px 32px -12px rgba(19, 18, 17, 0.12); --shadow-raised: 0 20px 60px -20px rgba(19, 18, 17, 0.25); --noise-opacity: 0.025; } :root[data-theme="dark"] { --color-bg: #0a0a09; --color-bg-alt: #131211; --color-surface: #171615; --color-surface-raised: #1c1a18; --color-text: #f3efe7; --color-text-muted: #a39c8f; --color-border: rgba(247, 244, 238, 0.1); --color-border-strong: rgba(247, 244, 238, 0.2); --color-gold: #cba86a; --color-gold-light: #e3cd9a; --color-gold-soft: rgba(203, 168, 106, 0.14); --color-black: #050504; /* --color-inverse-text intentionally NOT redefined here: components that use it (footer, primary buttons, skip-link, pagination) keep a black-ish background in both themes, so their text must stay the light constant defined on :root, not flip to a dark value that would vanish here. */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 45px -18px rgba(0, 0, 0, 0.6); --shadow-raised: 0 30px 80px -20px rgba(0, 0, 0, 0.7); --noise-opacity: 0.05; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0a0a09; --color-bg-alt: #131211; --color-surface: #171615; --color-surface-raised: #1c1a18; --color-text: #f3efe7; --color-text-muted: #a39c8f; --color-border: rgba(247, 244, 238, 0.1); --color-border-strong: rgba(247, 244, 238, 0.2); --color-gold: #cba86a; --color-gold-light: #e3cd9a; --color-gold-soft: rgba(203, 168, 106, 0.14); --color-black: #050504; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 45px -18px rgba(0, 0, 0, 0.6); --shadow-raised: 0 30px 80px -20px rgba(0, 0, 0, 0.7); --noise-opacity: 0.05; } }