/* Critical theme CSS — the ONLY stylesheet that must never depend on JS bundle load / client routing. Structural fix (2026-07-18) for the theme flash: this app is full SPA-fallback (svelte.config.js `prerender: { entries: [] }`), so the shipped index.html has no per-route CSS link at all — everything Vite-bundles (app.css and friends) loads only after the JS bundle boots. A pre-paint inline script (app.html) can stamp `data-theme` on before first paint, but that stamp is inert until a stylesheet defining what data-theme MEANS is already present — so the real fix is this file: a genuinely static asset (web/static/, not Vite-processed, no content hash, fixed path), linked directly and synchronously in app.html BEFORE any script runs. Moved here from app.css, not duplicated — this is the single canonical home for these three blocks; app.css no longer defines them. Scope discipline: only the base reset + :root tokens + [data-theme] overrides live here — the values that determine "does the page look default-light or account-dark," which is the one class of flash that reads as visibly wrong (a full page color inversion mid-paint). Everything else (buttons, layout, component rules) stays in the normal Vite-bundled app.css; those loading a beat later is unremarkable UI polish, not a theme-correctness flash. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { scrollbar-gutter: stable; color-scheme: light; /* Colour tokens */ --bg: #faf7f2; --surface: #ffffff; --nav-bg: #18160f; --nav-text: #f0e8dc; --primary: #b5641b; --primary-dark: #8f4d13; --accent: #2d6a4f; --gold: #c9a11a; --danger: #b91c1c; --text: #1c1a16; --text-muted: #8a7f72; --border: #e8e1d6; --radius: 10px; --shadow: 0 1px 3px rgba(28,26,18,.07), 0 4px 16px rgba(28,26,18,.06); --shadow-sm: 0 1px 2px rgba(28,26,18,.08); /* Typography */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } /* Explicit "Light" choice — the app's ORIGINAL indigo-violet palette (its identity before the base :root above was unified to match the website), restored as a real, distinct option rather than a synonym for "no preference." Only rendered on the website when the synced account value is literally "Light", not the default state. */ :root[data-theme="light"] { color-scheme: light; --bg: #fbf8ff; --surface: #ffffff; --nav-bg: #efedf4; --nav-text: #2a2740; --primary: #4f5599; --primary-dark: #3c4180; --accent: #386a3a; --gold: #8a6d1a; --danger: #b3261e; --text: #1c1b2e; --text-muted: #5a5870; --border: #e3e0ec; --radius: 14px; --shadow: 0 1px 2px rgba(28,27,46,0.06), 0 4px 16px rgba(28,27,46,0.07); --shadow-sm: 0 1px 2px rgba(28,27,46,0.06); } :root[data-theme="dark"] { color-scheme: dark; --bg: #1a1712; --surface: #24201a; --nav-bg: #0e0c09; --nav-text: #f0e8dc; --primary: #d98a3d; --primary-dark: #e8a35e; --accent: #4f9a76; --gold: #d9b93f; --danger: #e05a5a; --text: #f0ece4; --text-muted: #a89e8f; --border: #3a352c; --shadow: 0 1px 3px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.30); --shadow-sm: 0 1px 2px rgba(0,0,0,.30); }