/* The one palette, for the pages that live outside the SPA bundle. * * login.html, setup.html and accept-invite.html are served as literal files by * Flask — they never go through Vite, so they cannot import * frontend/src/styles/variables.css. Each of them used to declare its own * :root block, and all three had drifted onto an older, dark-only scheme: a * near-black navy background and a mint green, against the app's #0a0a0a and * #00c951. Signing in therefore looked like a different product from the one * you landed in, and none of the three had a light mode at all. * * The token *values* here are copied from variables.css, and * tests/unit/test_palette_sync.py fails if the two ever disagree — a copy is * only safe while something checks it. * * Theme selection is , set before paint by the * inline script in each page (the same one frontend/index.html uses), so these * pages follow the OS and the stored preference exactly as the app does. */ :root { --bg: #0a0a0a; --bg-card: #121212; --bg-input: #181818; --ink: #ffffff; --ink-2: #c8ced2; --ink-3: #8e99a1; --border: #26282a; --border-strong: #3b3b3b; --green: #00c951; --green-bg: rgba(0, 201, 81, 0.12); --red: #ff4d5e; --red-bg: rgba(255, 77, 94, 0.12); --sans: "DM Sans", "Inter", system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace; } :root[data-theme="light"] { --bg: #f8f8f8; --bg-card: #ffffff; --bg-input: #ffffff; --ink: #0a0a0a; --ink-2: #2b2b2b; --ink-3: #424242; --border: #d4d4d4; --border-strong: #b5b5b5; --green-bg: rgba(0, 201, 81, 0.14); --red-bg: rgba(255, 77, 94, 0.12); } /* Names the three auth pages already use, mapped onto the app's tokens rather * than renamed at every call site. Keeping the aliases means those pages stay * diffable against the versions that shipped, and a reader comparing them to * the app sees one indirection instead of a second vocabulary. */ :root { --surface: var(--bg-card); --text: var(--ink); --muted: var(--ink-3); --green-dim: var(--green-bg); --red-dim: var(--red-bg); --focus-border: var(--border-strong); /* The tint behind an error message. Was a raw rgba(239,68,68,.2) that matched no other red in the app. */ --error-border: var(--red-bg); --ok-border: var(--green-bg); /* Text on a filled green button: always the dark ink, in both themes, because the button's own background is the brand green in both. */ --on-green: #0a0a0a; --radius: 10px; }