/* ============================================ THEME OVERRIDES Light and Dark theme variable definitions. These override the :root defaults in dashboard-enterprise.css when data-theme is set on . ============================================ */ html[data-theme="dark"] { --bg-base: #0a0d12; --bg-elevated: #111419; --bg-surface: #181c23; --bg-surface-hover: #1e232c; --bg-subtle: #242a35; --bg-muted: #2d3544; --accent-primary: #60a5fa; --accent-primary-muted: rgba(96, 165, 250, 0.15); --accent-secondary: #a78bfa; --accent-secondary-muted: rgba(167, 139, 250, 0.15); --status-success: #34d399; --status-success-muted: rgba(52, 211, 153, 0.12); --status-success-glow: rgba(52, 211, 153, 0.25); --status-warning: #fbbf24; --status-warning-muted: rgba(251, 191, 36, 0.12); --status-warning-glow: rgba(251, 191, 36, 0.25); --status-error: #f87171; --status-error-muted: rgba(248, 113, 113, 0.12); --status-error-glow: rgba(248, 113, 113, 0.25); --status-info: #60a5fa; --status-info-muted: rgba(96, 165, 250, 0.12); --status-success-tint: #6ee7b7; --status-warning-tint: #fcd34d; --status-error-tint: #fca5a5; --accent-primary-subtle: rgba(96, 165, 250, 0.06); --accent-primary-hover: rgba(96, 165, 250, 0.2); --accent-primary-border: rgba(96, 165, 250, 0.25); --accent-primary-border-emphasis: rgba(96, 165, 250, 0.4); --status-error-subtle: rgba(248, 113, 113, 0.08); --status-error-border: rgba(248, 113, 113, 0.3); --status-warning-subtle: rgba(251, 191, 36, 0.08); --status-warning-border: rgba(251, 191, 36, 0.3); --bg-track: rgba(255, 255, 255, 0.025); --bg-row-hover: rgba(255, 255, 255, 0.015); --bg-overlay: rgba(0, 0, 0, 0.6); --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --text-disabled: #475569; --border-subtle: rgba(148, 163, 184, 0.08); --border-default: rgba(148, 163, 184, 0.12); --border-emphasis: rgba(148, 163, 184, 0.2); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); --shadow-glow-primary: 0 0 20px rgba(96, 165, 250, 0.15); --shadow-dialog: 0 20px 60px rgba(0, 0, 0, 0.5); --text-on-primary: #ffffff; --text-on-primary-muted: rgba(255, 255, 255, 0.2); --gradient-surface: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%); --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%); /* Legacy aliases — some components use these names */ --bg-primary: var(--bg-base); --bg-secondary: var(--bg-surface); --bg-tertiary: var(--bg-subtle); --surface-secondary: var(--bg-surface-hover); --border-primary: var(--border-default); --border-secondary: var(--border-subtle); --text-tertiary: var(--text-muted); } html[data-theme="light"] { --bg-base: #f8fafc; --bg-elevated: #ffffff; --bg-surface: #ffffff; --bg-surface-hover: #f1f5f9; --bg-subtle: #e2e8f0; --bg-muted: #cbd5e1; --accent-primary: #2563eb; --accent-primary-muted: rgba(37, 99, 235, 0.1); --accent-secondary: #7c3aed; --accent-secondary-muted: rgba(124, 58, 237, 0.1); --status-success: #059669; --status-success-muted: rgba(5, 150, 105, 0.1); --status-success-glow: rgba(5, 150, 105, 0.15); --status-warning: #d97706; --status-warning-muted: rgba(217, 119, 6, 0.1); --status-warning-glow: rgba(217, 119, 6, 0.15); --status-error: #dc2626; --status-error-muted: rgba(220, 38, 38, 0.1); --status-error-glow: rgba(220, 38, 38, 0.15); --status-info: #2563eb; --status-info-muted: rgba(37, 99, 235, 0.1); --status-success-tint: #a7f3d0; --status-warning-tint: #fde68a; --status-error-tint: #fecaca; --accent-primary-subtle: rgba(37, 99, 235, 0.05); --accent-primary-hover: rgba(37, 99, 235, 0.15); --accent-primary-border: rgba(37, 99, 235, 0.2); --accent-primary-border-emphasis: rgba(37, 99, 235, 0.35); --status-error-subtle: rgba(220, 38, 38, 0.06); --status-error-border: rgba(220, 38, 38, 0.2); --status-warning-subtle: rgba(217, 119, 6, 0.06); --status-warning-border: rgba(217, 119, 6, 0.2); --bg-track: rgba(0, 0, 0, 0.04); --bg-row-hover: rgba(0, 0, 0, 0.02); --bg-overlay: rgba(0, 0, 0, 0.4); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-disabled: #cbd5e1; --border-subtle: rgba(15, 23, 42, 0.06); --border-default: rgba(15, 23, 42, 0.1); --border-emphasis: rgba(15, 23, 42, 0.2); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); --shadow-glow-primary: 0 0 20px rgba(37, 99, 235, 0.1); --shadow-dialog: 0 20px 60px rgba(0, 0, 0, 0.2); --text-on-primary: #ffffff; --text-on-primary-muted: rgba(255, 255, 255, 0.2); --gradient-surface: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); --gradient-card: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0) 100%); /* Legacy aliases — some components use these names */ --bg-primary: var(--bg-base); --bg-secondary: var(--bg-surface); --bg-tertiary: var(--bg-subtle); --surface-secondary: var(--bg-surface-hover); --border-primary: var(--border-default); --border-secondary: var(--border-subtle); --text-tertiary: var(--text-muted); }