/* tokens.css — the design tokens, and nothing else. * * Single source for every page (landing, guide, trainer). The consumer * stylesheets define layout and components but no palette of their own — * a color that appears in style.css/intro.css/landing.css instead of here * is a bug (see docs/decisions/0008). * * Theme model, three states: * 1. No choice made → the OS decides (dark base, light media query) * 2. data-theme="light" → light, regardless of OS * 3. data-theme="dark" → dark, regardless of OS (the :not() below is what * lets the base dark values win over an OS in * light mode) * js/theme.js sets the attribute; a no-flash snippet in each restores * the stored choice before first paint. * * Values are byte-identical to the pre-extraction style.css — phase 1 of the * landing redesign is a refactor with a pixel-identical bar, not a restyle. */ :root{ --bg:#0f1117; --panel:#171a23; --panel2:#1e222d; --line:#2a2f3d; --ink:#e8eaf0; --dim:#98a0b3; --accent:#e0533d; --accent2:#4a9eff; --good:#3ecf8e; --warn:#f5a623; --bad:#ff6b6b; --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--bg:#f6f7f9;--panel:#fff;--panel2:#f0f2f6;--line:#e0e4ec;--ink:#1a1d26;--dim:#666e80} } :root[data-theme="light"]{--bg:#f6f7f9;--panel:#fff;--panel2:#f0f2f6;--line:#e0e4ec;--ink:#1a1d26;--dim:#666e80} /* ---- landing-specific tokens (unused by trainer/guide styles) ---------- -deep variants exist because the light surfaces need darker text-accents than the shared brand values to stay readable; in dark they equal the base. Chart ramps are machine-validated (dataviz six-checks) per surface — rerun the validator before changing them (docs/landing-redesign.md has both). */ :root{ --card:#12151d; --line2:#3a4152; --mute:#5d6675; --accent-soft:rgba(224,83,61,.13); --accent-deep:#e0533d; --good-deep:#3ecf8e; --bad-deep:#ff6b6b; --hover:rgba(255,255,255,.06); --shadow1:rgba(0,0,0,.5); --shadow2:rgba(0,0,0,.6); --h0:#7C4237; --h1:#9E5242; --h2:#C0644D; --h3:#DE7757; --h4:#FA8B65; --cell:rgba(255,255,255,.04); --shimmer:rgba(255,255,255,.05); --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --card:#ffffff; --line2:#cdd4e0; --mute:#8a93a4; --accent-soft:rgba(201,68,48,.09); --accent-deep:#c94430; --good-deep:#157a4f; --bad-deep:#b23325; --hover:rgba(20,30,50,.06); --shadow1:rgba(25,35,55,.14); --shadow2:rgba(25,35,55,.2); --h0:#E5A183; --h1:#D27A5B; --h2:#B6583C; --h3:#914028; --h4:#672C1B; --cell:#eef1f5; --shimmer:rgba(20,30,50,.05); } } :root[data-theme="light"]{ --card:#ffffff; --line2:#cdd4e0; --mute:#8a93a4; --accent-soft:rgba(201,68,48,.09); --accent-deep:#c94430; --good-deep:#157a4f; --bad-deep:#b23325; --hover:rgba(20,30,50,.06); --shadow1:rgba(25,35,55,.14); --shadow2:rgba(25,35,55,.2); --h0:#E5A183; --h1:#D27A5B; --h2:#B6583C; --h3:#914028; --h4:#672C1B; --cell:#eef1f5; --shimmer:rgba(20,30,50,.05); } /* Translucent state tints for right/wrong feedback surfaces. */ :root{ --good-tint:rgba(62,207,142,.08); --bad-tint:rgba(255,107,107,.08) } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --good-tint:rgba(21,122,79,.08); --bad-tint:rgba(178,51,37,.08) } } :root[data-theme="light"]{ --good-tint:rgba(21,122,79,.08); --bad-tint:rgba(178,51,37,.08) }