:root {
  /* Domain Colors */
  --domain1: #3B82F6;
  --domain1-light: #93C5FD;
  --domain1-dark: #1D4ED8;
  --domain1-glow: rgba(59,130,246,0.25);
  --domain2: #8B5CF6;
  --domain2-light: #C4B5FD;
  --domain2-dark: #6D28D9;
  --domain2-glow: rgba(139,92,246,0.25);
  --domain3: #EF4444;
  --domain3-light: #FCA5A5;
  --domain3-dark: #DC2626;
  --domain3-glow: rgba(239,68,68,0.25);
  --domain4: #F97316;
  --domain4-light: #FDBA74;
  --domain4-dark: #EA580C;
  --domain4-glow: rgba(249,115,22,0.25);
  --domain5: #22C55E;
  --domain5-light: #86EFAC;
  --domain5-dark: #16A34A;
  --domain5-glow: rgba(34,197,94,0.25);
  --domain6: #06B6D4;
  --domain6-light: #67E8F9;
  --domain6-dark: #0891B2;
  --domain6-glow: rgba(6,182,212,0.25);
  --domain7: #EC4899;
  --domain7-light: #F9A8D4;
  --domain7-dark: #DB2777;
  --domain7-glow: rgba(236,72,153,0.25);

  /* Theme Colors - Dark (default) - OLED Optimized */
  --bg-primary: #0B1120;
  --bg-secondary: #131B2E;
  --bg-tertiary: #1E293B;
  --bg-card: #151F32;
  --bg-card-hover: #1C2840;
  --bg-input: #151F32;
  --border-color: #1E2D45;
  --border-light: #2D3F5E;
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #8B9AB5;
  --text-dim: #5A6A85;

  /* Accent Colors */
  --accent-gold: #FBBF24;
  --accent-gold-light: #FDE68A;
  --accent-gold-glow: rgba(251,191,36,0.2);
  --success: #22C55E;
  --success-glow: rgba(34,197,94,0.2);
  --warning: #F59E0B;
  --danger: #EF4444;
  --danger-glow: rgba(239,68,68,0.2);
  --info: #3B82F6;

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-xs: 0.8125rem;
  --font-sm: 0.9375rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.875rem;
  --font-4xl: 2.25rem;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Enhanced Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.35);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 20px rgba(59,130,246,0.15);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.05) inset;

  /* Glassmorphism */
  --glass-bg: rgba(21,31,50,0.75);
  --glass-border: rgba(255,255,255,0.06);
  --glass-blur: 16px;

  /* Layout */
  --sidebar-width: 270px;
  --header-height: 60px;
  --content-max-width: 1200px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Chart Palette — 8 distinct series colors */
  --chart-1: #3B82F6;
  --chart-2: #EF4444;
  --chart-3: #22C55E;
  --chart-4: #8B5CF6;
  --chart-5: #06B6D4;
  --chart-6: #F97316;
  --chart-7: #EC4899;
  --chart-8: #475569;

  /* Severity Colors */
  --sev-critical: #7F1D1D;
  --sev-critical-bg: rgba(127,29,29,0.12);
  --sev-high: #DC2626;
  --sev-high-bg: rgba(220,38,38,0.12);
  --sev-medium: #D97706;
  --sev-medium-bg: rgba(217,119,6,0.12);
  --sev-low: #16A34A;
  --sev-low-bg: rgba(22,163,74,0.12);
  --sev-info: #2563EB;
  --sev-info-bg: rgba(37,99,235,0.12);

  /* Spring Easing */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #E8EDF5;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --bg-input: #F1F5F9;
  --border-color: #E2E8F0;
  --border-light: #CBD5E1;
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-dim: #94A3B8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 20px rgba(59,130,246,0.08);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
  --glass-bg: rgba(255,255,255,0.8);
  --glass-border: rgba(0,0,0,0.06);
}