/* ==========================================================================
   Decision Arcade - Theme Variations
   ========================================================================== */

/* 1. Cyber Neon (Default - applied in root) */
[data-theme="cyber-neon"] {
  --bg-primary: #0a0b14;
  --bg-surface: rgba(18, 20, 36, 0.85);
  --bg-surface-elevated: rgba(28, 32, 58, 0.95);
  --border-glow: rgba(0, 240, 255, 0.3);
  --accent-cyan: #00f0ff;
  --accent-magenta: #ff007f;
  --accent-yellow: #ffe600;
  --text-main: #f8fafc;
}

/* 2. Retro 80s Arcade */
[data-theme="retro-arcade"] {
  --bg-primary: #110022;
  --bg-surface: rgba(34, 0, 68, 0.85);
  --bg-surface-elevated: rgba(50, 0, 95, 0.95);
  --border-glow: rgba(255, 110, 0, 0.4);
  --accent-cyan: #ff7700;
  --accent-magenta: #ff0055;
  --accent-yellow: #00ffcc;
  --text-main: #ffffea;
}

[data-theme="retro-arcade"] body::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
  z-index: 999;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  opacity: 0.7;
}

/* 3. Gold Royale (Luxury Casino / VIP) */
[data-theme="gold-royale"] {
  --bg-primary: #08080a;
  --bg-surface: rgba(22, 20, 18, 0.85);
  --bg-surface-elevated: rgba(35, 32, 28, 0.95);
  --border-glow: rgba(255, 215, 0, 0.35);
  --accent-cyan: #ffd700;
  --accent-magenta: #e5b869;
  --accent-yellow: #fff3b0;
  --text-main: #fcf9f0;
}

/* 4. Kawaii Pastel (Cute & Playful) */
[data-theme="kawaii-pastel"] {
  --bg-primary: #1b162b;
  --bg-surface: rgba(45, 36, 70, 0.85);
  --bg-surface-elevated: rgba(65, 52, 95, 0.95);
  --border-glow: rgba(255, 175, 204, 0.4);
  --accent-cyan: #a2d2ff;
  --accent-magenta: #ffafcc;
  --accent-yellow: #bde0fe;
  --text-main: #ffffff;
}