/* tokens.css — storyarc design tokens. * * Three themes, one token set. Token names are identical across all three — * only the values change. Every storyarc stylesheet reads these custom * properties; no raw colour lives outside this file. * * beige warm paper. The product's default face and the palette that * shipped as `light` until 2026-08-16 — values unchanged by the * rename, including the 2026-05-24 surface nudge (TWEAKS §6) and * the 2026-05-31 muted-text darkening. * light cool neutral paper. New in the three-theme set. * dark warm near-black. * * Bare `:root` carries the beige palette so a JS-off client still renders a * complete, legible theme. Otherwise the bootstrap script in * storyarc/base.html always stamps an explicit `data-theme` on before * the stylesheets parse, and the named blocks below take over. * * `--accent-ink` is the accent value to use whenever the accent is *text* * (eyebrows, inline links, the LIVE label); `--accent` is for graphics and * for filled grounds such as the LEAD badge, whose label is `--bg`. The two * differ per theme because a single tone cannot clear contrast in both roles. * * Contrast figures in the comments are WCAG 2.1 ratios against that theme's * own `--bg`, with alpha tokens composited over it first. */ /* ── beige — warm paper. Default, and the JS-off fallback. ──────────── */ :root, :root[data-theme="beige"] { /* Surfaces */ --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 */ --text-1: #1a1612; /* primary ink — 15.96:1 */ --text-2: rgba(26, 22, 18, 0.74); /* 7.20:1 */ --text-3: rgba(26, 22, 18, 0.58); /* 4.24:1, AA-large */ --ink: #1a1612; /* "ink" for serif headlines */ /* Accent (the "thread") — rust red. */ --accent: #b03a2e; /* graphics, thread, LEAD badge ground — 5.34:1 */ --accent-2: #8a2c22; /* hover/pressed */ --accent-soft: rgba(176, 58, 46, 0.12); /* tinted surface for live/active */ --accent-ink: #8a2c22; /* accent on text — 7.56:1, AAA */ /* Type */ --serif: "Source Serif 4", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; } /* ── light — cool neutral paper. ────────────────────────────────────── */ :root[data-theme="light"] { /* Surfaces — neutral with a faint cool bias, so it reads as plainly different from beige rather than as beige with the warmth turned down. Not pure white: an unbroken #fff ground makes the hairline rules and the card/paper separation disappear on a bright mobile panel. */ --bg: #fbfbfc; --surface-1: #f1f2f5; --surface-2: #e6e8ed; --rule: rgba(20, 22, 26, 0.13); /* Text */ --text-1: #14161a; /* 17.51:1 */ --text-2: rgba(20, 22, 26, 0.72); /* 7.10:1 */ --text-3: rgba(20, 22, 26, 0.58); /* 4.39:1, AA-large */ --ink: #14161a; /* Accent — the same rust as beige; on the cooler, lighter ground it needs a touch less lift for text, hence the slightly brighter --accent-ink. */ --accent: #b03a2e; /* 5.82:1 */ --accent-2: #8a2c22; --accent-soft: rgba(176, 58, 46, 0.10); --accent-ink: #9c3226; /* 7.01:1, AAA */ /* Type — identical across themes */ --serif: "Source Serif 4", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; } /* ── dark — warm near-black. ────────────────────────────────────────── */ :root[data-theme="dark"] { /* Surfaces — unchanged from the original dark set. */ --bg: #0e0d0b; /* warm near-black */ --surface-1: #181612; /* card bg */ --surface-2: #221f1a; /* hover/pressed card */ --rule: rgba(240, 230, 210, 0.10); /* Text */ --text-1: #f3eee2; /* 16.78:1 */ --text-2: rgba(243, 238, 226, 0.66); /* 7.61:1 */ --text-3: rgba(243, 238, 226, 0.42); /* 3.70:1, AA-large */ --ink: #f3eee2; /* Accent — terracotta, resolved 2026-08-16. This block previously carried * amber (#f0a500) behind a TODO to re-check rust on dark. Measured: the * light themes' #b03a2e is 3.23:1 on this ground and fails for text, so * rust could never carry over unchanged. Lifting it into the terracotta * range clears contrast in both roles and keeps the thread rust-family in * every theme, which amber did not. Split as in the light themes, in the * opposite direction — the lighter tone takes text. */ /* Superseded 2026-08-17 by Spine's amber. Spine became the default surface * and renders in a fixed amber-on-near-black palette, so every tap out of it * into Me, Search or sign-in changed the app's accent — terracotta there, * amber behind. One accent is what makes them read as one app. This is not a * contrast concession: amber measures 9.73:1 on this ground against * terracotta's 6.28:1, so both roles improve. The rust-family reasoning * below held while dark was one theme among three; it stopped applying when * light and beige were retired. */ --accent: #f2a93b; /* Spine's --sp-accent; 9.73:1 on --bg */ --accent-2: #ffc24b; /* hover/pressed — Spine's --sp-accent-hover, 12.09:1 */ --accent-soft: rgba(242, 169, 59, 0.16); --accent-ink: #f2a93b; /* one tone in both roles — it clears AA for text */ /* Type — identical across themes */ --serif: "Source Serif 4", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; }