:root {
 --bg-app: #0B1020;
 --bg-sidebar: #0D1326;
 --bg-card: #121A2B;
 --bg-card-elevated: #172033;
 --bg-input: #0F172A;
 --text-primary: #F1F5F9;
 --text-secondary: #94A3B8;
 --text-muted: #64748B;
 --border-subtle: #1F2937;
 --accent-blue: #3B82F6;
 --accent-blue-hover: #60A5FA;
 --accent-blue-glow: rgba(59,130,246,0.28);
 --accent-teal: #2DD4BF;
 --accent-teal-glow: rgba(45,212,191,0.25);
 --accent-purple: #8B5CF6;
 --accent-purple-glow: rgba(139,92,246,0.22);
 --success: #22C55E;
 --warning: #F59E0B;
 --danger: #F87171;
 --info: #38BDF8;
 --radius-sm: 12px;
 --radius-md: 18px;
 --radius-lg: 20px;
 --shadow-card: 0 8px 30px rgba(0,0,0,0.28);
 --shadow-blue-glow: 0 0 0 1px rgba(59,130,246,0.38), 0 8px 24px rgba(59,130,246,0.22);
 --shadow-teal-glow: 0 0 0 1px rgba(45,212,191,0.35), 0 8px 24px rgba(45,212,191,0.18);
}

:root {
  --color-primary: var(--accent-blue);
  --color-primary-hover: var(--accent-blue-hover);
  --color-primary-soft: rgba(59,130,246,0.16);
  --color-success-soft: rgba(34,197,94,0.16);
  --color-warning-soft: rgba(245,158,11,0.16);
  --color-danger-soft: rgba(248,113,113,0.16);
  --color-info-soft: rgba(56,189,248,0.16);
  --color-bg-app: var(--bg-app);
  --color-bg-sidebar: var(--bg-sidebar);
  --color-surface-1: var(--bg-card);
  --color-surface-2: var(--bg-card-elevated);
  --color-surface-3: #1D2840;
  --color-surface-input: var(--bg-input);
  --color-surface-hover: rgba(148,163,184,0.08);
  --color-border-subtle: var(--border-subtle);
  --color-border-strong: rgba(148,163,184,0.28);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-inverse: #0B1020;
  --color-accent-blue: var(--accent-blue);
  --color-accent-teal: var(--accent-teal);
  --color-accent-purple: var(--accent-purple);
  --color-accent-amber: #F59E0B;
  --color-score-good: var(--success);
  --color-score-mid: var(--warning);
  --color-score-low: var(--danger);
  --color-focus-ring: rgba(59,130,246,0.38);
  --color-overlay: rgba(11,16,32,0.72);
  --color-shadow-tint: rgba(0,0,0,0.28);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --radius-xl: 24px;
  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.18);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.18);
  --shadow-md: var(--shadow-card);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.34);
  --shadow-focus: 0 0 0 3px rgba(59,130,246,0.22);
  --shadow-primary-glow: var(--shadow-blue-glow);
  --shadow-success-glow: var(--shadow-teal-glow);
  --z-dropdown: 40;
  --z-sticky: 80;
  --z-banner: 90;
  --z-sidebar: 100;
  --z-modal: 200;
  --z-tooltip: 300;
  --transition-fast: 120ms ease;
  --transition-normal: 180ms ease;
  --transition-slow: 280ms ease;
}