/* ============ Theme System: CSS Variables ============ */
:root {
  /* Default theme: Neon Cyber */
  --bg-primary: #0a0a1a;
  --bg-secondary: #12122a;
  --bg-panel: rgba(18, 18, 42, 0.92);
  --bg-tile: linear-gradient(145deg, #1a1a3e, #0d0d28);
  --bg-tile-hover: linear-gradient(145deg, #2a2a5e, #1a1a3e);
  --bg-tile-selected: linear-gradient(145deg, #ff2d95, #cc0066);
  --bg-tile-matched: rgba(0, 255, 136, 0.15);
  --border-tile: #2a2a5e;
  --border-tile-hover: #ff2d95;
  --border-tile-selected: #ff69b4;
  --text-primary: #e0e0ff;
  --text-secondary: #8888bb;
  --text-accent: #ff2d95;
  --accent-primary: #ff2d95;
  --accent-secondary: #00ff88;
  --accent-glow: rgba(255, 45, 149, 0.5);
  --shadow-tile: 0 4px 15px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.5);
  --btn-bg: linear-gradient(135deg, #ff2d95, #cc0066);
  --btn-hover: linear-gradient(135deg, #ff69b4, #ff2d95);
  --btn-text: #ffffff;
  --overlay-bg: rgba(10, 10, 26, 0.85);
  --grid-gap: 4px;
  --tile-radius: 10px;
  --transition-speed: 0.3s;
}

/* Ocean Breeze */
[data-theme="ocean-breeze"] {
  --bg-primary: #0a1628;
  --bg-secondary: #0f1f3a;
  --bg-panel: rgba(15, 31, 58, 0.92);
  --bg-tile: linear-gradient(145deg, #1a3558, #0d1f3a);
  --bg-tile-hover: linear-gradient(145deg, #2a4a78, #1a3558);
  --bg-tile-selected: linear-gradient(145deg, #00b4d8, #0077b6);
  --bg-tile-matched: rgba(0, 180, 216, 0.15);
  --border-tile: #2a4a78;
  --border-tile-hover: #00b4d8;
  --border-tile-selected: #48cae4;
  --text-primary: #caf0f8;
  --text-secondary: #6a90b8;
  --text-accent: #00b4d8;
  --accent-primary: #00b4d8;
  --accent-secondary: #90e0ef;
  --accent-glow: rgba(0, 180, 216, 0.5);
  --shadow-tile: 0 4px 15px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.4);
  --btn-bg: linear-gradient(135deg, #00b4d8, #0077b6);
  --btn-hover: linear-gradient(135deg, #48cae4, #00b4d8);
  --btn-text: #ffffff;
  --overlay-bg: rgba(10, 22, 40, 0.85);
}

/* Sunset Glow */
[data-theme="sunset-glow"] {
  --bg-primary: #1a0a0a;
  --bg-secondary: #2a1212;
  --bg-panel: rgba(42, 18, 18, 0.92);
  --bg-tile: linear-gradient(145deg, #3e1a1a, #281010);
  --bg-tile-hover: linear-gradient(145deg, #5e2a2a, #3e1a1a);
  --bg-tile-selected: linear-gradient(145deg, #ff6b35, #cc4400);
  --bg-tile-matched: rgba(255, 107, 53, 0.15);
  --border-tile: #5e2a2a;
  --border-tile-hover: #ff6b35;
  --border-tile-selected: #ff8c5a;
  --text-primary: #ffe0d0;
  --text-secondary: #bb8866;
  --text-accent: #ff6b35;
  --accent-primary: #ff6b35;
  --accent-secondary: #ffd700;
  --accent-glow: rgba(255, 107, 53, 0.5);
  --shadow-tile: 0 4px 15px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.5);
  --btn-bg: linear-gradient(135deg, #ff6b35, #cc4400);
  --btn-hover: linear-gradient(135deg, #ff8c5a, #ff6b35);
  --btn-text: #ffffff;
  --overlay-bg: rgba(26, 10, 10, 0.85);
}

/* Forest Mist */
[data-theme="forest-mist"] {
  --bg-primary: #0a1a0a;
  --bg-secondary: #122a12;
  --bg-panel: rgba(18, 42, 18, 0.92);
  --bg-tile: linear-gradient(145deg, #1a3e1a, #0d280d);
  --bg-tile-hover: linear-gradient(145deg, #2a5e2a, #1a3e1a);
  --bg-tile-selected: linear-gradient(145deg, #2ecc71, #1a8a4a);
  --bg-tile-matched: rgba(46, 204, 113, 0.15);
  --border-tile: #2a5e2a;
  --border-tile-hover: #2ecc71;
  --border-tile-selected: #58d68d;
  --text-primary: #d0ffe0;
  --text-secondary: #66aa88;
  --text-accent: #2ecc71;
  --accent-primary: #2ecc71;
  --accent-secondary: #a8e6cf;
  --accent-glow: rgba(46, 204, 113, 0.5);
  --shadow-tile: 0 4px 15px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.4);
  --btn-bg: linear-gradient(135deg, #2ecc71, #1a8a4a);
  --btn-hover: linear-gradient(135deg, #58d68d, #2ecc71);
  --btn-text: #ffffff;
  --overlay-bg: rgba(10, 26, 10, 0.85);
}

/* Midnight Galaxy */
[data-theme="midnight-galaxy"] {
  --bg-primary: #0d0d2b;
  --bg-secondary: #1a1a3e;
  --bg-panel: rgba(26, 26, 62, 0.92);
  --bg-tile: linear-gradient(145deg, #2a1a5e, #1a0d3e);
  --bg-tile-hover: linear-gradient(145deg, #3e2a7e, #2a1a5e);
  --bg-tile-selected: linear-gradient(145deg, #9b59b6, #6c3483);
  --bg-tile-matched: rgba(155, 89, 182, 0.15);
  --border-tile: #3e2a7e;
  --border-tile-hover: #9b59b6;
  --border-tile-selected: #bb8fce;
  --text-primary: #e8daf5;
  --text-secondary: #8a7ab5;
  --text-accent: #9b59b6;
  --accent-primary: #9b59b6;
  --accent-secondary: #f1c40f;
  --accent-glow: rgba(155, 89, 182, 0.5);
  --shadow-tile: 0 4px 15px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.5);
  --btn-bg: linear-gradient(135deg, #9b59b6, #6c3483);
  --btn-hover: linear-gradient(135deg, #bb8fce, #9b59b6);
  --btn-text: #ffffff;
  --overlay-bg: rgba(13, 13, 43, 0.85);
}