/* css/light-mode.css — todas as regras body.light-mode.
 * O dark mode é a referência visual (ver tokens.css para as variáveis base).
 * Aqui só se redefinem variáveis e ajustam opacidades/blend-modes para o
 * modo claro. Nenhum componente precisa de selectores light-mode duplicados
 * porque tudo deriva das custom properties.
 *
 * Regra: só body.light-mode { ... } e body.light-mode <selector> { ... }.
 */

/* ===== REDEFINIÇÃO DE VARIÁVEIS =====
 * Pura redefinição. Ver :root em tokens.css para documentação semântica.
 */
body.light-mode {
  /* Primitivos */
  --bg: #ede8dc;
  --bg2: #e5dfd0;
  --surface: #f9f6f0;
  --surface2: #ece7db;
  --cream: #0f0f0a;
  --text: #2a2a1a;
  --muted: #2a2a1a;
  --border: rgba(160, 120, 20, 0.35);
  --green: #2d6b3a;

  /* Logo */
  --logo-fg: #8a6200;
  --logo-fg-italic: #8a6200;

  /* Cabeçalhos e acentos — em light, "gold" textual vira escuro/preto */
  --heading-strong: #0f0f0a;
  --accent-soft: #2a2a1a;
  --accent-gold: #8a6200;
  --accent-gold-border: rgba(138, 98, 0, 0.45);

  /* Preços */
  --price-fg: #b8860b;
  --price-size-fg: #8a7040;

  /* Nav */
  --nav-bg: rgba(237, 232, 220, 0.98);
  --nav-border: rgba(160, 120, 20, 0.25);
  --mobile-nav-bg: #e5dfd0;

  /* Footer */
  --footer-bg: #d9cfc0;
  --footer-fg: #2a2a1a;
  --footer-fg-strong: #8a6200;
  --footer-border: rgba(100, 80, 0, 0.3);

  /* Tabs / filtros */
  --tab-bg: #f9f6f0;
  --tab-fg: #5a5a48;
  --tab-active-bg: #d4a017;
  --tab-active-fg: #fff;
  --tab-hover-bg: rgba(212, 160, 23, 0.1);
  --tab-hover-fg: #a87514;

  /* Botões dourados */
  --btn-gold-bg: #c9921d;
  --btn-gold-fg: #fff;
  --btn-gold-fg-weight: 600;
  --btn-gold-hover-bg: #a87514;

  /* Hero — texto sobre foto: a imagem é a mesma nos dois temas,
     portanto o texto mantém os valores resolvidos do dark mode. */
  --hero-text-fg: #f0ead6;
  --hero-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  --hero-text-weight: 500;
  --hero-em-fg: #d4a017;

  /* Open badge — verde mais escuro em light para legibilidade */
  --open-badge-bg-open: #1f7a37;

  /* Product modal */
  --modal-overlay-bg: rgba(0, 0, 0, 0.45);
  --modal-close-bg: rgba(0, 0, 0, 0.3);

  /* Verify button flutuante */
  --verify-btn-bg: #fff;
  --verify-btn-bg-hover: #f4ead0;

  /* Rodízio highlight */
  --rodizio-bg: linear-gradient(135deg, rgba(212, 160, 23, 0.12) 0%, rgba(212, 160, 23, 0.04) 100%);
  --rodizio-border: #8a6200;
}

/* Hero com o efeito (hero-gl): o fundo também fica claro, logo o texto escurece.
   Sem WebGL fica o hero clássico, com foto, e os valores acima. */
body.light-mode #hero.has-gl {
  --hero-text-fg: #2a2a1a;
  --hero-text-shadow: none;
  --hero-em-fg: #8a6200;
}

/* Product modal — fundo ligeiramente mais quente em light-mode,
   replicando o valor exacto da versão antiga (#f5f0e5). */
body.light-mode .product-modal { background: #f5f0e5; }

/* ===== RESERVAS OVERLAY (light-mode) ===== */
body.light-mode #reservas::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(237, 232, 220, 0.98) 20%, rgba(237, 232, 220, 0.4) 100%);
  z-index: -1;
  pointer-events: none;
  display: none;
}

body.light-mode #reservas.active::after {
  display: block;
}

/* ===== IMAGENS NO LIGHT MODE ===== */
body.light-mode #reservas::before,
body.light-mode #eventos::before {
  mix-blend-mode: normal;
  opacity: 0.55;
}

body.light-mode #sobre::before {
  opacity: 0.25;
}

/* Overlay claro na secção SOBRE em light mode para contraste com texto escuro */
body.light-mode #sobre::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(237, 232, 220, 0.85);
  z-index: -1;
  pointer-events: none;
  display: none;
}

body.light-mode #sobre.active::after {
  display: block;
}

/* ===== MOBILE: overlays mais leves para evitar retângulo pesado ===== */
@media (max-width: 700px) {
  body.light-mode #reservas::after {
    background: linear-gradient(to right, rgba(237, 232, 220, 0.85) 20%, rgba(237, 232, 220, 0.25) 100%);
  }
  body.light-mode #sobre::after {
    background: rgba(237, 232, 220, 0.6);
  }
}