/* ==============================
   Solo Leveling Design Tokens
   ============================== */
:root {
  /* Backgrounds */
  --bg-primary: #0a0a1a;
  --bg-secondary: #0d1117;
  --bg-card: rgba(13, 17, 23, 0.85);
  --bg-card-hover: rgba(20, 25, 35, 0.9);
  --bg-glass: rgba(15, 18, 30, 0.75);
  --bg-input: rgba(20, 25, 40, 0.8);

  /* Primary Blue (System) */
  --blue-100: #e0f0ff;
  --blue-300: #7cc4ff;
  --blue-400: #4a9eff;
  --blue-500: #2979ff;
  --blue-600: #1565c0;
  --blue-glow: rgba(74, 158, 255, 0.4);

  /* Cyan (Accent) */
  --cyan-400: #00d4ff;
  --cyan-500: #00bcd4;
  --cyan-glow: rgba(0, 212, 255, 0.3);

  /* Purple (Power) */
  --purple-300: #c084fc;
  --purple-400: #a855f7;
  --purple-500: #7c3aed;
  --purple-600: #6d28d9;
  --purple-700: #4c1d95;
  --purple-glow: rgba(124, 58, 237, 0.4);

  /* Gold (Currency) */
  --gold-300: #fcd34d;
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --gold-glow: rgba(251, 191, 36, 0.3);

  /* Red (Danger) */
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-glow: rgba(239, 68, 68, 0.3);

  /* Green (Success) */
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-glow: rgba(34, 197, 94, 0.3);

  /* Orange (Warning) */
  --orange-400: #fb923c;
  --orange-500: #f97316;

  /* Text */
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-dim: #475569;

  /* Borders */
  --border-subtle: rgba(74, 158, 255, 0.15);
  --border-glow: rgba(74, 158, 255, 0.3);
  --border-purple: rgba(124, 58, 237, 0.3);
  --border-gold: rgba(251, 191, 36, 0.3);
  --border-red: rgba(239, 68, 68, 0.3);

  /* Shadows */
  --shadow-blue:
    0 0 20px rgba(74, 158, 255, 0.15), 0 0 40px rgba(74, 158, 255, 0.05);
  --shadow-purple:
    0 0 20px rgba(124, 58, 237, 0.15), 0 0 40px rgba(124, 58, 237, 0.05);
  --shadow-gold: 0 0 20px rgba(251, 191, 36, 0.15);
  --shadow-red: 0 0 20px rgba(239, 68, 68, 0.15);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);

  /* Fonts */
  --font-heading: "Orbitron", "Rajdhani", sans-serif;
  --font-body: "Inter", "Rajdhani", sans-serif;
  --font-display: "Orbitron", monospace;

  /* Sizes */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index */
  --z-nav: 100;
  --z-modal: 1000;
  --z-toast: 1100;
}