/* css/tokens.css — design tokens (custom properties) do Don Papão.
 * O dark mode é a referência visual: as variáveis abaixo são as cores de raiz.
 * O light mode (body.light-mode) só redefine estas variáveis — nenhum
 * componente precisa de selectores light-mode duplicados.
 */

:root {
  /* Fundos principais */
  --bg: #1a2418;
  --bg2: #222e20;

  /* Superfícies / cartões */
  --surface: #2a3628;
  --surface2: #323e30;

  /* Dourados / Amarelos elegantes */
  --gold: #d4a017;
  --gold2: #e8c040;

  /* Tons neutros */
  --cream: #f0ead6;
  --text: #f2efe8;
  --muted: #a8b0a0;

  /* Variáveis de Forma e Efeito (Premium) */
  --border: rgba(212, 160, 23, 0.25);
  --glass-blur: blur(12px);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;

  /* Cores de apoio */
  --red: #9b2c2c;
  --green: #4a6654;

  /* === Roles temáticos === */
  /* Estes mapeiam para os primitivos no dark, mas em light apontam para
   * tons distintos. Componentes referenciam APENAS estas variáveis para
   * que o light mode seja resolvido só por redefinição. */

  /* Logo (nav + footer) */
  --logo-fg: var(--gold);
  --logo-fg-italic: var(--gold2);

  /* Cabeçalhos "fortes" — gold no dark, preto no light */
  --heading-strong: var(--gold);
  /* Acento subtil que vai gold→cinza-escuro em light (event-time) */
  --accent-soft: var(--gold);
  /* Acento gold para utilities .dp-* — gold normal no dark, gold-escuro no light */
  --accent-gold: var(--gold);
  --accent-gold-border: rgba(212, 160, 23, 0.4);

  /* Preços */
  --price-fg: var(--gold);
  --price-size-fg: var(--muted);

  /* Nav */
  --nav-bg: rgba(26, 36, 24, 0.95);
  --nav-border: rgba(212, 160, 23, 0.15);
  --mobile-nav-bg: var(--surface);

  /* Footer */
  --footer-bg: transparent;
  --footer-fg: var(--muted);
  --footer-fg-strong: var(--gold);
  --footer-border: var(--border);

  /* Menu tabs e filtros */
  --tab-bg: var(--surface);
  --tab-fg: var(--muted);
  --tab-active-bg: var(--gold);
  --tab-active-fg: var(--bg);
  --tab-hover-bg: rgba(212, 160, 23, 0.1);
  --tab-hover-fg: var(--gold);

  /* Botões dourados */
  --btn-gold-bg: var(--gold);
  --btn-gold-fg: var(--bg);
  --btn-gold-fg-weight: 500;
  --btn-gold-hover-bg: var(--gold2);

  /* Hero — texto sobre foto, sempre claro mesmo em light mode */
  --hero-text-fg: var(--cream);
  --hero-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  --hero-text-weight: 500;
  --hero-em-fg: var(--gold);
  --hero-bg: var(--bg);

  /* Open/closed badge */
  --open-badge-bg-open: #22c55e;
  --open-badge-bg-closed: #ef4444;

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

  /* Botão flutuante "Verificar Reserva" */
  --verify-btn-bg: var(--surface2);
  --verify-btn-bg-hover: var(--surface);

  /* Rodízio highlight (gradient + border) */
  --rodizio-bg: linear-gradient(135deg, rgba(212, 160, 23, 0.08) 0%, rgba(63, 63, 63, 0.6) 100%);
  --rodizio-border: var(--gold);
}
/* As variáveis de light mode foram movidas para css/light-mode.css */