/* static/tokens.css Brand + accessibility color tokens for the Vanity Call Sign Finder (branding workstream, see BACKLOG.md "Branding & visual identity"). Split out from style.css once three full variants no longer fit under the 500-line ceiling (AGENTS.md) alongside everything else in that file. Load this BEFORE style.css -- style.css only *consumes* these custom properties, it never redefines them. Three variants, same variable names in every block -- this is the contract a future manual light/dark/high-contrast toggle (BACKLOG.md "Accessibility... static/a11y-prefs.js", not built yet) hooks into by setting attributes on , no CSS changes required later: 1. :root -- light, the no-preference default 2. @media (prefers-color-scheme: dark) -- OS-level dark, no toggle involved 3. :root[data-contrast="high"] -- high-contrast; wins over both of the above regardless of source order (see the :not()/specificity note below) since the future toggle sets this attribute directly. Brand accent is a deep teal (#0b6e79 light / #4fb8c4 dark / #00474f high-contrast), replacing the previous generic SaaS blue (#1d4ed8) -- see BACKLOG.md: trustworthy-but-modern next to AE7Q's dated/dense look, without reading as startup-generic or playful. WCAG 2.1 contrast ratios (computed against this file's own bg/surface, sRGB relative-luminance formula, verified with a throwaway script -- not eyeballed): light accent #0b6e79 vs --bg #f6f7f9: 5.56:1 light accent #0b6e79 vs --surface #ffffff: 5.96:1 dark accent #4fb8c4 vs --bg #14181d: 7.63:1 dark accent #4fb8c4 vs --surface #1c2127: 6.93:1 high-c accent #00474f vs --bg/#ffffff: 10.43:1 high-c --text #000000 vs --bg #ffffff: 21.00:1 (pure black/white) All clear the AA text minimum (4.5:1) with room to spare; dark and high-contrast clear AAA (7:1) too. Button/badge combinations (foreground --accent-text on background --accent) and UI-component pairs (bar-fill on bar, spell-text on spell-bg) were checked the same way and all clear 4.5:1 (text) or 3:1 (non-text UI/large text) -- full numbers in the branding workstream's report, not restated per-line here to keep this comment from ballooning. 2026-08-19 fix (EXECUTION_PLAN.md workstream 8 "Known issues"): the accessibility audit found --border, --spell-border (light+dark), and --warn-border (light only) failing WCAG 1.4.11's 3:1 non-text minimum. Each was adjusted along its existing hue (same accent family, darkened or lightened only as far as needed to clear 3:1 -- not redesigned): light --border #d3d8de -> #898c92 vs --bg 3.14:1, vs --surface 3.37:1 dark --border #333c46 -> #666c78 vs --bg 3.38:1, vs --surface 3.07:1 light --spell-border #9dd4b4 -> #679471 vs --spell-bg 3.05:1 dark --spell-border #2f6b47 -> #47835b vs --spell-bg 3.12:1 light --warn-border #d9a400 -> #b28600 vs --warn-bg 3.04:1 High-contrast variant already passed on every pair, untouched. Dark --warn-border already passed (5.74:1), untouched. */ :root { --bg: #f6f7f9; --surface: #ffffff; --text: #1b1f24; --muted: #5a636e; --border: #898c92; --accent: #0b6e79; --accent-text: #ffffff; --bar: #e3e7ec; --bar-fill: #0b6e79; --warn-bg: #fff4d6; --warn-border: #b28600; --error-bg: #fde8e8; --error-border: #c62828; --note-bg: #eef3fb; --danger: #a02020; --ok: #1a7f45; --spell-bg: #e4f4ea; --spell-border: #679471; --spell-text: #14663a; --radius: 8px; } @media (prefers-color-scheme: dark) { /* :not() makes this mutually exclusive with the high-contrast block below by selector alone (both target :root, similar specificity) -- a user whose OS is in dark mode AND has the future toggle's high-contrast flag set gets high-contrast, without relying on stylesheet order to decide. */ :root:not([data-contrast="high"]) { --bg: #14181d; --surface: #1c2127; --text: #e8ecf1; --muted: #a3adb9; --border: #666c78; --accent: #4fb8c4; --accent-text: #0b0e12; --bar: #2a323b; --bar-fill: #4fb8c4; --warn-bg: #3a3013; --warn-border: #d9a400; --error-bg: #40201f; --error-border: #e46a6a; --note-bg: #1e2733; --danger: #e46a6a; --ok: #59c98d; --spell-bg: #16311f; --spell-border: #47835b; --spell-text: #7fdaa7; } } /* High-contrast: a distinct third palette, not a compromise between the two above (BACKLOG.md: "a high-contrast palette variant... rather than folding contrast into the two existing palettes"). Near-max contrast on purpose -- pure black text on white, a darker/more saturated accent, no pastel-on-pastel semantic colors. Nothing sets data-contrast="high" yet; that is the toggle workstream's job, this is only the contract. */ :root[data-contrast="high"] { --bg: #ffffff; --surface: #ffffff; --text: #000000; --muted: #3f4750; --border: #4a5158; --accent: #00474f; --accent-text: #ffffff; --bar: #d0d5da; --bar-fill: #00474f; --warn-bg: #fff2cc; --warn-border: #8a6d00; --error-bg: #fbe4e1; --error-border: #b3261e; --note-bg: #eef1f4; --danger: #b3261e; --ok: #146c43; --spell-bg: #dff3e6; --spell-border: #146c43; --spell-text: #0b4a2e; --radius: 8px; }