/* ============================================================ Theme overrides — light / dark / system The app's base theme (in index-*.css :root) is DARK. We keep dark as the default and add a LIGHT palette that is applied when is set by the pre-paint script in index.html. "system" resolves to light/dark via prefers-color-scheme. ============================================================ */ /* Light palette — overrides the dark :root variables */ html[data-theme="light"] { --bg: #f4f6fb; --bg2: #ffffff; --bg3: #eef1f7; --surface: #ffffff; --surface2: #f0f3f9; --accent: #2f6fe0; --accent2: #7c5cfc; --accent3: #16b894; --accent4: #ef8b3c; --text: #16203a; --text2: #566480; --text3: #8a98b3; --border: rgba(47, 111, 224, 0.18); --border2: rgba(20, 30, 60, 0.10); --success: #16b894; --warn: #d99c1f; --danger: #e0533f; } /* Light-mode scrollbar reads better with a muted thumb */ html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c7d0e0; } /* Smooth transition when switching themes (skipped on first paint) */ html.theme-ready, html.theme-ready body, html.theme-ready .topbar, html.theme-ready .auth-card, html.theme-ready .auth-input { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* Theme toggle button injected into the topbar */ #theme-toggle { display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); width: 22px; height: 22px; border: none; background: none; padding: 0; transition: color 0.18s ease, transform 0.18s ease; } #theme-toggle:hover { color: var(--accent); transform: scale(1.08); } #theme-toggle svg { width: 20px; height: 20px; }