/* ===========================================
   ROOT VARIABLES
   Based on color psychology research:
   - Purple: Technology, premium, gaming
   - Orange/Gold: Action, energy, urgency
   - Green: Success, safety, "go"
=========================================== */
:root {
  /* Primary - Trust & Tech */
  --primary: #6366f1;
  --primary-glow: rgba(99, 102, 241, 0.5);
  --primary-dark: #4f46e5;

  /* Secondary - Premium */
  --secondary: #a855f7;
  --secondary-glow: rgba(168, 85, 247, 0.4);

  /* Accent - Energy & Action (Fire theme) */
  --accent-gold: #ffd700;
  --accent-orange: #ff6b35;
  --accent-fire: linear-gradient(135deg, #ffd700 0%, #ff6b35 100%);

  /* Success - Safety */
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.3);

  /* Backgrounds */
  --bg-dark: #030303;
  --bg-card: rgba(255, 255, 255, 0.02);
  --bg-card-hover: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);

  /* Text */
  --text-main: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-dim: rgba(255, 255, 255, 0.4);

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

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 100px;
}