/* ============================================================================ tokens.css — THE single source of every color, font, space and radius token. Per design.md: this is the only file in the repo that may define a design token. No page, and no other stylesheet, declares `--gold`, `--bg`, a font stack, or a light-mode override. If you need a color that isn't here, ADD IT HERE — do not inline the hex. Extracted verbatim from public/index.css (the canonical, correct copy) on 2026-07-28, so the pages already on index.css render identically. The other 26 pages each carried a hand-copied, drifted version of these blocks; they migrate onto this file page by page. RULE: the light block must redefine EVERY token the dark block defines. A partial override is exactly how "half the page stays dark" happens. ============================================================================ */ :root { /* ---- surfaces ---- */ --bg: #111109; --bg-card: #1a1812; --bg-row: #15130d; --input-bg: #0d0c08; /* Overlay surfaces (modals/dropdowns). Previously only defined in the light block; the dark values here are the literal fallbacks the .ai-modal rules in index.css were already using, so nothing changes visually. */ --panel: #1b1a12; --line: #3a3726; /* ---- brand ---- */ --gold: #C6A95A; --gold-dim: rgba(198,169,90,0.78); /* The lift on a filled gold button. Was the literal #d8bb68, written out in four pages' `button:hover` rules, which is exactly the inlined hex this file exists to end. */ --gold-hover: #d8bb68; /* ---- text ---- */ --text: #f1ede0; --muted: rgba(232,227,212,0.75); /* ---- lines ---- */ --border: rgba(198,169,90,0.32); --border-active: rgba(198,169,90,0.62); /* ---- semantic status: neutral / gold / blue / purple / amber / green / red, each with a matching -bg (fill) and -border ---- */ /* 0.62, not the original 0.45. `--neutral` is the TEXT colour of the ON ORDER and CONCEPT badges, and at 0.45 over --neutral-bg it resolved to #7c796f on #24221c — 3.65:1 at 10px, against the 4.5 SC 1.4.3 needs. Measured by axe on production 2026-08-17, 29 instances on /products. 0.62 resolves to 5.6:1. The audit blamed --muted for this; --muted is fine (8.6:1 on --bg) and is deliberately left alone. See audit-2026-08-17.md, Part 1. */ --neutral: rgba(232,227,212,0.62); --neutral-bg: rgba(232,227,212,0.05); --neutral-border: rgba(232,227,212,0.15); --gold-fg: var(--gold); --gold-bg: rgba(198,169,90,0.12); --gold-border: rgba(198,169,90,0.3); --blue: #88a8bc; --blue-bg: rgba(100,140,180,0.13); --blue-border: rgba(100,140,180,0.3); --purple: #b89ac8; --purple-bg: rgba(160,120,180,0.13); --purple-border: rgba(160,120,180,0.3); --amber: #d8a268; --amber-bg: rgba(216,162,104,0.13); --amber-border: rgba(216,162,104,0.3); --green: #9bb088; --green-bg: rgba(120,160,100,0.13); --green-border: rgba(120,160,100,0.3); --red: #d49090; --red-bg: rgba(180,80,80,0.13); --red-border: rgba(180,80,80,0.3); /* ---- type ---- Three stacks, so a page can never invent a sixth. These are the CURRENT canonical values (what index.css / site-header.css already render), chosen here over design.md's native-stack recommendation so this extraction is a zero-visual-change move. Switching the UI face is now a ONE-LINE change in this file rather than a 27-page edit — worth doing as its own decision, since Inter costs a Google Fonts round trip on an internal tool. */ --font-display: Georgia, 'Times New Roman', serif; --font-ui: 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; /* ---- spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* ---- radius ---- The look is line-based (1px borders), not shadowed. Reserve shadow for genuine overlays. */ --radius: 6px; --radius-card: 10px; --radius-pill: 999px; } /* ===== LIGHT THEME ===== Additive override: the dark :root above stays the default and fallback. These values apply only when is set (by the no-flash head script reading the po_theme cookie). Foreground colors are deepened so they clear WCAG AA on the light background. Every token above that carries a color is redefined here. Fonts, spacing and radius are theme-independent and intentionally not repeated. */ [data-theme="light"] { --bg: #f4f1e8; --bg-card: #ffffff; --bg-row: #faf8f2; --input-bg: #ffffff; --panel: var(--bg-card); --line: var(--neutral-border); /* #7f6223, deepened from #856825 on 2026-08-18. The old value cleared AA on white but not on its own tint: `--gold` on `--gold-bg` at 9px measured 4.44:1 (`.tp-pill.progress`), and the small gold-on-gold pills are where this token is used most. Deepening also improves the button case, where the gold is the FILL and `--bg` is the text. */ --gold: #7f6223; /* deep gold: readable as text on white, on its own tint, AND as a button fill */ --gold-dim: #7a5e1f; --gold-hover: #6b5219; /* light mode darkens on hover; the dark theme lifts */ --text: #2a2519; --muted: rgba(42,37,25,0.70); --border: rgba(143,111,36,0.30); --border-active: rgba(143,111,36,0.58); /* 0.68 for the same reason as the dark 0.62 above: at 0.50 the badge text resolved to 3.05:1 on the light card. The light theme was NOT part of the axe run (it is listed as Undetermined in the audit); this one was computed by hand from the same compositing chain, because changing the dark value without checking its twin is how a partial override happens. */ --neutral: rgba(42,37,25,0.68); --neutral-bg: rgba(42,37,25,0.05); --neutral-border: rgba(42,37,25,0.16); --gold-fg: var(--gold); --gold-bg: rgba(143,111,36,0.12); --gold-border: rgba(143,111,36,0.32); --blue: #356b86; --blue-bg: rgba(53,107,134,0.10); --blue-border: rgba(53,107,134,0.32); --purple: #6f4f88; --purple-bg: rgba(111,79,136,0.10); --purple-border: rgba(111,79,136,0.32); --amber: #8a5a14; --amber-bg: rgba(138,90,20,0.11); --amber-border: rgba(138,90,20,0.32); /* #3a7029, deepened from #3f7a2e on 2026-08-18: 4.49:1 on `--green-bg` at 9px (`.ts-complete`, the "✓ Tea sheet" chip). Same near-miss as `--gold` above and the same fix. */ --green: #3a7029; --green-bg: rgba(63,122,46,0.11); --green-border: rgba(63,122,46,0.32); --red: #b23a2e; --red-bg: rgba(178,58,46,0.10); --red-border: rgba(178,58,46,0.32); }