/* ============================================================
   Tema Odissey: paleta por variables (oscuro por defecto) + claro
   Se enlaza desde todas las páginas (index, tienda, admin, legales)
   ============================================================ */
:root {
  --od-marine-dark: #0f172a;
  --od-marine-medium: #1e293b;
  --od-marine-light: #334155;
  --od-marine-darker: #0a101e;
  --od-marine-accent: #eab308;
  --od-gold-light: #fde68a;
  --od-gold-dark: #b45309;
  --od-text-light: #f8fafc;
  --od-text-dark: #cbd5e1;
  --od-marine-darker-rgb: 10, 16, 30;
  --od-glass-rgb: 10, 16, 30;
  --od-border-rgb: 51, 65, 85;
  --od-shadow-rgb: 10, 16, 30;
  --od-ink: #0f172a;
  --od-always-light: #f8fafc;
  color-scheme: dark;
}

html.theme-light {
  --od-marine-dark: #f8fafc;
  --od-marine-medium: #eef2f7;
  --od-marine-light: #cbd5e1;
  --od-marine-darker: #e2e8f0;
  --od-marine-accent: #eab308;
  --od-gold-light: #b45309;
  --od-gold-dark: #92400e;
  --od-text-light: #0f172a;
  --od-text-dark: #475569;
  --od-marine-darker-rgb: 226, 232, 240;
  --od-glass-rgb: 226, 232, 240;
  --od-border-rgb: 148, 163, 184;
  --od-shadow-rgb: 10, 16, 30;
  --od-ink: #0f172a;
  --od-always-light: #f8fafc;
  color-scheme: light;
}

/* Transiciones suaves al cambiar de tema */
body,
.liquid-glass-container,
.modal-overlay,
.login-form-card,
.panel-card {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* En modo claro, texto oscuro legible sobre fondos dorados */
.theme-light .playerCount {
  color: var(--od-ink) !important;
}

/* Scrollbar coherente con el tema */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--od-marine-darker);
}
::-webkit-scrollbar-thumb {
  background: var(--od-marine-light);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--od-marine-accent);
}