/* ============================================================ * Alpha FPL — Light mode token addendum. * * Net-new tokens for the light theme. Consumes (does not replace) * static/css/tokens.css. Two additions: * * 1. Surface + hairline + hero accent tokens for light mode. * 2. A theme remap block that flips the semantic --app-* and * --text-* aliases based on [data-theme] on . * * Default theme is light (set by the pre-paint script in base.html). * Dark is opt-in. The toggle persists to localStorage['alpha-theme']. * * Spec: docs/superpowers/specs/2026-05-16-light-mode-default-experience-design.md * ============================================================ */ :root { /* ---------- Light app surfaces (net-new) ---------- */ --paper-cool: #F4F7FB; --paper-cool-raised: #FFFFFF; --paper-cool-sunk: #ECF1F7; /* ---------- Light hairline borders (net-new) ---------- */ --hairline-1: #E2E8F0; --hairline-2: #CBD5E1; --hairline-3: #F1F5F9; /* ---------- Light hero accents (net-new) ---------- */ --hero-edge: #0E9BB8; --hero-edge-soft: rgba(14, 155, 184, 0.45); --hero-edge-faint: rgba(14, 155, 184, 0.20); --hero-edge-tint: rgba(14, 155, 184, 0.06); --hero-edge-pulse: rgba(14, 155, 184, 0.18); --hero-focal: #B45309; --hero-focal-soft: rgba(180, 83, 9, 0.55); --hero-focal-tint: rgba(245, 158, 11, 0.10); --hero-focal-pulse: rgba(245, 158, 11, 0.22); --hero-node-fill: #FFFFFF; --hero-node-stroke: #94A3B8; --hero-bg-light-1: #FAFBFD; --hero-bg-light-2: #EEF2F8; --hero-bg-light-3: #F7E9D7; --hero-dot-grid: rgba(15, 42, 64, 0.06); /* ---------- Accent ink (net-new 2026-08-25) ---------- Brand green as TEXT on a light ground. --green (#12E665) and --green-deep (#0A8F3F) are both too light to read small: green-deep is 4.19:1 on white, under the 4.5:1 AA floor, and the kickers that carry this colour are 11px. #047A35 is 5.47:1 on white and 5.2:1 on paper-soft. It already existed here as --pill-pos-fg; it is named now because it is the accent, not a pill detail. Chart fills and dots keep --green: those are not text. */ --green-ink: #047A35; /* ---------- Light status pill tints (net-new) ---------- */ --pill-pos-bg: rgba(18, 230, 101, 0.14); --pill-pos-fg: var(--green-ink); --pill-pos-dot: var(--green); --pill-neg-bg: rgba(255, 71, 87, 0.12); --pill-neg-fg: #C92A39; --pill-neg-dot: var(--coral); --pill-amb-bg: rgba(245, 158, 11, 0.14); --pill-amb-fg: #92520A; --pill-amb-dot: var(--amber); --pill-cya-bg: rgba( 34, 211, 238, 0.12); --pill-cya-fg: #0E7C90; --pill-cya-dot: var(--cyan); /* ---------- Light chart palette (net-new) ---------- */ --chart-pos: #0AAE4A; --chart-neg: #E0394A; --chart-amb: #D58708; --chart-axis: var(--hairline-2); --chart-grid: var(--hairline-3); --chart-baseline: var(--ink-5); } /* ============================================================ * Semantic alias remap. App code reads from these aliases — * not from --navy-app or --mute-1 directly — so a single * attribute swap on swings the app between themes. * ============================================================ */ :root, :root[data-theme="dark"] { --app-bg: var(--navy-app); --app-raised: var(--navy-app-raised); --app-sunk: #060A12; --app-hairline: var(--mute-5); --text-1: var(--mute-1); --text-2: var(--mute-2); --text-3: var(--mute-3); --text-4: var(--mute-4); --pos: var(--green); --neg: var(--coral); --amb: var(--amber); /* Links, kickers, tabs and hover borders read from --accent. On dark the full-strength green carries; the ink variant is a light-ground fix. */ --accent: var(--green); --cya: var(--accent); /* back-compat: templates still say var(--cya) */ } :root[data-theme="light"] { /* Ground was --paper-cool #F4F7FB, which is not in tokens.css and read grey across 89% of the public pages (owner review 2026-08-25). --paper-soft is the design system's own secondary surface; cards stay --paper white, so they still separate from it. */ --app-bg: var(--paper-soft); --app-raised: var(--paper-cool-raised); --app-sunk: var(--hairline-3); --app-hairline: var(--hairline-1); --text-1: var(--ink-1); --text-2: var(--ink-2); --text-3: var(--ink-3); --text-4: var(--ink-4); --pos: var(--chart-pos); --neg: var(--chart-neg); --amb: var(--chart-amb); /* Was #0E7C90, a teal. tokens.css marks cyan splash-only and never a semantic role, yet every kicker, link and tab on the public site was painted with it — so the accent colour of an FPL research site was cyan, not the brand green. */ --accent: var(--green-ink); --cya: var(--accent); } /* ============================================================ * Dark-theme remap for the status pill tints (added 2026-08-24). * The pill tokens above were drawn for light surfaces only; on * dark the darkened -fg text colours went murky (review finding). * On dark the foregrounds fall back to the base status colours, * which are the dark-side palette already. Tinted backgrounds * are translucent and survive both grounds unchanged. * ============================================================ */ :root[data-theme="dark"] { --pill-pos-fg: var(--green); --pill-neg-fg: var(--coral); --pill-amb-fg: var(--amber); --pill-cya-fg: var(--cyan); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --pill-pos-fg: var(--green); --pill-neg-fg: var(--coral); --pill-amb-fg: var(--amber); --pill-cya-fg: var(--cyan); } }