/* longbook.app — the site's design tokens. ONE source for all 11 pages. * * Written by the CDO, 2026-07-23. Until this file is linked, every page carries its own copy of * this block: 11 copies of the same 27 tokens, which is 11 promises rather than a system. The * copies were verified identical before this file was cut — all 27 tokens, zero drift — so * adopting it changes nothing visually. That is the point: it is a refactor, not a repaint. * * Each page needs `` * in its , and its own `:root { … }` block deleted. Adding an element is outside the CDO's * scope — design values, not markup — and the failure mode is worth the care: if this file doesn't * deploy or the path is wrong, all 11 pages lose all 27 tokens at once. * * These mirror apps/desktop/src/theme/tokens.css, which is the system of record. If the two ever * disagree, the desktop file is right and this one is stale. The desktop carries more (the type * ladder, motion, the d1–d12 data ramp); the site only needs what it draws with. */ :root { /* ---- surfaces ---- */ --bg: #FBF9F4; --card: #FFFFFF; /* The alternating band. Sits 1.074 from --bg: below any text threshold, above the ~1.05 where two surfaces read as deliberate rather than as a mistake. The bands were --accent-soft2, a lavender wash — accent spent on rhythm, which is accent spent on nothing. Callouts, hovers, focus rings and links keep the accent; only the page's stripes lost it. */ --surface-sunken: #F2F1ED; /* ---- text ---- */ --ink: #1B1A17; --ink2: #54514B; --ink3: #726D67; --ink4: #8A857D; /* ---- brand ---- */ /* Deep indigo. Reserved for brand, action and "you are here" — never a data colour. */ --accent: #524BA6; --accent-ink: #403A85; --accent-soft: #EAE9F4; --accent-soft2: #F3F2F9; /* ---- state ---- */ --soon: #B5482A; --ok: #2F7D53; /* ---- edges ---- */ --border: rgba(27, 26, 23, 0.06); --border2: rgba(27, 26, 23, 0.10); --hairline: rgba(27, 26, 23, 0.05); /* ---- chrome (the dark hat; the only surface the mark may sit on) ---- */ --chrome-rail: #17161B; --chrome-fg: #EDEBE7; --chrome-fg-muted: #8F8B99; /* ---- radii ---- */ --r-sm: 10px; --r-md: 13px; --r-lg: 16px; --r-xl: 20px; --r-xxl: 24px; /* ---- elevation ---- */ --elev-1: 0 0 0 0.5px rgba(27, 26, 23, 0.06), 0 4px 16px rgba(27, 26, 23, 0.08); --elev-2: 0 0 0 0.5px rgba(27, 26, 23, 0.08), 0 14px 40px rgba(27, 26, 23, 0.12); /* ---- layout ---- */ --wrap: 1080px; }