/* ========================================================================== Body+ v4 — tokens: the single source of colour, type, space and shadow. Loaded FIRST, before base.css and main.css. Zero literal hex lives anywhere else in the CSS. Consolidated in phase 2 from bodyplus.css / -v4 / -v6 / -dark. Dark theme ships (v3): a --d-* palette plus a token remap applied under both @media (prefers-color-scheme: dark) and :root[data-theme="dark"], with :root:not([data-theme="light"]) so an explicit light choice overrides the system query. Phase 2 preserves this verbatim; phase 4 adds the toggle, localStorage persistence, the anti-flash script and a contrast audit. ========================================================================== */ :root{ /* ── palette: light (base) ─────────────────────────────────────────── */ --ink:#14213D; --ink-soft:#2C3A5C; --paper:#F7F7F3; --paper-alt:#EFEEE6; --line:#DBDCD3; --line-soft:#E8E8E1; --flag:#C1432E; /* out-of-range marker — clinical meaning, never decorative */ --optimal:#3F6B4F; /* in-range marker — clinical meaning, never decorative */ --muted:#6B6F66; --white:#FFFFFF; /* soft fills + the one accent (from v4) */ --optimal-soft:#E4EDE6; --flag-soft:#F6E2DD; --bio:#0A7F5A; /* THE accent — deep emerald, 4.8:1 on --paper (AA) */ --bio-lift:#35C98E; /* same hue lifted, for ink/dark surfaces only */ --bio-wash:rgba(10,127,90,.10); /* named constants that were inline hex in rules before phase 2 (light context) */ --ink-on-bio:#06281B; /* dark-emerald text/icon sitting on the accent */ --ink-hover:#1B2A4C; /* lifted navy — .model4 hover surface */ --optimal-line:#CBDCD0; /* pale-green border for optimal-soft chips */ --paper-alt-hover:#E9E8DE; /* .path4.upgrade hover surface */ --warm-ink:#8A5620; /* single warm one-off — the modal launch-date icon */ /* ── type ──────────────────────────────────────────────────────────── */ --f-display:'Fraunces',Georgia,serif; --f-body:'IBM Plex Sans',system-ui,sans-serif; --f-data:'IBM Plex Mono',ui-monospace,monospace; /* ── space / radius / shadow / layout ──────────────────────────────── */ --gut:clamp(20px,5vw,64px); --maxw:1280px; --r:3px; /* the only radius */ --shadow:0 1px 2px rgba(20,33,61,.04), 0 8px 24px -12px rgba(20,33,61,.10); --shadow-lift:0 2px 4px rgba(20,33,61,.05), 0 18px 44px -16px rgba(20,33,61,.16); --glow:0 0 0 1px rgba(10,127,90,.35), 0 6px 26px -6px rgba(10,127,90,.35); /* ── palette: dark (inert until a remap block below activates it) ──── */ color-scheme: light dark; --d-paper:#0F141B; --d-paper-alt:#171F29; --d-white:#1B2632; --d-ink:#ECEEEA; --d-ink-soft:#C4C9D0; --d-muted:#99A1AA; --d-line:#2A3542; --d-line-soft:#212B36; --d-flag:#E5674F; --d-optimal:#5FA97C; --d-bio:#35C98E; --d-bio-wash:rgba(53,201,142,.12); --d-optimal-soft:rgba(95,169,124,.16); --d-flag-soft:rgba(229,103,79,.16); --d-shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -14px rgba(0,0,0,.70); --d-shadow-lift:0 2px 6px rgba(0,0,0,.50), 0 22px 50px -18px rgba(0,0,0,.80); --on-dark:#F4F5F1; /* constant light text on always-dark surfaces (bands/tiles) */ /* dark surface constants that were inline hex before phase 2 */ --d-band:#131C27; /* band-ink base under the accent gradients */ --d-surface:#141C27; /* .model4 / .loop-step.is-return surface */ --d-surface-deep:#0C131B;/* .capsule-card .panel-head surface */ --d-on-accent:#04231A; /* text on the accent bubble */ --d-scrim:rgba(0,0,0,.58); /* the light scrim is invisible on a dark ground */ /* brand-mark height (v4 base) */ --mark-h:44px; /* header + menu (2026-07-30 nav rebuild) */ --scrim:rgba(20,33,61,.34); /* dim behind the open menu panel */ --menu-surface:var(--paper); /* panel ground — remapped with the palette */ } /* --mark-h responsive (v4) */ @media (max-width:920px){ :root{ --mark-h:38px; } } @media (max-width:640px){ :root{ --mark-h:30px; } } /* --mark-h override (v6 — bumped across the board; loaded after v4, so it wins) */ :root{ --mark-h:45px; } @media (max-width:920px){ :root{ --mark-h:43px; } } @media (max-width:640px){ :root{ --mark-h:40px; } } /* Sticky-bar height: the wordmark plus .nav-in's 14px block padding and the 1px rule. The mobile menu panel hangs off the bottom of it, so it has to be a number. */ :root{ --nav-h:calc(var(--mark-h) + 29px); } /* ── dark token remap : identical in both activation contexts ─────────── */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:var(--d-paper); --paper-alt:var(--d-paper-alt); --white:var(--d-white); --ink:var(--d-ink); --ink-soft:var(--d-ink-soft); --muted:var(--d-muted); --line:var(--d-line); --line-soft:var(--d-line-soft); --flag:var(--d-flag); --optimal:var(--d-optimal); --bio:var(--d-bio); --bio-wash:var(--d-bio-wash); --optimal-soft:var(--d-optimal-soft); --flag-soft:var(--d-flag-soft); --shadow:var(--d-shadow); --shadow-lift:var(--d-shadow-lift); --scrim:var(--d-scrim); } } :root[data-theme="dark"]{ --paper:var(--d-paper); --paper-alt:var(--d-paper-alt); --white:var(--d-white); --ink:var(--d-ink); --ink-soft:var(--d-ink-soft); --muted:var(--d-muted); --line:var(--d-line); --line-soft:var(--d-line-soft); --flag:var(--d-flag); --optimal:var(--d-optimal); --bio:var(--d-bio); --bio-wash:var(--d-bio-wash); --optimal-soft:var(--d-optimal-soft); --flag-soft:var(--d-flag-soft); --shadow:var(--d-shadow); --shadow-lift:var(--d-shadow-lift); --scrim:var(--d-scrim); }