/* tokens.css -- the single source of theme truth for MathScape. * * These three theme blocks are lifted verbatim from the lesson stylesheet * (render_lessons.py), where every value was contrast-checked to WCAG AA. The dashboard * loads this file BEFORE app.css/rpg.css/academic.css so every surface reads the same * theme-aware variables the lessons use. Switching switches the whole * product at once: warm-dark (default), cool-dark, light. * * Do not hard-code a color anywhere downstream. Add a token here and reference it. */ :root{ /* ---- warm-dark tokens (DEFAULT): warm charcoal, paper-at-night ---- */ --bg:#15120e; --surface-1:#1c1812; --surface-2:#241f17; --surface-3:#2e271d; --text:#e6dccb; /* warm off-white, AA 13.75 on bg */ --muted:#b3a892; /* AA 7.94 on bg */ --faint:#8a8068; /* AA 4.77 on bg */ --border:#2c261c; --border-strong:#3a3225; --teal:#5bb3a6; /* dimmed teal, AA 7.51 on bg */ --teal-soft:rgba(91,179,166,0.10); --teal-line:rgba(91,179,166,0.38); --amber:#d8a85a; /* dimmed amber, AA 8.60 on bg */ --amber-soft:rgba(216,168,90,0.10); --amber-line:rgba(216,168,90,0.40); --red:#e06a52; /* warm EWU red on dark, AA 5.65 on bg */ --red-soft:rgba(224,106,82,0.12); --gold:#d8b15a; /* AA 9.21 on bg */ --gold-soft:rgba(216,177,90,0.10); --gold-line:rgba(216,177,90,0.38); --altgray:#9bb5ad; /* warm gray-teal, AA 8.54 on bg */ --altgray-soft:rgba(155,181,173,0.09); --altgray-line:rgba(155,181,173,0.35); --green:#4f9d57; --maxw:760px; --radius:6px; --radius-sm:4px; --font-display:"Space Grotesk",system-ui,sans-serif; --font-body:"Source Serif 4","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; } /* ---- cool-dark tokens: the original near-black system ---- */ html[data-theme="cool-dark"]{ --bg:#0a0b0e; --surface-1:#101218; --surface-2:#181b22; --surface-3:#20242d; --text:#eceef3; --muted:#a4abb8; --faint:#777e8b; --border:#21242d; --border-strong:#2f343f; --teal:#2dd4c0; --teal-soft:rgba(45,212,192,0.12); --teal-line:rgba(45,212,192,0.40); --amber:#e6a93c; --amber-soft:rgba(230,169,60,0.12); --amber-line:rgba(230,169,60,0.40); --red:#ec3147; --red-soft:rgba(236,49,71,0.14); --gold:#d8b15a; --gold-soft:rgba(216,177,90,0.12); --gold-line:rgba(216,177,90,0.38); --altgray:#8fb0aa; --altgray-soft:rgba(143,176,170,0.10); --altgray-line:rgba(143,176,170,0.35); --green:#4f9d57; } /* ---- light tokens ---- */ html[data-theme="light"]{ --bg:#f5f6f8; --surface-1:#ffffff; --surface-2:#ffffff; --surface-3:#eef0f4; --text:#12151c; --muted:#525a68; --faint:#6b7280; --border:#d8dce3; --border-strong:#c6ccd6; --teal:#0c6b62; --teal-soft:rgba(13,148,136,0.10); --teal-line:rgba(13,148,136,0.42); --amber:#8a5e0c; --amber-soft:rgba(176,125,18,0.10); --amber-line:rgba(176,125,18,0.45); --red:#a10022; --red-soft:rgba(161,0,34,0.07); --gold:#856010; --gold-soft:rgba(154,116,20,0.10); --gold-line:rgba(154,116,20,0.40); --altgray:#36615b; --altgray-soft:rgba(63,111,104,0.07); --altgray-line:rgba(63,111,104,0.38); --green:#2f7d3a; } /* ---- dashboard alias layer (active) ---- * The dashboard CSS (app.css, academic.css, rpg.css) uses its own color names. They are * aliased here to the theme tokens above so one data-theme switch reswatches the whole * dashboard. app.css no longer defines these colors; this file is the single source. * The chrome names follow the theme (var indirection resolves at use-time); the * categorical encoding palette (c0..c5, purple) is held stable across themes so a course * keeps its color; --green is theme-aware (darker on light) because it also carries text. */ :root{ --bg2: var(--surface-1); --bg3: var(--surface-3); --text-dim: var(--muted); --accent: var(--teal); --orange: var(--amber); --purple: #8f6fb0; --c0: var(--teal); --c1: #5f79c0; --c2: #4f9d57; --c3: var(--amber); --c4: #8f6fb0; --c5: var(--red); --cX: var(--faint); /* Floating map chrome (legend, zoom controls, in-view chips). A theme-aware glass panel built off surface-1, so it reads light-on-light and dark-on-dark instead of being a hardcoded black box. color-mix keeps one definition that follows the theme. */ --chrome-bg: color-mix(in srgb, var(--surface-1) 86%, transparent); --chrome-border: var(--border-strong); --chrome-shadow: 0 6px 20px rgba(0,0,0,0.18); --chrome-blur: saturate(1.15) blur(10px); }