/* Web dark-mode recipe — plan §11.4. * * ⚠ TEMPORARY MIRROR — single-source-of-truth debt, tracked by * www_saphirion_com_value_intelligence_hugo-gzl. * * The SDS owns the dark recipe (dist/tokens.css → "Deck dark theme" block), but it is * keyed to `[data-sph-theme="dark"] .sph-slide…` (deck stage + a .sph-slide ancestor), * which the web has neither of. So the web re-applies the SAME role-token re-bindings * at :root. The values below are copied verbatim from dist/tokens.css and must be * re-synced on every SDS dark change until the SDS factors a deck-decoupled recipe * (plan §11.4 → bead gzl). Do NOT edit the values to diverge from the SDS. * * TRIGGER: the resolved theme is carried by `data-theme` on , set by a no-flash * inline script in baseof.html (stored preference → OS prefers-color-scheme) and * flipped by the header toggle. This file keys on `:root[data-theme="dark"]`. Without * JS, data-theme is never set and the site stays light (a fully functional fallback). * * Mechanism: base.css sets `body { background: var(--sph-bg); color: var(--sph-text) }` * and components read role tokens, so re-binding the tokens here flips the whole page. * Unlayered (like tokens.css), so it wins over the light :root defaults in source order. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --sph-white: #2A2F32; /* card/panel white → elevated charcoal */ --sph-surface: #2A2F32; --sph-surface-2: #333A3D; --sph-bg: var(--sph-bg-charcoal); --sph-bg-subtle: #272D30; --sph-bg-muted: #333A3D; --sph-bg-callout: #2E3437; --sph-border: rgba(221, 220, 197, .18); /* Ink */ --sph-dark: #F4F2E9; --sph-ink: #F4F2E9; --sph-text: #F4F2E9; --sph-text-soft: #EFEADC; --sph-text-muted: var(--sph-loafer); /* Accents used as text — brightness-lifted, hue kept (WCAG-checked in the SDS). Named brand tokens stay untouched; only the role aliases re-bind. */ --sph-info: #E8917C; /* Lonestar lifted */ --sph-accent-earth: #E09B61; /* Korma lifted */ --sph-accent-slate: #93A9BA; /* San Juan lifted */ --sph-accent-emerald: #6BBC8F; /* Amazon lifted */ --sph-accent-burgundy: #E68FA6; /* Burgundy lifted */ --sph-accent-navy: #9CA7E8; /* Navy lifted */ --sph-primary-deep: var(--sph-camel); --sph-text-accent: #C7A272; /* Donkey Brown lifted */ --sph-focus: #C7A272; /* focus ring, lifted */ --sph-chevron: var(--sph-chevron-paper); /* Chart structural colors + chrome mark */ --sph-chart-ink: #F4F2E9; --sph-chart-muted: var(--sph-loafer); --sph-chart-grid: rgba(221, 220, 197, .28); --sph-chart-band: rgba(221, 220, 197, .14); --sph-mark-filter: invert(1); } /* Card-axes carriers (tokens.css) — tint/line mixes get their charcoal recipe. */ :root[data-theme="dark"] .sph-card-cream { --sph-card-tone-tint: color-mix(in srgb, var(--sph-card-tone) 16%, var(--sph-surface)); --sph-card-tone-line: color-mix(in srgb, var(--sph-card-tone) 30%, var(--sph-surface)); } /* Authored-palette islands — components that carry their own contrast and must look identical in both themes (inverted/metric/banded cards, step numbers, pipeline stages, the metric-band, pills, buttons, the DATA2VALUE process chain). Every token the flip re-bound is pinned back to its authored value; custom properties inherit, so these element-level pins win over the :root flip. */ :root[data-theme="dark"] :is(.sph-card-cream--invert, .sph-card--metric, .sph-card-banded__head, .sph-card-cream__tab, .sph-card-cream__rail, .sph-step__num, .sph-pipeline__stage, .sph-metric-band, .sph-pill, .sph-btn, .sph-process-chain) { --sph-white: #FFFFFF; --sph-surface: #FFFFFF; --sph-surface-2: #FBFAF4; --sph-bg-callout: #ECEAD6; --sph-border: #DBD9C9; --sph-dark: var(--sph-dark-jungle-green); --sph-ink: var(--sph-dark-jungle-green); --sph-text: var(--sph-dark-jungle-green); --sph-text-soft: #4A524C; --sph-text-muted: var(--sph-smoke); --sph-info: var(--sph-lonestar); --sph-accent-earth: var(--sph-korma); --sph-accent-slate: var(--sph-san-juan); --sph-accent-emerald: var(--sph-amazon); --sph-accent-burgundy: var(--sph-burgundy); --sph-accent-navy: var(--sph-navy); --sph-primary-deep: var(--sph-donkey-brown-deep); --sph-text-accent: var(--sph-donkey-brown-ink); --sph-chevron: var(--sph-chevron-ink); } /* Compiled DeckLang chart SVGs (deckweb) — the generator emits RAW palette vars with light-stage fallbacks (smoke = axis/source text, loafer = gridlines, dark-jungle-green = title/legend/baseline ink, donkey-brown/san-juan/burgundy/amazon = series tones), so charts stay light-stage-colored in dark mode. Scoped re-bind to the dark chart recipe above; custom properties inherit, so this wins inside the SVG only. Tone values mirror the lifted text accents (WCAG-checked in the SDS); literals where a var() would resolve against a re-bound name inside this scope (loafer/smoke). ⚠ Same TEMPORARY-MIRROR debt class as this file's header: the proper fix is deckweb emitting semantic chart tokens (--sph-chart-ink/muted/grid + lifted tone roles) in web render mode — SDS-side. Re-sync on every SDS dark change until then. */ :root[data-theme="dark"] .sph-chart__svg { --sph-dark-jungle-green: var(--sph-chart-ink); /* title, legend, axis baseline */ --sph-smoke: #DDDCC5; /* axis + source text → Loafer (mirrors --sph-text-muted) */ --sph-loafer: rgba(221, 220, 197, .28); /* gridlines (mirrors --sph-chart-grid) */ --sph-donkey-brown: #C7A272; /* primary tone, lifted */ --sph-san-juan: #93A9BA; /* slate tone, lifted */ --sph-burgundy: #E68FA6; /* burgundy tone, lifted */ --sph-amazon: #6BBC8F; /* emerald tone, lifted */ }