/* ========================================================================== Design tokens — Editorial Luxury Single source of truth for colours, type, space and motion. Dark is the default; light is activated via ``. ========================================================================== */ /* --- Theme-independent tokens (typography / space / motion / layering) --- */ :root { /* Typography */ --font-display: 'Fraunces', 'Times New Roman', Georgia, serif; --font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.5rem; --fs-3xl: clamp(2.75rem, 5vw + 1rem, 4.75rem); --fs-4xl: clamp(3.5rem, 8vw + 1rem, 7.5rem); --fs-display: clamp(4.5rem, 12vw + 1rem, 11rem); --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.55; --lh-loose: 1.8; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-widest: 0.22em; /* Space scale (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Radii — editorial prefers sharp geometry */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; /* Motion */ --ease-editorial: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); --dur-fast: 180ms; --dur-med: 360ms; --dur-slow: 700ms; --dur-cinema: 1600ms; /* Layering */ --z-nav: 50; --z-overlay: 100; --z-modal: 200; } /* --- Dark palette (default) ---------------------------------------------- */ :root, :root[data-theme="dark"] { --bg: #0A0A0A; --bg-elev-1: #141414; --bg-elev-2: #1A1A1A; --ink: #F5F1E8; --ink-muted: #A39F96; --ink-faint: #5E5A52; --accent: #B89557; --accent-hi: #D4AE6F; --danger: #C14545; --hairline: rgba(245, 241, 232, 0.08); --hairline-hi: rgba(245, 241, 232, 0.18); --overlay-1: rgba(10, 10, 10, 0.55); --overlay-2: rgba(10, 10, 10, 0.85); /* Pinned cream — always used for text overlaid on image scrims, so hero copy stays readable regardless of theme. */ --ink-on-image: #F5F1E8; --ink-on-image-muted: #A39F96; --nav-bg: rgba(10, 10, 10, 0.72); --grain-blend: overlay; --grain-opacity: 0.04; color-scheme: dark; } /* --- Light palette (mirrored on warm cream) ------------------------------ */ :root[data-theme="light"] { --bg: #F5F1E8; --bg-elev-1: #EEE8DA; --bg-elev-2: #E4DDCB; --ink: #1A1712; --ink-muted: #5E5A52; --ink-faint: #A39F96; --accent: #8B6D30; --accent-hi: #B89557; --danger: #B53333; --hairline: rgba(26, 23, 18, 0.10); --hairline-hi: rgba(26, 23, 18, 0.22); /* Light mode strengthens image scrims so pinned cream overlays stay legible. */ --overlay-1: rgba(10, 10, 10, 0.55); --overlay-2: rgba(10, 10, 10, 0.85); --ink-on-image: #F5F1E8; --ink-on-image-muted: #C9C3B4; --nav-bg: rgba(245, 241, 232, 0.78); --grain-blend: multiply; --grain-opacity: 0.03; color-scheme: light; }