/* ==========================================================================
   base.css — tokens de design, reset e elementos globais.
   Carregado primeiro: layout.css e components.css dependem destas variáveis.

   Identidade escura — fiel à referência de template (fundo quase preto,
   textura de mármore/pedra, texto creme, acento dourado/tan; SEM vermelho
   como cor de marca — a referência não usa vermelho em nada). Os nomes das
   variáveis ficaram os mesmos de propósito (ex.: `--branco` agora é a cor
   de superfície dos cards, não mais um branco de verdade) — assim todo
   componente que já usava essas variáveis herda o tema novo automaticamente,
   sem precisar tocar em cada regra uma por uma. `--vermelho` continua
   existindo só para estado de erro/indisponível (convenção universal de UI,
   a referência não mostra esses estados pra eu copiar de lá).
   ========================================================================== */

:root {
  --preto: #0d0d0c;         /* fundo principal (hero, grid do cardápio) */
  --bege-claro: #0d0d0c;    /* alias histórico do fundo principal — mesmo valor de --preto */
  --branco: #17150f;        /* "superfície": cards, diálogos — bem próxima do fundo, quase sem caixa */
  --bege: #221f18;          /* superfície elevada (steppers, hover) */
  --bege-escuro: #39352b;   /* bordas/divisórias sutis */
  --marrom-texto: #f2e7d3;  /* texto principal — creme quente, como os títulos da referência */
  --marrom-suave: #a89f90;  /* texto secundário — cinza quente apagado */
  --vermelho: #9c1c2b;       /* só erro/indisponível — não é mais cor de marca */
  --vermelho-escuro: #6b1420;
  --vermelho-claro: #c23347;
  --dourado: #c9a876;        /* acento principal agora — botões, preço, estado ativo */
  --dourado-claro: #ddc59a;
  --preto-cha: #060605;     /* seções "mais fundas" (rodapé, faixa de destaque) */
  --sombra: rgba(0, 0, 0, 0.55);

  /* Cormorant Garamond (exibição) + Work Sans (interface) — ver design/brief-visual.md.
     Fallback robusto para fontes de sistema caso a fonte externa não carregue. */
  --fonte-serif: "Cormorant Garamond", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --fonte-sans: "Work Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --raio: 14px;
  --largura-max: 1160px;
  --espaco-secao: 3.5rem;
  --altura-topbar: 60px; /* usado por .cat-nav pra saber onde grudar embaixo da topbar */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* "proximity" (não "mandatory"): quando a rolagem para perto do início
     de uma categoria, ela se ajusta suavemente pro topo certo — mas sem
     "prender" o usuário lá se ele só estava passando por cima. */
  scroll-snap-type: y proximity;
  /* Barra de rolagem no tom do site em vez do cinza padrão do sistema
     operacional (Firefox). `::-webkit-scrollbar*` abaixo cobre o resto. */
  scrollbar-color: var(--bege-escuro) var(--preto-cha);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--preto-cha); }
::-webkit-scrollbar-thumb {
  background: var(--bege-escuro);
  border-radius: 999px;
  border: 2px solid var(--preto-cha);
}
::-webkit-scrollbar-thumb:hover { background: var(--dourado); }

/* Linha fina no topo que cresce com a rolagem da página (ver
   js/app.js → ativarBarraDeProgresso). Some sozinha quando a página não
   tem rolagem (largura 0%), então não precisa de `hidden` condicional. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--dourado), var(--dourado-claro));
  z-index: 90; /* acima da topbar (70) e do cat-nav (50) */
  transition: width 0.1s linear;
  pointer-events: none;
}

body {
  margin: 0;
  font-family: var(--fonte-sans);
  color: var(--marrom-texto);
  background-color: var(--preto);
  /* Textura tipo pedra/mármore escuro (grão via SVG de ruído embutido, sem
     imagem externa) — neutra e quente, sem tingir de vermelho, mais perto
     do fundo craquelado da referência do que a versão anterior. */
  background-image:
    radial-gradient(circle at 15% 8%, rgba(201, 168, 118, 0.07), transparent 45%),
    radial-gradient(circle at 88% 4%, rgba(242, 231, 211, 0.04), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.35), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0.9  0 0 0 0 0.85  0 0 0 0 0.75  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  /* Sem `background-attachment: fixed` de propósito — tem bug conhecido de
     jank em Safari mobile, e mobile é prioridade #1 aqui. */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--dourado);
  color: var(--preto);
  padding: 0.75rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Redução de movimento (regra global, componentes tratam a própria animação) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}