/* ============================================================ tokens.css — THE per-client customization surface. Change these variables to re-theme an entire site. This is the "adaptive" layer; the signature "tell" lives in chrome.css. ============================================================ */ :root { /* --- Theme mode: set data-theme="dark" on to flip --- */ --bg: #f4f4f2; /* page background (light-technical default) */ --bg-elev: #ffffff; /* raised surfaces / caption cards */ --ink: #111214; /* primary text */ --ink-soft: #5b5f66; /* secondary text */ --ink-faint: #9aa0a6; /* hints, qualifiers */ --line: rgba(17,18,20,.12);/* blueprint grid + hairlines */ --line-strong: rgba(17,18,20,.22); /* --- Accent: the one sharp color per client --- */ --accent: #E8590C; --accent-ink: #14100c; /* text on accent */ /* --- Type: pick distinctive fonts per client (loaded in ) --- */ --font-display: "Cormorant Garamond", Georgia, serif; /* headlines */ --font-body: "Hanken Grotesk", system-ui, sans-serif; /* body + UI */ --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* labels, captions */ /* --- Rhythm --- */ --maxw: 1200px; --pad: clamp(20px, 5vw, 64px); --radius: 10px; } /* Dark-cinematic variant — one attribute flips the whole shell */ html[data-theme="dark"] { --bg: #0e0b09; --bg-elev: #1a1512; --ink: #f4efe9; --ink-soft: #b3a99e; --ink-faint: #776e64; --line: rgba(255,240,225,.09); --line-strong: rgba(255,240,225,.18); --accent: #E8590C; --accent-ink: #14100c; }