/* Design tokens for every page. * * Four declarations of the same palette, in priority order: the dark default, * the light variant for anyone whose OS asks for it, then the two explicit * [data-theme] overrides so the in-page toggle beats the OS preference in both * directions. Pages apply the saved theme before first paint (see the inline * script in each ) so a light-theme visitor never sees a dark flash. * * Only what is genuinely identical everywhere lives here. `body` differs * between the app pages and the help pages (different measure, line height and * background), so it stays with each page. */ :root { --ground: #0b0e11; --panel: #141a20; --panel-2: #1c242c; --raise: #222c35; --ink: #e7edf2; --muted: #8a97a3; --faint: #5c6a75; --line: #263038; --line-soft: #1b232a; --accent: #f2b23a; --accent-ink: #1a1204; --accent-quiet: #3a2e12; --good: #46b16a; --bad: #d9645a; --shadow: 0 1px 0 rgba(255,255,255,.03), 0 12px 30px -12px rgba(0,0,0,.7); --radius: 10px; --asp-command: #3fa34d; --asp-vigilance: #3182d6; --asp-aggression: #d9483b; --asp-cunning: #e8b53a; --asp-heroism: #e6d59a; --asp-villainy: #6b7178; } @media (prefers-color-scheme: light) { :root { --ground: #eef1f4; --panel: #ffffff; --panel-2: #f4f6f8; --raise: #e9edf1; --ink: #131a20; --muted: #5a6772; --faint: #8a97a1; --line: #d7dee4; --line-soft: #e5eaee; --accent: #b9781a; --accent-ink: #fff6e6; --accent-quiet: #f3e2c0; --shadow: 0 1px 0 rgba(255,255,255,.6), 0 12px 28px -14px rgba(20,30,40,.35); } } :root[data-theme="dark"] { --ground: #0b0e11; --panel: #141a20; --panel-2: #1c242c; --raise: #222c35; --ink: #e7edf2; --muted: #8a97a3; --faint: #5c6a75; --line: #263038; --line-soft: #1b232a; --accent: #f2b23a; --accent-ink: #1a1204; --accent-quiet: #3a2e12; --shadow: 0 1px 0 rgba(255,255,255,.03), 0 12px 30px -12px rgba(0,0,0,.7); } :root[data-theme="light"] { --ground: #eef1f4; --panel: #ffffff; --panel-2: #f4f6f8; --raise: #e9edf1; --ink: #131a20; --muted: #5a6772; --faint: #8a97a1; --line: #d7dee4; --line-soft: #e5eaee; --accent: #b9781a; --accent-ink: #fff6e6; --accent-quiet: #f3e2c0; --shadow: 0 1px 0 rgba(255,255,255,.6), 0 12px 28px -14px rgba(20,30,40,.35); } * { box-sizing: border-box; }