/* ============================================================
sEyeber Hub — Dark Theme Overrides
Overrides the light tokens in tokens.css. Load AFTER tokens.css.
Two activation modes — both supported:
1. Automatic: users with OS-level dark preference.
2. Explicit: user toggles dark mode inside the app.
...then set (or remove to revert).
Brand hues (primary / accent / gold / CSF function colors) stay
identical on purpose — only surfaces, text, and borders invert.
============================================================ */
/* -------- Mode 1: respects OS preference (wrap in @media) -------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* ---------- Surfaces ---------- */
--bg-page: #0B1730;
--bg-surface: #13244A;
--bg-panel: #1A2D57;
--bg-subtle: #24365F;
--bg-deep: #0F1F3B; /* unchanged — already dark */
--bg-deeper: #070E1F;
/* ---------- Text ---------- */
--text-heading: #F5F8FC;
--text-body: #CBD5E1;
--text-muted: #94A3B8;
--text-silver: #7C91A9;
/* ---------- Borders ---------- */
--border-light: #24365F;
--border-medium: #334668;
/* ---------- Shadows (darker, less diffuse) ---------- */
--shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.45);
--shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.55);
--shadow-glow: 0 18px 60px rgba(37, 99, 235, 0.35);
/* Brand palette (primary / accent / gold / fn-*) intentionally inherited
from tokens.css — do not override. */
}
}
/* -------- Mode 2: explicit toggle via [data-theme="dark"] -------- */
:root[data-theme="dark"] {
--bg-page: #0B1730;
--bg-surface: #13244A;
--bg-panel: #1A2D57;
--bg-subtle: #24365F;
--bg-deep: #0F1F3B;
--bg-deeper: #070E1F;
--text-heading: #F5F8FC;
--text-body: #CBD5E1;
--text-muted: #94A3B8;
--text-silver: #7C91A9;
--border-light: #24365F;
--border-medium: #334668;
--shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.45);
--shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.55);
--shadow-glow: 0 18px 60px rgba(37, 99, 235, 0.35);
}
/* -------- Color-scheme hint (helps native form controls / scrollbars) -------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }