/* ========================================================================== TOKENS — the single source of truth. Nothing else defines a raw color. Every color is declared ONCE via light-dark(). That buys three things: 1. no duplicated palette block to drift out of sync 2. correct colors with JavaScript disabled (the OS preference still wins) 3. the toggle only has to flip `color-scheme`, not restate 40 values Contrast ratios in the comments are computed, not estimated. ========================================================================== */ :root { /* Light is the default, not the OS preference. Setting it here rather than only in JS means a visitor with JavaScript disabled still gets light — every light-dark() below resolves off this one declaration. */ color-scheme: light; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ---- Palette ----------------------------------------------------------- Source: E4C59E sand / AF8260 camel / 803D3B brick / 322C2B cocoa. Roles are assigned by luminance, not by preference: cocoa is the only one dark enough to set body text, brick is the only mid-tone that clears 4.5:1 on a light ground, and camel measures just 3.32:1 as text — so camel is fenced to rules, borders and UI edges and never sets prose. Every ratio in the comments is computed. */ --sand: #E4C59E; --camel: #AF8260; --brick: #803D3B; --cocoa: #322C2B; /* ---- Surfaces ---------------------------------------------------------- */ --bg-base: light-dark(#FFFCF8, #1B1717); /* warm white, not pure white */ --bg-tint: light-dark(#F4EBDF, #232020); /* sand tint band */ --bg-warm: light-dark(#EFE3D2, #262120); /* deeper sand band */ --bg-card: light-dark(#FFFFFF, #262221); --bg-inset: light-dark(#F8F2EA, #201C1B); /* form wells, chips at rest */ /* The deep band — Trusted By and the footer. Constant across themes: in light it reads as a dark bar, in dark it sits just ABOVE the page ground so it still separates instead of disappearing. */ --bg-ink: #322C2B; --brand-deep: #322C2B; --ink-text: #F3E7D6; --ink-text-dim: #C9A177; /* 5.78:1 on cocoa */ --ink-hairline: rgba(228, 197, 158, .16); --ink-border: rgba(228, 197, 158, .28); /* ---- Text -------------------------------------------------------------- */ --text-primary: light-dark(#322C2B, #EDE0CE); /* 13.41:1 / 13.67:1 */ --text-secondary: light-dark(#5C5250, #B9AAA3); /* 7.39:1 / 7.91:1 */ --text-muted: light-dark(#6B605D, #9A8B84); /* 5.94:1 / 5.42:1 */ --text-on-accent: light-dark(#FFFFFF, #322C2B); /* 7.93:1 / 6.42:1 */ /* ---- Lines — camel lives here, where 3.32:1 is fine ---------------------- */ --border-hairline: light-dark(#EADFD0, #2C2726); --border-default: light-dark(#DCCBB4, #3A3331); --border-strong: light-dark(#AF8260, #554945); --focus-ring: light-dark(#803D3B, #D9A87A); /* ---- Accent ------------------------------------------------------------ */ --accent: light-dark(#803D3B, #D9A87A); /* 7.75:1 / 8.32:1 as text */ --accent-text: light-dark(#803D3B, #D9A87A); --accent-hover: light-dark(#6A3230, #E7BE96); --accent-wash: light-dark(rgba(128,61,59,.07), rgba(217,168,122,.10)); --accent-veil: light-dark(rgba(128,61,59,.24), rgba(217,168,122,.28)); --state-error: light-dark(#8C2F26, #E0A197); --state-valid: light-dark(#3E6B4F, #93C0A2); --grad-warm: linear-gradient(112deg, #AF8260 0%, #803D3B 60%, #322C2B 100%); --glow-warm: radial-gradient(58% 54% at 76% 40%, light-dark(rgba(175,130,96,.16), rgba(217,168,122,.10)) 0%, light-dark(rgba(128,61,59,.07), rgba(128,61,59,.08)) 42%, rgba(128, 61, 59, 0) 72%); /* ---- Elevation --------------------------------------------------------- Shadows barely read on dark, so the dark values fade to near-nothing and --ring + --inset-top take over: a luminance step, a hairline, and a 1px inner top highlight — the edge you'd see on a lit surface. */ --shadow-a: light-dark(rgba(18,22,31,.05), rgba(0,0,0,0)); --shadow-b: light-dark(rgba(18,22,31,.12), rgba(0,0,0,.55)); --shadow-c: light-dark(rgba(18,22,31,.18), rgba(0,0,0,.85)); --shadow-sm: 0 1px 2px var(--shadow-a); --shadow-md: 0 1px 2px var(--shadow-a), 0 12px 32px -12px var(--shadow-b); --shadow-lg: 0 2px 4px var(--shadow-a), 0 32px 64px -24px var(--shadow-c); --ring: 0 0 0 1px light-dark(transparent, #1B2128); --inset-top: inset 0 1px 0 light-dark(transparent, rgba(255,255,255,.045)); /* ---- Type -------------------------------------------------------------- */ --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif; --font-text: "Schibsted Grotesk", "Schibsted Fallback", system-ui, sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-script: "Quentin", "Segoe Script", cursive; --fs-xl: clamp(2.35rem, 5.5vw, 4.25rem); --fs-l: clamp(1.85rem, 3.6vw, 2.9rem); --fs-m: clamp(1.35rem, 2vw, 1.85rem); --fs-title: 1.1875rem; --fs-lede: clamp(1.0625rem, 1.4vw, 1.1875rem); --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-data: 0.78rem; --fs-micro: 0.72rem; /* ---- Space — 4px base -------------------------------------------------- */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s6: 1.5rem; --s8: 2rem; --s12: 3rem; --s16: 4rem; --s24: 6rem; --s32: 8rem; --s40: 10rem; --section-y: clamp(3.75rem, 6.75vw, 6rem); /* eased down from 5/9vw/8 */ --gallery-y: clamp(4.5rem, 8.25vw, 7.5rem); /* eased down from 6/11vw/10; still more air than --section-y, which is what makes it read as a gallery */ --page-max: 1240px; --page-pad: clamp(1.25rem, 4vw, 2rem); --measure: 68ch; /* ---- Radii ------------------------------------------------------------- */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; /* ---- Motion ------------------------------------------------------------ */ --t-micro: 120ms; --t-state: 240ms; --t-enter: 420ms; --t-return: 600ms; --t-pan: 2600ms; --e-enter: cubic-bezier(.22, .61, .36, 1); --e-state: cubic-bezier(.4, 0, .2, 1); --e-pan: cubic-bezier(.4, 0, .6, 1); /* near-linear middle, soft ends — how a real scroll actually feels */ --nav-h: 68px; } @media (prefers-reduced-motion: reduce) { :root { --t-micro: .01ms; --t-state: .01ms; --t-enter: .01ms; --t-return: .01ms; --t-pan: .01ms; } }