/* ============================================================
* themes.css — dark theme overrides + theme transition.
*
* Activated by setting `data-theme="dark"` on . The theme.js
* module handles user preference (light / dark / auto = follow OS)
* and applies the attribute as early as possible to avoid flash.
* ============================================================ */
[data-theme="dark"] {
/* surfaces — slate-based, restrained */
--bg: #0B1220; /* page bg */
--bg-alt: #111827; /* sidebar, hover, panel-foot */
--bg-sunken: #0A101C; /* deeper recess */
--bg-inverse: #F1F5F9;
/* text */
--text: #F1F5F9;
--text-2: #CBD5E1;
--text-3: #94A3B8;
--text-4: #64748B;
/* borders — keep low-contrast so the eye reads structure not lines */
--border: #1E293B;
--border-strong: #334155;
/* primary — re-derive shades against dark background */
--primary-50: color-mix(in srgb, var(--primary) 22%, #0B1220);
--primary-100: color-mix(in srgb, var(--primary) 38%, #0B1220);
--primary-600: color-mix(in srgb, var(--primary) 90%, white 6%);
--primary-700: color-mix(in srgb, var(--primary) 80%, white 12%);
/* glow stays alpha-based — composites over whatever bg sits behind it. */
--primary-glow: color-mix(in srgb, var(--primary) 44%, transparent);
/* secondary derivations — slightly stronger alpha on dark so the
gold dot / orbital nodes don't disappear into the near-black bg. */
--secondary-soft: color-mix(in srgb, var(--secondary) 16%, transparent);
--secondary-ring: color-mix(in srgb, var(--secondary) 34%, transparent);
--secondary-glow: color-mix(in srgb, var(--secondary) 48%, transparent);
/* grid is barely-there on dark — even lower contrast than light */
--grid: color-mix(in srgb, var(--primary) 6%, transparent);
/* semantic — brighter foregrounds, darkened tinted backgrounds */
--success: #4ADE80;
--success-bg: color-mix(in srgb, #15803D 22%, #0B1220);
--success-border: color-mix(in srgb, #15803D 45%, #0B1220);
--warning: #FBBF24;
--warning-bg: color-mix(in srgb, #B45309 22%, #0B1220);
--warning-border: color-mix(in srgb, #B45309 45%, #0B1220);
--danger: #F87171;
--danger-bg: color-mix(in srgb, #DC2626 22%, #0B1220);
--danger-border: color-mix(in srgb, #DC2626 45%, #0B1220);
--info: #38BDF8;
--info-bg: color-mix(in srgb, #0369A1 22%, #0B1220);
--info-border: color-mix(in srgb, #0369A1 45%, #0B1220);
/* decorative accent palette — same OKLCH variations off `--primary`
as light theme, but with a small lightness lift so accent bars
and icon letters read against the dark `--bg`. The brand color
itself often already has good contrast on dark; the variations
just add a touch more L to compensate for darker surfaces. */
--accent-1: oklch(from var(--primary) calc(l + 0.06) c h);
--accent-2: oklch(from var(--primary) calc(l + 0.08) calc(c * 0.92) calc(h + 35));
--accent-3: oklch(from var(--primary) calc(l - 0.02) c calc(h - 6));
--accent-4: oklch(from var(--primary) calc(l + 0.06) calc(c * 0.88) calc(h - 35));
--accent-5: oklch(from var(--primary) calc(l + 0.12) calc(c * 0.78) calc(h + 70));
/* file-type tokens — track semantic */
--pdf: var(--danger);
--pdf-bg: var(--danger-bg);
--pdf-border: var(--danger-border);
--link: var(--info);
--link-bg: var(--info-bg);
--link-border: var(--info-border);
--installer: var(--success);
--installer-bg: var(--success-bg);
--installer-border: var(--success-border);
/* shadows — almost invisible on dark, use them for separation only */
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.40);
--shadow-3: 0 8px 24px rgba(0, 0, 0, 0.50);
--shadow-drawer: -4px 0 20px rgba(0, 0, 0, 0.40);
--shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0,0,0,0.30);
--backdrop: rgba(0, 0, 0, 0.55);
--backdrop-strong:rgba(0, 0, 0, 0.65);
/* Dropdown chevron + search icon — dark text-3 (#94A3B8). */
--select-chev: url("data:image/svg+xml;utf8,");
--input-search-icon: url("data:image/svg+xml;utf8,");
}
/* ----- THEME TRANSITION ---------------------------------------------------
* Theme-swap transition guard. theme.js adds .theme-switching to
* immediately before flipping data-theme, then removes it on the next
* animation frame. During that one-frame window we suppress ALL
* transitions so the theme swap is instant. Outside the window, every
* component's hover/focus transitions work normally — they're untouched.
* Previously this rule did the opposite (enabled a uniform 200ms fade);
* inverted on 2026-05-18 because the fade was perceived as sluggish.
* ------------------------------------------------------------------------ */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
transition: none !important;
}
/* a few component-level dark refinements that can't be done with vars alone */
[data-theme="dark"] .check {
background: var(--bg-sunken);
}
[data-theme="dark"] .switch::after {
box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
[data-theme="dark"] .nav-item:hover {
background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .list-row.is-open:hover,
[data-theme="dark"] .table tbody tr.is-selected:hover {
background: color-mix(in srgb, var(--primary) 26%, var(--bg));
}
[data-theme="dark"] .product-row.is-open:hover { /* legacy v2 hook */
background: color-mix(in srgb, var(--primary) 26%, var(--bg));
}
/* skeleton — flatter on dark */
[data-theme="dark"] .skeleton {
background: linear-gradient(90deg, var(--bg-alt) 0%, var(--bg-sunken) 50%, var(--bg-alt) 100%);
background-size: 200% 100%;
}
/* selection */
[data-theme="dark"] ::selection {
background: color-mix(in srgb, var(--primary) 50%, transparent);
color: var(--text);
}