/* OptiPlay — Variables de thème (inclus par toutes les pages) */

/* ── Thème Soleil (défaut) ── */
:root, [data-theme="sun"] {
  --bg: #f5f0ff;
  --primary: #7c3aed;
  --primary-light: #a78bfa;
  --accent: #f59e0b;
  --success: #10b981;
  --hot: #ec4899;
  --cyan: #06b6d4;
  --text: #18181b;
  --text-muted: #64748b;
  --glass: rgba(255,255,255,0.85);
  --glass-border: rgba(0,0,0,0.07);
  --radius: 16px;
  --navbar-bg: rgba(255,255,255,0.95);
  --navbar-border: rgba(0,0,0,0.08);
  --card-bg: #ffffff;
  --card-border: rgba(124,58,237,0.1);
  --score-bg: rgba(124,58,237,0.05);
  --score-border: rgba(124,58,237,0.12);
  --input-bg: #ede9fe;
  --input-border: rgba(124,58,237,0.25);
  --lb-entry-border: rgba(0,0,0,0.05);
  --footer-border: rgba(0,0,0,0.08);
  --tile-empty: rgba(0,0,0,0.06);
  --tile-border: rgba(0,0,0,0.15);
  --kb-key-bg: rgba(0,0,0,0.08);
  --overlay-bg: rgba(245,240,255,0.95);
  --canvas-bg: #f8f5ff;
  --canvas-grid: rgba(0,0,0,0.04);
}

/* ── Thème Sombre ── */
[data-theme="dark"] {
  --bg: #08080f;
  --primary: #7c3aed;
  --primary-light: #a78bfa;
  --accent: #f59e0b;
  --success: #10b981;
  --hot: #ec4899;
  --cyan: #06b6d4;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --glass: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.1);
  --radius: 16px;
  --navbar-bg: rgba(8,8,15,0.9);
  --navbar-border: rgba(255,255,255,0.08);
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.1);
  --score-bg: rgba(255,255,255,0.04);
  --score-border: rgba(255,255,255,0.08);
  --input-bg: rgba(255,255,255,0.05);
  --input-border: rgba(255,255,255,0.1);
  --lb-entry-border: rgba(255,255,255,0.04);
  --footer-border: rgba(255,255,255,0.08);
  --tile-empty: rgba(255,255,255,0.03);
  --tile-border: rgba(255,255,255,0.15);
  --kb-key-bg: rgba(255,255,255,0.1);
  --overlay-bg: rgba(8,8,15,0.92);
  --canvas-bg: #09090f;
  --canvas-grid: rgba(255,255,255,0.025);
}

/* ── Overrides globaux par thème ── */
[data-theme="sun"] body {
  background: linear-gradient(160deg, #fffbf0 0%, #f5f0ff 50%, #eff9ff 100%);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background: var(--bg);
}

/* Navbar */
.navbar {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border) !important;
}
[data-theme="sun"] .navbar {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Bouton thème */
.theme-toggle {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
[data-theme="sun"] .theme-toggle:hover {
  background: rgba(124,58,237,0.08);
  box-shadow: 0 0 12px rgba(124,58,237,0.15);
}
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255,255,255,0.1);
}