/* ============================================
   RPG SKILLS — Design Tokens
   ============================================ */

:root {
  /* PRIMARY — Gold (XP, Progression) */
  --gold:         #d4881c;
  --gold-light:   #e8a030;
  --gold-dim:     #8a5a10;
  --gold-rgb:     212, 136, 28;

  /* SECONDARY — Blue (Magic, Skills) */
  --blue:         #60a5fa;
  --blue-light:   #93c5fd;
  --blue-dim:     #1e3a5f;
  --blue-rgb:     96, 165, 250;

  /* ACCENT — Red (Combat, Damage) */
  --red:          #ef4444;
  --red-light:    #f87171;
  --red-dim:      #7f1d1d;
  --red-rgb:      239, 68, 68;

  /* ACCENT — Purple (Rare, Legendary) */
  --purple:       #a78bfa;
  --purple-light: #c4b5fd;
  --purple-dim:   #4c1d95;
  --purple-rgb:   167, 139, 250;

  /* DARKS (Backgrounds) */
  --dark:         #09080a;
  --dark2:        #0d0b0e;
  --dark3:        #120e12;
  --dark4:        #1a1418;
  --dark-rgb:     9, 8, 10;

  /* TEXT */
  --text-body:    #e0e0e0;
  --text-muted:   #999;
  --text-dim:     #666;
  --text-faint:   #444;

  /* BORDERS */
  --border:       rgba(212, 136, 28, 0.13);
  --border-hover: rgba(212, 136, 28, 0.28);
  --border-active: rgba(212, 136, 28, 0.4);

  /* SEMANTIC */
  --success:      #22c55e;
  --success-bg:   rgba(34, 197, 94, 0.12);
  --warning:      #f59e0b;
  --error:        #ef4444;

  /* CATEGORY COLORS */
  --cat-combat:   #ef4444;
  --cat-defense:  #60a5fa;
  --cat-mobility: #a78bfa;
  --cat-utility:  #c8973a;
  --cat-settler:  #c8973a;

  /* SPACING */
  --space-xs:     4px;
  --space-sm:     8px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     40px;
  --space-2xl:    64px;
  --space-3xl:    96px;

  /* TYPOGRAPHY */
  --font-heading: 'Rajdhani', 'Segoe UI', sans-serif;
  --font-body:    'Exo 2', 'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* FONT SIZES */
  --fs-xs:        0.75rem;
  --fs-sm:        0.875rem;
  --fs-base:      1rem;
  --fs-lg:        1.125rem;
  --fs-xl:        1.25rem;
  --fs-2xl:       1.5rem;
  --fs-3xl:       2rem;
  --fs-4xl:       2.5rem;
  --fs-hero:      clamp(2.5rem, 6vw, 5rem);

  /* LETTER SPACING */
  --ls-tight:     1px;
  --ls-normal:    1.5px;
  --ls-wide:      2px;
  --ls-wider:     3px;

  /* BORDER RADIUS */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* SHADOWS */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow:  0 0 20px rgba(212, 136, 28, 0.15);

  /* TRANSITIONS */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* Z-INDEX */
  --z-nav:        100;
  --z-modal:      200;
  --z-tooltip:    300;
}