:root{ /* dark mode (default) */ --background:#1A1A2E; --foreground:#F8F6F1; --card:#2D2D44; --card-2:#26263C; --primary:#C9A96E; --primary-foreground:#1A1A2E; --antique:#A88B5C; --badge-gold-fg:#C9A96E; --muted:#2D2D44; --muted-foreground:#A6ABB8; --faint:#7D8294; --border:rgba(248,246,241,.10); --border-strong:rgba(248,246,241,.16); --ring:#C9A96E; --radius:8px; --destructive:#DC3545; --success:#6FBF73; --danger-fg:rgb(240,166,172); --blush:#E8D4D0; --violet:#C9A0E0; --blue-fg:#9CD2FF; --media-bg:rgb(17,17,17); --glow:rgba(45,45,68,.50); --gold-tint:rgba(201,169,110,.16); --green-tint:rgba(111,191,115,.16); --red-tint:rgba(220,53,69,.18); color-scheme: dark; } :root[data-theme="light"]{ --background:#F8F6F1; --foreground:#1A1A2E; --card:#FFFFFF; --card-2:#F0EDE6; --antique:#A88B5C; --badge-gold-fg:#9A7B43; --muted:#F0EDE6; --muted-foreground:#6B7280; --faint:#9CA3AF; --border:#E8E4DC; --border-strong:#D8D2C6; --success:#2E7D32; --danger-fg:rgb(192,36,52); --violet:#8B5C9E; --blue-fg:#2E6FA8; --media-bg:#ECEAE4; --glow:rgba(201,169,110,.20); --gold-tint:rgba(201,169,110,.32); --green-tint:rgba(46,125,50,.12); --red-tint:rgba(220,53,69,.10); color-scheme: light; } *{ box-sizing:border-box; } /* Paint the app background on the ROOT too, not only . is only as tall as its content, so on a short page (an empty scout, a small form) the viewport area BELOW it fell through to the browser's own canvas — a grey band, because color-scheme:dark makes the UA canvas dark-grey. */ html{ background:var(--background); } body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; margin:0; min-height:100vh; background:var(--background); color:var(--foreground); -webkit-font-smoothing:antialiased; } a{ color:var(--primary); text-decoration:none; } a:hover{ color:var(--antique); } ::selection{ background:rgba(201,169,110,.3); } .wordmark{ font-family:Georgia,serif; font-weight:600; letter-spacing:.2px; } .wordmark .dot{ color:var(--primary); } .sub{ color:var(--muted-foreground); font-weight:400; font-family:'Inter',sans-serif; } input,select,textarea{ font-family:inherit; background:var(--card); color:var(--foreground); border:1px solid var(--border-strong); border-radius:6px; padding:7px 10px; font-size:13px; } /* The dropdown POPUP is a separate surface: it takes the platform default (white) while inheriting `color` from the select — which in the dark theme is a near-white --foreground. That is white text on a white background, on every page with a