/* ==========================================================================
   Grão & Prosa — Estilos personalizados
   (o restante do layout é feito com classes do Tailwind no index.html)

   Índice:
   1. Variáveis de cor (tema claro e escuro)
   2. Base
   3. Componentes (botões, cards, abas)
   4. Seções (hero)
   5. Animações
   ========================================================================== */


/* 1. VARIÁVEIS DE COR
   -------------------------------------------------------------------------- */

/* Tema claro (padrão) */
:root {
  --bg:       #faf5ee;  /* fundo da página */
  --surface:  #ffffff;  /* cards e campos */
  --alt:      #f1e6d6;  /* seções alternadas */
  --text:     #2a1c12;  /* texto principal */
  --muted:    #6f5a4a;  /* texto secundário */
  --accent:   #b4531f;  /* cor de destaque */
  --accent-t: #ffffff;  /* texto sobre o destaque */
  --line:     #e3d3bf;  /* bordas */
  --dark:     #2a1c12;  /* seção escura */
  --dark-t:   #faf5ee;  /* texto da seção escura */

  /* Respeita as áreas seguras do celular (notch / barra inferior) */
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tema escuro automático (preferência do sistema),
   a menos que o usuário tenha escolhido "claro" no botão */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #17100b;
    --surface:  #221810;
    --alt:      #1e150e;
    --text:     #f3e8da;
    --muted:    #b7a28f;
    --accent:   #e0813f;
    --accent-t: #17100b;
    --line:     #3a2a1d;
    --dark:     #0f0a07;
    --dark-t:   #f3e8da;
  }
}

/* Tema escuro escolhido manualmente no botão */
:root[data-theme="dark"] {
  --bg:       #17100b;
  --surface:  #221810;
  --alt:      #1e150e;
  --text:     #f3e8da;
  --muted:    #b7a28f;
  --accent:   #e0813f;
  --accent-t: #17100b;
  --line:     #3a2a1d;
  --dark:     #0f0a07;
  --dark-t:   #f3e8da;
}


/* 2. BASE
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* Evita que o menu fixo cubra o título ao clicar nos links */
  scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

h1,
h2,
h3,
.serif {
  font-family: Fraunces, Georgia, serif;
}


/* 3. COMPONENTES
   -------------------------------------------------------------------------- */

/* Botões */
.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  transition: 0.2s;
}

.btn-p {                      /* botão principal */
  background: var(--accent);
  color: var(--accent-t);
}

.btn-p:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.btn-o {                      /* botão com contorno */
  border: 1.5px solid var(--text);
  color: var(--text);
}

.btn-o:hover {
  background: var(--text);
  color: var(--bg);
}

/* Card genérico */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
}

/* Abas do cardápio */
.tab {
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.tab.on {                     /* aba ativa */
  background: var(--accent);
  color: var(--accent-t);
  border-color: var(--accent);
}


/* 4. SEÇÕES
   -------------------------------------------------------------------------- */

/* Hero: brilho suave de cor no canto superior direito */
.hero {
  background:
    radial-gradient(
      1200px 500px at 80% -10%,
      color-mix(in srgb, var(--accent) 28%, transparent),
      transparent
    ),
    var(--bg);
}


/* 5. ANIMAÇÕES
   -------------------------------------------------------------------------- */

/* Elementos que aparecem ao rolar a página (ativado pelo JS) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: 0.7s;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* Acessibilidade: desativa movimento para quem prefere */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}