/* ========================================================================== AURELLE — Design Tokens Every color, type size, spacing value and easing curve used across the site is declared here. Nothing else in the codebase should hard-code a hex value or a pixel size — change a piece of jewellery's "DNA" once, here, and it propagates everywhere. ========================================================================== */ :root { /* ---------- Color: core palette ---------- Muted, antique tones on purpose — this reads as an old atelier that has been cutting stones for decades, not a bright showroom. */ --c-ivory: #F7F3EC; --c-white: #FFFFFF; --c-black: #0E0D0C; --c-beige: #E8DFD0; --c-beige-deep: #DDCCA9; --c-gold: #B08D57; --c-gold-light: #D9C6A0; --c-gold-deep: #8C6D3F; --c-rose: #B98B7D; --c-rose-light: #D9BBAF; --c-ink: #2A2622; /* body text — softer than pure black */ /* ---------- Color: semantic (theme-aware) ---------- */ --bg-primary: var(--c-ivory); --bg-secondary: var(--c-beige); --bg-card: var(--c-white); --bg-inverse: var(--c-black); --text-primary: var(--c-ink); --text-secondary: #746C5F; --text-inverse: var(--c-ivory); --text-inverse-muted: rgba(247, 243, 236, 0.62); --text-inverse-faint: rgba(247, 243, 236, 0.45); --border-hair: rgba(14, 13, 12, 0.1); --border-hair-inverse: rgba(247, 243, 236, 0.14); --accent: var(--c-gold); --accent-light: var(--c-gold-light); --accent-deep: var(--c-gold-deep); --accent-2: var(--c-rose); --overlay-scrim: rgba(14, 13, 12, 0.55); --shine: rgba(255, 255, 255, 0.55); /* ---------- Typography ---------- */ --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif; --fs-eyebrow: clamp(0.7rem, 0.68rem + 0.1vw, 0.78rem); --fs-xs: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem); --fs-sm: clamp(0.9rem, 0.87rem + 0.15vw, 1rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-md: clamp(1.3rem, 1.2rem + 0.5vw, 1.65rem); --fs-lg: clamp(1.9rem, 1.5rem + 1.6vw, 2.85rem); --fs-xl: clamp(2.6rem, 1.9rem + 2.8vw, 4.4rem); --fs-2xl: clamp(3.4rem, 2.2rem + 4.8vw, 6.5rem); --fs-hero: clamp(3.6rem, 1.6rem + 9vw, 9rem); --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.7; --ls-eyebrow: 0.32em; --ls-wide: 0.08em; /* ---------- Layout ---------- */ --container-w: 1440px; --container-pad: clamp(1.5rem, 1rem + 3vw, 5rem); --section-pad-y: clamp(5rem, 3.6rem + 6vw, 10rem); --section-pad-y-sm: clamp(3rem, 2.4rem + 3vw, 5.5rem); --radius-sm: 2px; --radius-md: 4px; /* the running "facet" motif — angular corner cuts used on major image panels throughout the site (see .facet-frame in components.css) */ --facet-cut: 28px; --facet-cut-sm: 16px; /* ---------- Motion ---------- */ --ease-luxury: cubic-bezier(0.65, 0, 0.35, 1); --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --dur-fast: 0.3s; --dur-base: 0.6s; --dur-slow: 1s; /* ---------- Elevation ---------- */ --shadow-sm: 0 2px 16px rgba(14, 13, 12, 0.06); --shadow-md: 0 14px 44px rgba(14, 13, 12, 0.09); --shadow-lg: 0 30px 70px rgba(14, 13, 12, 0.14); --shadow-gold: 0 16px 36px rgba(176, 141, 87, 0.28); /* ---------- Z-index scale ---------- */ --z-base: 1; --z-header: 500; --z-mobile-nav: 700; --z-overlay: 800; --z-modal: 900; --z-preloader: 950; --z-cursor: 999; } /* ---------- Dark theme override ---------- Toggled by [data-theme="dark"] on . Only semantic tokens change — the raw palette stays put, so every component using semantic vars re-themes for free. */ [data-theme="dark"] { --bg-primary: var(--c-black); --bg-secondary: #17140F; --bg-card: #1B1712; --bg-inverse: var(--c-ivory); --text-primary: var(--c-ivory); --text-secondary: #A79B89; --text-inverse: var(--c-black); --text-inverse-muted: rgba(14, 13, 12, 0.62); --text-inverse-faint: rgba(14, 13, 12, 0.5); --border-hair: rgba(247, 243, 236, 0.12); --border-hair-inverse: rgba(14, 13, 12, 0.14); --overlay-scrim: rgba(0, 0, 0, 0.65); }