@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/Inter/InterVariable.woff2") format("woff2");} @font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/Inter/InterVariable-Italic.woff2") format("woff2");} *, *::before, *::after{box-sizing:border-box;margin:0;padding:0;} html, body{font-family:'Inter';background:var(--bg);color:var(--text);min-height:100%;} body.gs-mkt :where(h1,h2,h3,h4,h5,h6), body.gs-portal :where(h1,h2,h3,h4,h5,h6){line-height:1.25;} h1,h2,h3,h4,h5,h6{font-family:inherit;} .ui-widget,.ui-widget button,.ui-widget input,.ui-widget select,.ui-widget textarea{font-family:inherit;} body.gs-portal, body.gs-mkt{padding-left:0;padding-right:0;} :root{ --nav-bg:#0f1117; --nav-bg-darker:#0f1117; --accent:#D00000; --accent-soft:#e85a5a; --accent-bg:#fceaea; --accent-deep:#a31919; --slate:#D00000; --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; --bg-elev:#ffffff; --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 data-theme="dark" on ; overrides root vars plus a few selector rules where light theme hard-codes colours. */ html[data-theme="dark"]{ color-scheme: dark; --text:#f1f5f9; --text-mute:#cbd5e1; --text-light:#94a3b8; --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