/* tokens.css — storyarc design tokens. * * The two-theme token set from DESIGN.md §3.2 "Theme tokens", verbatim. * Token names are identical across themes — only the values flip. Default * is dark; light is selected by `data-theme="light"` on . Every * storyarc stylesheet reads these custom properties — no raw colour outside here. * * `--accent-ink` is the accent value to use whenever the accent is text * (eyebrows, inline links, the LIVE label) — legible in both themes. */ :root, :root[data-theme="dark"] { /* Surfaces */ --bg: #0e0d0b; /* warm near-black */ --surface-1: #181612; /* card bg */ --surface-2: #221f1a; /* hover/pressed card */ --rule: rgba(240, 230, 210, 0.10); /* hairlines */ /* Text */ --text-1: #f3eee2; /* primary ink */ --text-2: rgba(243, 238, 226, 0.66); --text-3: rgba(243, 238, 226, 0.42); --ink: #f3eee2; /* "ink" for serif headlines */ /* Accent (the "thread") * TODO (when dark theme goes live): revisit. Light theme now uses the * prototype's rust red; the original DESIGN.md §3.1 amber-on-dark * decision should be re-evaluated against rust-on-dark for contrast * (rust at ~10:1+ on near-black is plausible but unverified). */ --accent: #f0a500; /* amber primary */ --accent-2: #b76900; /* hover/pressed */ --accent-soft: rgba(240, 165, 0, 0.14); /* tinted surface for live/active */ --accent-ink: #f0a500; /* accent color used on text (eyebrows, links) */ /* Type */ --serif: "Source Serif 4", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; } :root[data-theme="light"] { /* Surfaces — nudged darker from DESIGN.md §3.2 spec values * (--bg #faf7f0 → #f8f1de, --surface-1 #f3ecdb → #efe5c9, --surface-2 * #ebe2cd → #e7dbbb) on 2026-05-24 because the spec --bg read as * pure white on most mobile panels (auto-brightness + cool-tinted * default whites washed out the warmth). Surface-1/2 stepped by the * same proportion to preserve card vs paper contrast. See TWEAKS §6. */ --bg: #f8f1de; /* warm paper */ --surface-1: #efe5c9; /* card bg — slightly warmer than --bg */ --surface-2: #e7dbbb; /* hover/pressed card */ --rule: rgba(40, 30, 15, 0.12); /* hairlines */ /* Text — muted alphas darkened 2026-05-31 (text-2 0.66→0.74, text-3 * 0.46→0.58) to restore contrast lost when the paper/surfaces were * nudged darker (TWEAKS §6); the muted labels hadn't been stepped to match. */ --text-1: #1a1612; /* primary ink */ --text-2: rgba(26, 22, 18, 0.74); --text-3: rgba(26, 22, 18, 0.58); --ink: #1a1612; /* Accent (the "thread") — rust red, the prototype's original accent. * Phase 5b mapped this to amber on warm paper for contrast; rolled back * in 2026-05-20 to unify with the editorial palette and drop manifesto's * scoped crimson. `--accent-ink` is the darker variant for text (passes * ~7.5:1 on `--bg`, AAA). */ --accent: #b03a2e; /* primary on light — graphics, thread, LIVE dot */ --accent-2: #8a2c22; /* hover/pressed */ --accent-soft: rgba(176, 58, 46, 0.12); --accent-ink: #8a2c22; /* darker rust for text use (eyebrows, links) */ /* Type — identical to dark */ --serif: "Source Serif 4", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; }