/* ========== THEME VARIABLES ========== */

/* Default: dark theme applied to root */
:root,
[data-theme="dark"] {
  --bg-base: #0a0a12;
  --bg-card: rgba(14, 14, 26, 0.85);
  --bg-card-hover: rgba(20, 20, 38, 0.92);
  --bg-nav: rgba(10, 10, 18, 0.82);
  --bg-input: rgba(14, 14, 26, 0.6);
  --neon-cyan: #0ff;
  --neon-cyan-mid: #0ea5e9;
  --neon-magenta: #e040fb;
  --neon-magenta-hot: #f0f;
  --gold: #facc15;
  --gold-dim: #a88a0a;
  --green: #22c55e;
  --red: #ef4444;
  --purple: #a855f7;
  --text-primary: #e8e8f0;
  --text-secondary: #9898b0;
  --text-dim: #58587a;
  --border-dim: rgba(255, 255, 255, 0.06);
  --border-neon: rgba(0, 255, 255, 0.2);
  --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.3), 0 0 40px rgba(0, 255, 255, 0.1);
  --glow-magenta: 0 0 20px rgba(224, 64, 251, 0.3), 0 0 40px rgba(224, 64, 251, 0.1);
  --glow-gold: 0 0 20px rgba(250, 204, 21, 0.3), 0 0 40px rgba(250, 204, 21, 0.1);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.5);
  --bg-gradient-1: radial-gradient(ellipse at 20% 50%, rgba(14, 165, 233, 0.04) 0%, transparent 50%);
  --bg-gradient-2: radial-gradient(ellipse at 80% 20%, rgba(224, 64, 251, 0.04) 0%, transparent 50%);
  --bg-gradient-3: radial-gradient(ellipse at 50% 80%, rgba(14, 165, 233, 0.02) 0%, transparent 50%);
  --scrollbar-track: #0a0a12;
  --rarity-legendary: #facc15;
  --rarity-epic: #a855f7;
  --rarity-rare: #0ea5e9;
  --rarity-uncommon: #22c55e;
  --rarity-common: #6b7280;
}

[data-theme="light"] {
  --bg-base: #f0f0f5;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: rgba(255, 255, 255, 1);
  --bg-nav: rgba(240, 240, 245, 0.88);
  --bg-input: rgba(255, 255, 255, 0.8);
  --neon-cyan: #0284c7;
  --neon-cyan-mid: #0369a1;
  --neon-magenta: #c026d3;
  --neon-magenta-hot: #a21caf;
  --gold: #ca8a04;
  --gold-dim: #92400e;
  --green: #16a34a;
  --red: #dc2626;
  --purple: #9333ea;
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a6a;
  --text-dim: #8888a0;
  --border-dim: rgba(0, 0, 0, 0.08);
  --border-neon: rgba(2, 132, 199, 0.2);
  --glow-cyan: 0 2px 12px rgba(2, 132, 199, 0.15);
  --glow-magenta: 0 2px 12px rgba(192, 38, 211, 0.15);
  --glow-gold: 0 2px 12px rgba(202, 138, 4, 0.15);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  --bg-gradient-1: radial-gradient(ellipse at 20% 50%, rgba(2, 132, 199, 0.05) 0%, transparent 50%);
  --bg-gradient-2: radial-gradient(ellipse at 80% 20%, rgba(192, 38, 211, 0.04) 0%, transparent 50%);
  --bg-gradient-3: radial-gradient(ellipse at 50% 80%, rgba(202, 138, 4, 0.03) 0%, transparent 50%);
  --scrollbar-track: #f0f0f5;
  --rarity-legendary: #b45309;
  --rarity-epic: #7c3aed;
  --rarity-rare: #0369a1;
  --rarity-uncommon: #15803d;
  --rarity-common: #6b7280;
}