/* CSS custom properties — per-scheme defaults below. * * Why per-scheme blocks here in CSS (not just in theme.js's applyTheme): * The inline bootstrap stamps `data-scheme` on synchronously * before parses. The boot screen then renders BEFORE any deferred * script (including theme.js) executes. Without per-scheme CSS variable * overrides, the boot screen always renders with the :root defaults * regardless of which scheme the bootstrap chose — so a non-dark scheme * gets the dark BG color, dark border, etc. plus the per-scheme logo * filter from components.css → visible mismatch (e.g. amber-filtered * logo on a dark bg = the "BAD" state the user reported). * * With per-scheme blocks here, the CSS cascade applies the right colors * the instant data-scheme is set, no JS needed. theme.js's applyTheme() * still runs later and overrides via inline `style.setProperty` for any * user-customized color overrides (theme.{dark,light,steel,beige}Colors) * — inline styles win over these rules. */ :root { /* Default block — colors here are the DARK scheme. Kept on :root rather * than [data-scheme="dark"] so unstyled / pre-bootstrap renders also * land on dark (matches the historic behavior). * * 2026-05-27 contrast bump (customer-requested): lifted bg/surface/surface2 * so cards visibly separate from the page, brightened text2/text3 so * secondary + muted text is legible (the old text3 #4b5a7a was 4.0:1 against * the surface — too dim for small labels). Borders bumped to match. The * existing theme.js presets.dark MUST be kept in sync — see that file. */ --bg: #0f1320; --surface: #1a2236; --surface2: #232c44; --border: #2c3a5a; --border2: #3a4970; --accent: #3b82f6; --accent2: #60a5fa; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; /* Tinted backgrounds + borders for status badges. Low-alpha overlays of the * theme colors above. Avoid hardcoding rgba() in JS-generated HTML — use * these variables instead. */ --success-tint: rgba(34, 197, 94, .12); --success-tint-border: rgba(34, 197, 94, .35); --warning-tint: rgba(245, 158, 11, .12); --warning-tint-border: rgba(217, 119, 6, .35); --accent-tint: rgba(59, 130, 246, .12); --accent-tint-border: rgba(59, 130, 246, .35); --text: #edf1f7; --text2: #b4c0d2; --text3: #7a8aa3; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 20px; --sidebar-w: 240px; --font-head: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace; } /* Light scheme — color values mirror theme.js presets.light exactly so * the static CSS path and the JS applyTheme path agree on the boot * screen. */ [data-scheme="light"] { --bg: #f4f6fa; --surface: #ffffff; --surface2: #eef1f7; --border: #dde2ef; --border2: #c8d0e3; --accent: #2563eb; --accent2: #1d4ed8; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --text: #0f172a; --text2: #475569; --text3: #94a3b8; --success-tint: rgba(22, 163, 74, .10); --success-tint-border: rgba(22, 163, 74, .30); --warning-tint: rgba(217, 119, 6, .10); --warning-tint-border: rgba(217, 119, 6, .30); --accent-tint: rgba(37, 99, 235, .10); --accent-tint-border: rgba(37, 99, 235, .30); } /* Steel (battleship) scheme — mirrors theme.js presets.steel. * * 2026-05-27 lightened (customer-requested): previous steel was a heavy * mid-gray-blue that competed with the cards for visual weight; cards * (surface #d4dae3) barely lifted off the bg (#c8cfd8). New palette * shifts the whole scheme paler with a clear three-tier hierarchy: * bg (mid-light) < surface2 (slightly darker, inset / recessed) * bg (mid-light) < surface (clearly lighter, card surfaces) * Borders soften to match. Text + accents stay deep enough for * 7+:1 contrast on the new lighter surfaces. */ [data-scheme="steel"] { --bg: #dde3eb; --surface: #eef1f6; --surface2: #ced5de; --border: #b0bbc8; --border2: #97a4b3; --accent: #2e6da4; --accent2: #1a5276; --success: #1e8449; --warning: #b7770d; --danger: #c0392b; --text: #0f1a24; --text2: #3a4a5a; --text3: #6a7a8a; --success-tint: rgba(30, 132, 73, .12); --success-tint-border: rgba(30, 132, 73, .35); --warning-tint: rgba(183, 119, 13, .12); --warning-tint-border: rgba(183, 119, 13, .35); --accent-tint: rgba(46, 109, 164, .12); --accent-tint-border: rgba(46, 109, 164, .35); } /* Beige scheme — mirrors theme.js presets.beige. */ [data-scheme="beige"] { --bg: #f5f0e8; --surface: #fdf9f3; --surface2: #ede8de; --border: #d5cfc4; --border2: #c0b9ac; --accent: #8b6914; --accent2: #6b4f10; --success: #2e7d32; --warning: #c67c0a; --danger: #c62828; --text: #2c2416; --text2: #6b5d4a; --text3: #a09080; --success-tint: rgba(46, 125, 50, .12); --success-tint-border: rgba(46, 125, 50, .35); --warning-tint: rgba(198, 124, 10, .12); --warning-tint-border: rgba(198, 124, 10, .35); --accent-tint: rgba(139, 105, 20, .12); --accent-tint-border: rgba(139, 105, 20, .35); }