/* ============================================================ CENTCOM THEME SYSTEM — dark (default) + light, token-driven. Dark token values = the exact pre-existing hardcoded colors, so dark mode renders identically. Light is an opt-in override. Toggle sets (default = dark). ============================================================ */ :root, :root[data-theme="dark"] { /* surfaces */ --c-bg: #0f1120; /* app background */ --c-surface: #111827; /* panels / cards */ --c-surface-2: #0f172a; /* sunken: charts, inputs */ --c-surface-3: #1e293b; /* raised chip / assistant bubble */ --c-user-bubble: #164e63; /* chat user bubble */ /* borders */ --c-border: #1e293b; --c-border-2: #334155; /* stronger / hover */ --c-divider: rgba(30,41,59,0.3); /* faint row dividers */ --c-row-hover: rgba(30,41,59,0.5); /* row hover bg */ --c-hairline: rgba(255,255,255,0.06); /* faint white-alpha border/bg -> theme-aware */ --c-hairline-2: rgba(255,255,255,0.12); --c-zebra: rgba(255,255,255,0.022); /* table zebra striping */ /* text */ --c-text: #f1f5f9; /* headings / values */ --c-text-2: #e2e8f0; /* body */ --c-text-3: #cbd5e1; /* secondary body */ --c-text-muted: #94a3b8; /* labels */ --c-text-faint: #64748b; /* meta */ --c-text-faintest:#475569; /* timestamps / empty */ /* accents + state */ --c-accent: #06b6d4; /* cyan primary */ --c-accent-2: #22d3ee; /* cyan hover */ --c-on-accent: #0f172a; /* text on accent fill */ --c-success: #22c55e; --c-warning: #f59e0b; --c-danger: #ef4444; /* extended palette (dark values = exact pre-existing colors so dark is identical) */ --c-amber2: #fbbf24; --c-blue: #3b82f6; --c-red2: #ff4444; --c-green2: #4ade80; --c-indigo: #818cf8; --c-text-soft: #c8ccd4; --c-surface-warm:#2a2d34; --c-surface-4: #2d3a4a; --c-bg-deep: #0a0f1a; /* effects — dot box-shadows (renamed to avoid colliding with shared.css --glow-* colors) */ --c-accent-glow: rgba(6,182,212,0.15); --dot-glow-red: 0 0 6px rgba(239,68,68,0.4); --dot-glow-amber: 0 0 6px rgba(245,158,11,0.4); --dot-glow-green: 0 0 6px rgba(34,197,94,0.4); --shadow-card: none; /* typography */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Share Tech Mono', ui-monospace, 'SF Mono', monospace; --font-display: 'Inter', system-ui, sans-serif; } :root[data-theme="light"] { /* surfaces */ --c-bg: #f4f6f9; --c-surface: #ffffff; --c-surface-2: #eef1f5; --c-surface-3: #e7ebf1; --c-user-bubble: #cffafe; /* borders */ --c-border: #e2e8f0; --c-border-2: #cbd5e1; --c-divider: rgba(203,213,225,0.55); --c-row-hover: rgba(15,23,42,0.04); --c-hairline: rgba(15,23,42,0.10); --c-hairline-2: rgba(15,23,42,0.16); --c-zebra: rgba(15,23,42,0.025); /* text */ --c-text: #0f172a; --c-text-2: #1e293b; --c-text-3: #334155; --c-text-muted: #475569; --c-text-faint: #64748b; --c-text-faintest:#94a3b8; /* accents + state (slightly deepened for contrast on white) */ --c-accent: #0e7490; --c-accent-2: #0891b2; --c-on-accent: #ffffff; --c-success: #16a34a; --c-warning: #d97706; --c-danger: #dc2626; /* extended palette — light values */ --c-amber2: #d97706; --c-blue: #2563eb; --c-red2: #dc2626; --c-green2: #16a34a; --c-indigo: #4f46e5; --c-text-soft: #334155; --c-surface-warm:#eef1f5; --c-surface-4: #e7ebf1; --c-bg-deep: #f4f6f9; /* effects — neon glows OFF in light, soft shadows instead */ --c-accent-glow: rgba(14,116,144,0.12); --dot-glow-red: none; --dot-glow-amber: none; --dot-glow-green: none; --shadow-card: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04); /* ---- light values for the EXISTING shared.css cyberpunk tokens ---- (so the ~450 rules already using these flip to light automatically) */ --glow-green: #16a34a; --glow-cyan: #0e7490; --glow-magenta:#c026d3; --glow-amber: #d97706; --glow-red: #dc2626; --glow-purple: #9333ea; --glow-blue: #2563eb; --glow-pink: #db2777; --bg-base: #f4f6f9; --bg-card: #ffffff; --bg-card-solid:#ffffff; --border-main: rgba(15,23,42,0.10); --border-glow: rgba(14,116,144,0.30); --text-body: #0f172a; /* values -> near-black (primary). teal stays on links/accents via --glow-cyan */ --text-dim: #64748b; } /* user-bubble text needs to flip in light mode (cyan-900 fill -> light fill) */ :root[data-theme="light"] .sr-chat-bubble.user { color: #0f172a; } /* ---- Global font + light-mode bridges ---- */ /* Inter as the inherited UI font in BOTH themes (mono/Chakra stay where set explicitly) */ body { font-family: var(--font-ui); } /* Light mode: the sidebar stays dark (premium dark-rail look); only content flips. Fix the few hardcoded globals that would break on a light canvas. */ :root[data-theme="light"] body { color: var(--c-text-2); } :root[data-theme="light"] body::before, :root[data-theme="light"] body::after { display: none; } /* kill grid overlay + neon radial glow */ :root[data-theme="light"] a:hover { color: var(--c-accent-2); } /* --- Theme toggle button (lives in the always-dark sidebar -> fixed dark colors) --- */ .theme-toggle { display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.45rem 0.6rem; margin-bottom: 0.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: #c8c8d8; cursor: pointer; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; transition: border-color 0.15s, color 0.15s, background 0.15s; } .theme-toggle:hover { border-color: #00d4ff; color: #fff; background: rgba(255,255,255,0.07); } .theme-toggle-icon { font-size: 0.95rem; line-height: 1; } .sidebar-version { font-size: 0.7rem; color: #64748b; font-family: var(--font-ui); margin-top: 0.1rem; } /* ============ READABILITY LAYER (whole UI) ============ */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } /* comfortable, scannable data tables everywhere */ .analytics-table td, .leaderboard-table td { padding-top: 0.55rem; padding-bottom: 0.55rem; } .analytics-table tbody tr:nth-child(even) td, .leaderboard-table tbody tr:nth-child(even) td { background: var(--c-zebra); } .analytics-table tbody tr:hover td, .leaderboard-table tbody tr:hover td { background: var(--c-row-hover); } /* a touch more air in cards/panels + list rows */ .sr-action-item, .sr-intel-item, .dist-metric-row { padding-top: 0.6rem; padding-bottom: 0.6rem; } /* small uppercase labels: trim the wide cyberpunk tracking that hurts small-text legibility */ .sr-panel-header, .kpi-label, .block-stat-label, .tab-subtitle { letter-spacing: 0.04em; } /* ============ LIGHT-MODE SIDEBAR (flip the dark rail too) ============ */ :root[data-theme="light"] .sidebar { background: #eef1f5; border-right: 1px solid var(--c-border); } :root[data-theme="light"] .sidebar-brand { border-bottom-color: var(--c-border); } :root[data-theme="light"] .sidebar-brand h1 { color: var(--c-text); } :root[data-theme="light"] .sidebar-footer { border-top-color: var(--c-border); color: var(--c-text-faint); } :root[data-theme="light"] .sidebar-version { color: var(--c-text-faint); } :root[data-theme="light"] .sidebar-toggle { color: var(--c-text-faint); } :root[data-theme="light"] .sidebar-toggle:hover { color: var(--c-text); } :root[data-theme="light"] .nav-item.active { background: rgba(14,116,144,0.08); } /* toggle button: themed in light (it inherits dark colors otherwise) */ :root[data-theme="light"] .theme-toggle { background: #ffffff; border-color: var(--c-border-2); color: var(--c-text-3); } :root[data-theme="light"] .theme-toggle:hover { border-color: var(--c-accent); color: var(--c-text); background: #ffffff; }