/* ──────────────────────────────────────────────────────────────
Hermes Hub — Design Tokens (shared across all tabs)
Elke tab-pagina laadt dit bestand EERST in via:
Skins (skins/.css) overschrijven de :root variabelen.
De hardcoded kleuren in de tabs fungeren als fallback voor
als de skin-CSS niet laadt — tokens winnen op specificiteit
alleen (var() resolved at use-site, niet in cascade).
────────────────────────────────────────────────────────────── */
:root {
/* ── Base surfaces (dark → lighter) ── */
--bg-base: #0a0a0f; /* page background, behind everything */
--bg-sidebar: #0f0f1a; /* sidebar background */
--bg-card: #13131f; /* main card surface (cron cards, panels) */
--bg-tile: #1a1a2e; /* smaller tiles inside cards (summary, voice tiles) */
--bg-input: #1a1a2e; /* form inputs, code blocks */
--bg-hover: #13131f; /* nav-btn hover, service-link hover */
/* ── Borders & dividers ── */
--border: #1e1e30; /* card borders, section dividers */
--border-mid: #252540; /* secondary borders, tile borders */
--border-hi: #353560; /* hover state, scrollbar hover */
/* ── Text ── */
--text-hi: #e2e8f0; /* primary text (high contrast) */
--text-mid: #cbd5e1; /* secondary text */
--text-lo: #94a3b8; /* tertiary text (section titles) */
--text-dim: #64748b; /* dim text (labels, hints) */
--text-faint: #4a5568; /* faintest (subscripts, port tags) */
/* ── Accent ── */
--accent: #d4a843; /* gold (default brand) */
--accent-soft: rgba(212, 168, 67, 0.15);
/* ── Semantic badges ── */
--ok-bg: #065f46; --ok-fg: #6ee7b7;
--warn-bg: #78350f; --warn-fg: #fcd34d;
--err-bg: #7f1d1d; --err-fg: #fca5a5;
--info-bg: #1e3a5f; --info-fg: #93c5fd;
/* ── Scrollbar (webkit + firefox) ── */
--scroll-track: #0a0a0f;
--scroll-thumb: #252540;
--scroll-thumb-hover: #353560;
/* ── Layout dimensions (not themeable) ── */
--sidebar-w: 228px;
--sidebar-w-mobile: 280px;
--radius-card: 12px;
--radius-tile: 8px;
--radius-btn: 6px;
/* ── Skin metadata (set by skin file) ── */
--skin-name: "Midnight Gold";
--skin-id: "midnight-gold";
}
/* ── Skeleton: map tokens to common patterns ── */
/* Deze regels worden overschreven door skin-CSS, maar zorgen dat
ALLE componenten direct reageren zonder dat elke tab zijn CSS
hoeft te refactoren. Specifiek: alleen de "low-level" globals. */
html { color-scheme: dark; }
body { background: var(--bg-base); color: var(--text-hi); margin: 0; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--scroll-track); }
html::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; }
html::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
html { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }