/* ============================================================ DashAdvisr — Theme System (Light / Dark Mode) Two theme variants controlled by data-theme attribute on . Default is dark (current brand look). Light mode is the new variant. Brand colors (--accent, --teal, status colors) stay the same in both modes. Only surface/background/text colors change. Include this file BEFORE other stylesheets so variables cascade. ============================================================ */ /* ── LIGHT THEME (default for pages that were already light) ── */ [data-theme="light"], :root { --theme-bg: #F0F4F8; --theme-bg-warm: #fafaf8; --theme-surface: #ffffff; --theme-surface-alpha: rgba(255,255,255,0.72); --theme-surface-border: rgba(255,255,255,0.90); --theme-ink: #0d1117; --theme-ink-soft: #444c56; --theme-ink-muted: #8b95a1; --theme-nav-bg: rgba(248,250,252,0.90); --theme-nav-border: rgba(37,99,235,0.10); --theme-border: rgba(37,99,235,0.08); --theme-border-subtle: rgba(0,0,0,0.06); --theme-card-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03); --theme-card-hover: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); --theme-overlay: rgba(0,0,0,0.35); --theme-sidebar-bg: #ffffff; --theme-sidebar-shadow: 4px 0 24px rgba(0,0,0,0.08); --theme-popover-bg: #ffffff; --theme-popover-border: rgba(0,0,0,0.1); --theme-popover-shadow: 0 8px 32px rgba(0,0,0,0.12); --theme-input-bg: #ffffff; --theme-input-border: rgba(0,0,0,0.12); --theme-hover-bg: rgba(0,0,0,0.05); --theme-bar-track: rgba(0,0,0,0.07); --theme-modal-bg: #ffffff; --theme-modal-shadow: 0 16px 48px rgba(0,0,0,0.15); --theme-toast-bg: #0d1117; --theme-code-bg: #f3f3f4; --theme-gradient-blob1: rgba(37,99,235,0.08); --theme-gradient-blob2: rgba(59,130,246,0.06); --theme-gradient-blob3: rgba(29,78,216,0.05); --theme-noise-opacity: 0.025; --theme-mini-kpi-bg: rgba(255,255,255,0.55); --theme-mini-kpi-border:rgba(255,255,255,0.75); --theme-chip-bg: rgba(255,255,255,0.6); --theme-form-input-bg: rgba(255,255,255,0.7); --theme-hero-glow: rgba(37,99,235,0.12); --theme-proof-divider: rgba(37,99,235,0.08); --theme-browser-bg: #f3f3f4; --theme-browser-card: #ffffff; --theme-browser-url: #888888; --theme-404-bg: #F0F4F8; --theme-404-surface: rgba(37,99,235,0.06); --theme-404-text: #0d1117; --theme-404-muted: #8b95a1; --theme-scroll-track: rgba(0,0,0,0.05); --theme-scroll-thumb: rgba(0,0,0,0.15); --theme-accent-soft: #DBEAFE; } /* ── DARK THEME — Obsidian Arctic / Glassmorphism ─────────── */ [data-theme="dark"] { --theme-bg: #0A192F; --theme-bg-warm: #0C1B33; --theme-surface: rgba(15,23,42,0.75); --theme-surface-alpha: rgba(15,23,42,0.65); --theme-surface-border: rgba(255,255,255,0.10); --theme-glass-blur: blur(16px) saturate(1.2); --theme-accent-glow: rgba(0,210,255,0.08); --theme-ink: #e2e8f0; --theme-ink-soft: #a8b8c8; --theme-ink-muted: #7a8a9a; --theme-nav-bg: rgba(10,25,47,0.88); --theme-nav-border: rgba(255,255,255,0.06); --theme-border: rgba(255,255,255,0.06); --theme-border-subtle: rgba(255,255,255,0.04); --theme-card-shadow: 0 2px 16px rgba(0,10,30,0.3), 0 1px 3px rgba(0,0,0,0.2); --theme-card-hover: 0 8px 40px rgba(0,10,30,0.45), 0 2px 8px rgba(0,210,255,0.06); --theme-overlay: rgba(0,0,0,0.55); --theme-sidebar-bg: #0A192F; --theme-sidebar-shadow: 4px 0 24px rgba(0,0,0,0.3); --theme-popover-bg: rgba(15,23,42,0.9); --theme-popover-border: rgba(255,255,255,0.08); --theme-popover-shadow: 0 8px 32px rgba(0,0,0,0.4); --theme-input-bg: rgba(15,23,42,0.6); --theme-input-border: rgba(255,255,255,0.1); --theme-hover-bg: rgba(255,255,255,0.06); --theme-bar-track: rgba(255,255,255,0.08); --theme-modal-bg: #1a1f2e; --theme-modal-shadow: 0 16px 48px rgba(0,0,0,0.5); --theme-toast-bg: #e2e8f0; --theme-code-bg: rgba(10,25,47,0.8); --theme-gradient-blob1: rgba(0,210,255,0.10); --theme-gradient-blob2: rgba(37,99,235,0.08); --theme-gradient-blob3: rgba(0,166,153,0.06); --theme-noise-opacity: 0.04; --theme-mini-kpi-bg: rgba(255,255,255,0.04); --theme-mini-kpi-border:rgba(255,255,255,0.06); --theme-chip-bg: rgba(255,255,255,0.06); --theme-form-input-bg: rgba(255,255,255,0.06); --theme-hero-glow: rgba(37,99,235,0.18); --theme-proof-divider: rgba(255,255,255,0.08); --theme-browser-bg: #141824; --theme-browser-card: #1a1f2e; --theme-browser-url: #64748b; --theme-404-bg: #0A192F; --theme-404-surface: rgba(255,255,255,0.06); --theme-404-text: #e2e8f0; --theme-404-muted: #64748b; --theme-scroll-track: rgba(255,255,255,0.03); --theme-scroll-thumb: rgba(255,255,255,0.12); --theme-accent-soft: rgba(37,99,235,0.15); } /* ── THEME APPLICATION LAYER ──────────────────────────────── */ /* Override the existing CSS variables used across the site. */ /* Uses html[data-theme] for higher specificity than inline */ /* :root blocks in pages with embedded