/* ================================================================ THEME SYSTEM — Dark (default) / Light toggle Applied via data-theme="dark|light" on . All hv2-* components reference these variables. ================================================================ */ /* ── Dark theme (default) ─────────────────────────────────────── */ :root, [data-theme="dark"] { --hv2-bg: #080808; --hv2-bg-alt: #0f0f0f; --hv2-bg-card: rgba(255,255,255,0.03); --hv2-bg-card-hover: rgba(255,255,255,0.06); --hv2-bg-input: rgba(255,255,255,0.05); --hv2-text: #f0f0ec; --hv2-text-muted: rgba(255,255,255,0.45); --hv2-text-subtle: rgba(255,255,255,0.2); --hv2-text-label: rgba(255,255,255,0.12); --hv2-border: rgba(255,255,255,0.06); --hv2-border-hover: rgba(255,255,255,0.12); --hv2-border-input: rgba(255,255,255,0.1); --hv2-accent: #5a67d8; --hv2-accent-hover: #4c5ac0; --hv2-accent-subtle: rgba(90,103,216,0.12); --hv2-accent-faint: rgba(90,103,216,0.06); --hv2-card-shadow: 0 8px 32px rgba(0,0,0,0.3); --hv2-card-shadow-sm: 0 4px 20px rgba(0,0,0,0.2); --hv2-btn-bg: #fff; --hv2-btn-text: #080808; --hv2-btn-bg-hover: var(--hv2-accent); --hv2-btn-text-hover: #fff; --hv2-btn-line-border: rgba(255,255,255,0.12); --hv2-btn-line-text: rgba(255,255,255,0.5); --hv2-btn-line-hover: var(--hv2-accent); --hv2-geo-opacity: 0.06; --hv2-noise-blend: overlay; --hv2-noise-opacity: 0.02; --hv2-nav-bg: rgba(8,8,8,0.95); --hv2-nav-text: #f0f0ec; --hv2-nav-text-muted: rgba(255,255,255,0.45); --hv2-nav-border: rgba(255,255,255,0.06); --hv2-nav-drawer-bg: #111; --hv2-nav-drawer-border: rgba(255,255,255,0.04); --hv2-footer-bg: #0a0a0a; --hv2-scroll-line: rgba(255,255,255,0.15); --hv2-success-bg: rgba(25,135,84,0.15); --hv2-success-text: #4ade80; --hv2-error-bg: rgba(220,53,69,0.15); --hv2-error-text: #f87171; } /* ── Light theme ──────────────────────────────────────────────── */ [data-theme="light"] { --hv2-bg: #ffffff; --hv2-bg-alt: #fafafa; --hv2-bg-card: #fff; --hv2-bg-card-hover: #fff; --hv2-bg-input: #fff; --hv2-text: #1a1a1a; --hv2-text-muted: #777; --hv2-text-subtle: #bbb; --hv2-text-label: #bbb; --hv2-border: #eee; --hv2-border-hover: #ddd; --hv2-border-input: #eee; --hv2-accent: #5a67d8; --hv2-accent-hover: #4c5ac0; --hv2-accent-subtle: rgba(90,103,216,0.08); --hv2-accent-faint: rgba(90,103,216,0.04); --hv2-card-shadow: 0 4px 20px rgba(0,0,0,0.05); --hv2-card-shadow-sm: 0 2px 10px rgba(0,0,0,0.04); --hv2-btn-bg: #1a1a1a; --hv2-btn-text: #fff; --hv2-btn-bg-hover: #333; --hv2-btn-text-hover: #fff; --hv2-btn-line-border: #ddd; --hv2-btn-line-text: #555; --hv2-btn-line-hover: #999; --hv2-geo-opacity: 0.06; --hv2-noise-blend: multiply; --hv2-noise-opacity: 0.025; --hv2-nav-bg: rgba(255,255,255,0.97); --hv2-nav-text: #1a1a1a; --hv2-nav-text-muted: #555; --hv2-nav-border: rgba(0,0,0,0.07); --hv2-nav-drawer-bg: #fff; --hv2-nav-drawer-border: #f0f0f0; --hv2-footer-bg: #1a1a1a; --hv2-scroll-line: #ccc; --hv2-success-bg: #d4edda; --hv2-success-text: #155724; --hv2-error-bg: #f8d7da; --hv2-error-text: #721c24; }