*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;} html, body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100%;} :root{ --nav-bg:#0f1117; --nav-bg-darker:#0f1117; --accent:#D00000; --accent-soft:#e85a5a; --accent-bg:#fceaea; --accent-deep:#a31919; /* darker brand red used on banners and panels */ --slate:#D00000; /* banner background - bright brand red */ --slate-soft:#bb1f1f; --text:#1a1a1a; --text-mute:#6b7280; --text-light:#9ca3af; --line:rgba(0,0,0,0.08); --bg:#f5f4f2; --bg-card:#ffffff; /* Lower-level surface colors. Light theme: cool white + warm grey. These get overridden by the dark theme below. */ --bg-soft:#fafaf9; /* slightly off-white - used for hover, table headers */ --bg-elev:#ffffff; /* elevated surfaces - cards, modals */ --bg-popover:#ffffff; --line-strong:rgba(0,0,0,0.18); --shadow-card:0 1px 3px rgba(0,0,0,0.04); --shadow-modal:0 20px 60px rgba(0,0,0,0.18), 0 6px 20px rgba(0,0,0,0.08); --shadow-popover:0 10px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06); --chart-grid:rgba(0,0,0,0.05); --chart-tick:#6b7280; --hover-bg:#fafaf9; --bg-input:#ffffff; --bg-input-soft:#fafaf9; } /* ============================================================ DARK THEME Activated by setting data-theme="dark" on . We override the root variables and add a small number of selector-specific rules where light-theme styles use hard-coded colours that don't read well inverted. Palette principles: - Background: deep slate (#0f172a), not pure black. - Card / elevated surface: one step lighter (#1e293b). - Brand red stays exactly the same - visual identity is preserved across themes. - Text: off-white (#e2e8f0) for readability without harsh contrast. - Borders: low-opacity white so they read on slate without being garish. ============================================================ */ html[data-theme="dark"]{ color-scheme: dark; --text:#f1f5f9; /* slate-100 - high-contrast but not harsh white */ --text-mute:#cbd5e1; /* slate-300 - clearly secondary, still legible */ --text-light:#94a3b8; /* slate-400 - tertiary info; previously too dim */ --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.16); --bg:#0f172a; --bg-card:#1e293b; --bg-soft:#1a2536; --bg-elev:#1e293b; --bg-popover:#243144; /* Brand red toned down for dark mode - same hue family but less saturated and slightly deeper, so banners read as a focused accent rather than a neon assault. Light mode is unchanged. */ --slate:#a31919; --slate-soft:#8a1515; --accent:#cc2222; /* keep the active-state red bright so toggles still pop */ --accent-bg:rgba(204,34,34,0.12); --shadow-card:0 1px 3px rgba(0,0,0,0.4); --shadow-modal:0 20px 60px rgba(0,0,0,0.6), 0 6px 20px rgba(0,0,0,0.4); --shadow-popover:0 10px 30px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3); --chart-grid:rgba(255,255,255,0.06); --chart-tick:#cbd5e1; --hover-bg:#243144; --bg-input:#0f172a; --bg-input-soft:#1a2536; } html[data-theme="dark"] body{background:var(--bg);color:var(--text);} /* Cards + elevated surfaces */ html[data-theme="dark"] .card, html[data-theme="dark"] .modal-card, html[data-theme="dark"] .lo-card{background:var(--bg-elev);border-color:var(--line);box-shadow:var(--shadow-card);} html[data-theme="dark"] .modal-card{box-shadow:var(--shadow-modal);} /* Modal body default text colour - the light-theme rule hard-codes #374151 which reads as near-black on the dark modal card. Switch to the themed text colour so anything that hasn't explicitly set its own color inherits something readable. */ html[data-theme="dark"] .modal-body{color:var(--text);} /* ...but the legacy stylesheet ALSO has `p, a, li { color:#0f1117 }`, which hard-sets those elements directly (so they don't inherit the line above) and they read as near-black on the dark card — e.g. the AI "Generate document" dialog's labels. Re-theme them. color-scheme:dark also makes the dialog's native