/* ============================================================ DigitalKiddo™ Maths — Dark Mode Theme ------------------------------------------------------------ Activated by the `dark-mode` class on , which assets/js/theme.js applies before first paint from the saved localStorage preference ('dk_dark_mode'). Almost everything is themed by remapping the CSS custom properties defined in style.css — components keep using the same tokens (--surface, --light, --dark, --gray-*) and pick up the dark palette automatically. The rules further down are the small set of exceptions: hard-coded colours (mostly the chat UI) and elements that must NOT invert (dark text on the yellow accent, the already-dark footer, etc.). To add another theme later: add a new class + a file like this one that remaps the same tokens. ============================================================ */ /* --- 1. Token remaps ---------------------------------------- */ html.dark-mode { color-scheme: dark; /* native controls, scrollbars */ --light: #131624; /* page background */ --surface: #1e2235; /* cards / panels / modals */ --surface-2: #181b2b; /* soft gradient partner */ --dark: #edf0fb; /* primary text (was near-black) */ --gray-50: #242940; --gray-100: #272c44; /* subtle fills, hover rows */ --gray-200: #363d5c; /* borders, dividers, switch tracks */ --gray-400: #7e88ad; --gray-600: #a9b2d0; /* muted / secondary text */ --shadow: 0 10px 40px rgba(0,0,0,0.45); --shadow-sm: 0 4px 16px rgba(0,0,0,0.35); --shadow-lg: 0 20px 60px rgba(0,0,0,0.55); } /* --- 2. Global fixes ---------------------------------------- */ /* Some pages set a decorative light gradient on in their own