/* ============================================================================ Safari Heirloom — Design Tokens The single source of truth for color, type, space, motion. Components reference these semantic vars, never raw values. (Design spec §2.) Law VI — Glass frames; paper holds. Contrast is a hard gate (≥4.5 / ≥3). ========================================================================== */ :root { /* --- Brand & surface (LIGHT, default) ----------------------------------- */ --paper: #fffefc; /* warm white — cards stop reading cool on cream */ --cream: #fcfaf8; /* page background — warm white */ --cream-band: #fff8eb; /* amber-washed section bands */ --sunk: #f4f1ed; /* inputs / recessed wells */ --ink: #191919; /* body text ~14:1 on cream */ --ink-soft: #333333; /* secondary text ~9:1 */ --ink-faint: #5c5048; /* captions ~5:1 */ --brand: #8a4600; /* primary action — deep amber ~6.6:1 cream */ --brand-bright: #a65600; /* hover / accent */ --brand-tint: #fff3d6; /* amber wash behind delight moments */ --gold-lifted: #f2b871; /* jewel accent legible on the hero scrim (both themes) */ --brand-on-dark: #ff8019; /* amber legible on the always-dark footer (~5.7:1) */ --secondary: #66433f; /* warm taupe — quiet accents */ --line: #e7dcc8; /* hairlines / borders on paper */ --focus: #a65600; /* focus ring */ --success: #2e7d32; --error: #c62828; --on-brand: #ffffff; /* text on the clay button */ --glass-tint: rgba(255, 253, 249, 0.66); /* opaque floor UNDER blur */ --glass-edge: rgba(255, 255, 255, 0.55); /* lit top edge of glass */ --scrim: rgba(25, 20, 16, 0.55); /* modal/lightbox backdrop */ /* --- Typography --------------------------------------------------------- */ --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-accent: "Cormorant Garamond", Georgia, serif; /* fluid 1.2 modular scale (min → max via clamp; body never < 17px) */ --fs--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.875rem); /* caption / legal */ --fs-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.125rem); /* body */ --fs-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.35rem); /* lead / label */ --fs-2: clamp(1.44rem, 1.33rem + 0.55vw, 1.6rem); /* card title */ --fs-3: clamp(1.73rem, 1.55rem + 0.9vw, 2rem); /* section heading */ --fs-4: clamp(2.07rem, 1.78rem + 1.45vw, 2.6rem); /* page heading */ --fs-5: clamp(2.6rem, 2.05rem + 2.75vw, 3.9rem); /* hero display */ --lh-body: 1.6; --lh-tight: 1.15; --lh-display: 1.04; /* hero / h1 — closed counters read couture */ --lh-heading: 1.1; /* h2 / h3 */ --lh-lead: 1.5; /* leads — deliberate, not diffuse */ --tracking-display: -0.022em; /* optical tracking tightens as size grows */ --tracking-tight: -0.006em; --tracking-eyebrow: 0.2em; --measure: 36rem; /* ~66ch readable column */ /* --- Space (0.5rem base unit; φ landmarks) ------------------------------ */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.625rem; /* φ landmark */ --space-xl: 2.625rem; /* φ landmark */ --space-2xl: 4.25rem; /* φ landmark */ --space-3xl: clamp(4.5rem, 3rem + 7vw, 8rem); /* section rhythm — roomier */ --gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem); --frame: 71rem; /* max content width */ /* --- Radii -------------------------------------------------------------- */ --r-input: 0.75rem; --r-card: 1.25rem; --r-sheet: 1.75rem; --r-pill: 999px; /* --- Shadows — warm umber, layered contact + ambient -------------------- */ --shadow-paper: 0 0.5px 1px rgba(56, 38, 20, 0.05), 0 3px 6px -2px rgba(56, 38, 20, 0.07), 0 12px 28px -12px rgba(56, 38, 20, 0.14); --shadow-raised: 0 0.5px 1px rgba(56, 38, 20, 0.06), 0 5px 12px -3px rgba(56, 38, 20, 0.10), 0 26px 50px -18px rgba(56, 38, 20, 0.22); --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 30px -18px rgba(28, 23, 20, 0.4); --shadow-clay: inset 0 1px 0 rgba(255, 240, 224, 0.42), inset 0 -2px 4px rgba(74, 32, 4, 0.28), 0 1px 2px rgba(40, 26, 12, 0.22), 0 9px 20px -8px color-mix(in srgb, var(--brand) 50%, transparent), 0 22px 40px -18px color-mix(in srgb, var(--brand) 36%, transparent); /* --- Motion ------------------------------------------------------------- */ --dur-micro: 120ms; --dur-base: 220ms; --dur-enter: 320ms; --dur-slow: 480ms; /* overlay / button settle */ --dur-reveal: 700ms; /* slow scroll-reveal rise — weight cue */ --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out — expensive glide */ --reveal-stagger: 90ms; /* --- z-index scale ------------------------------------------------------ */ --z-base: 0; --z-nav: 100; --z-bookbar: 200; --z-modal: 1000; --z-lightbox: 1100; /* always above the nav (audit fix) */ --z-toast: 1200; color-scheme: light; } /* --- DARK theme (toggle; Law VI unchanged) -------------------------------- */ :root[data-theme="dark"] { --paper: #161616; --cream: #0a0a0a; --cream-band: #14120f; --sunk: #1e1e1e; --ink: #ffffff; --ink-soft: #e0e0e0; --ink-faint: #bdb4a8; --brand: #ff8019; /* brighter amber reads on near-black */ --brand-bright: #ffa352; --brand-tint: #2a1c0c; --secondary: #d48681; --line: #2c2c2c; --focus: #ffa352; --on-brand: #1a0a00; --glass-tint: rgba(18, 18, 18, 0.72); --glass-edge: rgba(255, 255, 255, 0.10); --scrim: rgba(0, 0, 0, 0.66); /* dark elevation: near-black ambient is invisible on #0a0a0a — lift with a lit top edge + true-black cast so cards read raised, not flat. */ --shadow-paper: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.50), 0 16px 34px -16px rgba(0,0,0,0.72); --shadow-raised: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.55), 0 28px 56px -20px rgba(0,0,0,0.82); --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px -18px rgba(0,0,0,0.70); color-scheme: dark; }