:root {
  --bg-primary: #111111;
  --bg-secondary: #1a1a1a;
  --surface-1: #202020;
  --surface-2: #2a2a2a;
  --surface-3: #333333;

  --text-primary: #f5f5f5;
  --text-secondary: #d2d2d2;
  --text-muted: #a3a3a3;

  --brand-primary: #ff3b30;
  --brand-secondary: #ff6b00;
  --brand-accent: #ffd60a;
  --brand-warn: #ffb703;

  --success: #22c55e;
  --danger: #ef4444;
  --info: #60a5fa;

  --border-1: #4a4a4a;
  --border-2: #3a3a3a;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.28);
  --shadow-focus: 0 0 0 2px rgba(255, 59, 48, 0.35);
  --glow-primary: 0 0 20px rgba(255, 59, 48, 0.38);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  --font-base: 'Barlow', 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-title: 'Orbitron', 'Rajdhani', 'Barlow', 'Inter', 'Segoe UI', sans-serif;
  --font-size-1: 14px;
  --font-size-2: 16px;
  --font-size-3: 18px;
  --font-size-4: 24px;
  --font-size-5: 32px;

  --container-max: 1120px;
  --header-height: 64px;
  --z-header: 20;
  --z-overlay: 40;
}