/* ============================================================ 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: #1a5cff; --accent-ink: #ffffff; /* text on accent */ /* --- Type: pick distinctive fonts per client (loaded in ) --- */ --font-display: "Anton", Impact, sans-serif; /* headlines */ --font-body: "Archivo", 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: #0d0c0a; --bg-elev: #17150f; --ink: #f2f3f5; --ink-soft: #aeb4bd; --ink-faint: #6b7178; --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.20); --accent: #e8871e; --accent-ink: #14100a; }