/* ─────────────────────────────────────────────────────────────────────────── fonio-forecast — v2 theme overrides (new tokens only) ─────────────────────────────────────────────────────────────────────────── Phase A foundation. Legacy dark mode flips --bg, --surface, --ink-*, --line, --lilac-200/300 via `body.theme--dark` (see /tokens.css). That keeps working. This file adds dark-mode overrides for the NEW tokens introduced in v2's /src/styles/tokens.css. Trigger: `[data-theme="dark"]` attribute on . app.jsx sets BOTH `body.theme--dark` AND `html[data-theme="dark"]` so legacy and v2 selectors activate together. Phase E will migrate everything to `[data-theme]` and drop the body class. Spec: DESIGN.md §3a. ─────────────────────────────────────────────────────────────────────────── */ /* ─── Dark mode: conventional neutral-grey palette ────────────────────────── Phase C-2 overhaul. The earlier "branded violet" dark mode was unusable ("ancora illeggibile, basta che sia utilizzabile"). Per Marco's explicit instruction, dropping the lilac-tinted backgrounds in dark; using neutral greys typical of Linear/Vercel/GitHub-dark. Brand identity stays in the accent color only. Override scope: BOTH the legacy `body.theme--dark` selector (where the old /tokens.css scopes its dark mode — body element reads from there first) AND the v2 `:root[data-theme="dark"]` selector (for html-level tokens used by primitives at the html scope). Both selectors get the same values so the body's rendered colors and v2 token reads both flip to the new neutral palette. */ :root[data-theme="dark"], body.theme--dark { /* Surfaces — true neutral greys, NOT violet-tinted */ --bg: #0D0D12; --bg-2: #16161D; --surface: #16161D; --surface-elevated: #1C1C25; --surface-hover: #22222D; /* Text — clean white-ish on dark, conventional grey ramp */ --ink-1: #ECECEE; --ink-2: #B3B3B8; --ink-3: #7A7A85; /* Borders — visible but not loud */ --line: #2A2A35; --line-2: #3A3A48; --border: #2A2A35; --border-strong: #3A3A48; /* Accent — brand violet, brighter for legibility on dark */ --accent: #B79BFF; --accent-hover: #C7B5F0; --accent-soft: #2A2235; --accent-fg: #0D0D12; /* Legacy lilac variables that the old dark mode used for accent-bg etc. Map to neutral surfaces so any legacy CSS using them in dark stays sane. */ --lilac-200: #2A2235; --lilac-300: #5A3FD9; /* Status colors — keep the same hues, slight brightening for dark legibility. Matches DESIGN.md §3a recommended dark variants. */ --good: #3FB585; --warn: #E89B8C; --ae-500: #EFB04B; --proj: #6FBCDB; /* Status background tints — darker variants of the status hue for dark mode */ --success-bg: #1F3B2E; --warning-bg: #3A2A14; --danger-bg: #3A1F1A; --info-bg: #1A2F38; /* --ch-* channel colors stay theme-invariant (brand). Their underlying var(--lilac-700)/var(--proj)/var(--ae-500) tokens are bright enough on dark. */ }