/* ============================================================
   tokens.css — design tokens · Seu João Bar, Petiscaria e Hamburgueria

   Mesmo modelo do site do Seu Antônio, com as cores do logo do
   Seu João: círculo amarelo, contorno preto.
   ============================================================ */

@font-face { font-family: "Figtree"; src: url("../fonts/figtree-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* ---------- Cor ---------- */
  --cor-primaria:      #F3E42F;   /* amarelo do logo — botões e destaques (sempre com texto preto) */
  --cor-primaria-esc:  #E2D21A;   /* hover / estados pressionados */
  --cor-kicker:        #5A5000;   /* rótulos pequenos e links sobre fundo claro (AA) */
  --cor-em:            #8A7900;   /* ênfase sobre fundo claro */
  --cor-em-clara:      #F3E42F;   /* ênfase/kicker sobre fundo escuro */
  --cor-escura:        #16150D;   /* preto do contorno do logo — títulos e seções escuras */
  --cor-escura-2:      #0C0B06;
  --cor-destaque:      #FAF26B;   /* amarelo claro */
  --cor-apoio:         #C9A227;   /* mostarda — textura de fundo */

  --cor-tinta:        #1A180F;
  --cor-tinta-70:     #55513F;
  --cor-fundo:        #FFFDF3;   /* off-white puxado pro amarelo */
  --cor-fundo-2:      #FAF5D8;   /* alternância de seção */
  --cor-carta:        #FFFEF9;   /* fundo de cards */
  --cor-linha:        #EAE3B6;   /* divisórias suaves */

  --cor-sucesso:      #1FA463;   /* WhatsApp */
  --cor-sucesso-esc:  #17864F;

  /* ---------- Tipografia ---------- */
  --fonte-titulo: "Figtree", "Trebuchet MS", system-ui, sans-serif;
  --fonte-corpo:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --peso-corpo:   400;
  --peso-medio:   500;
  --peso-forte:   700;
  --peso-black:   700;   /* a Figtree local vai até 700 */

  /* escala fluida */
  --fs-kicker:  clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-corpo:   clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  --fs-corpo-g: clamp(1.12rem, 1.05rem + 0.4vw, 1.3rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h2:      clamp(1.9rem, 1.5rem + 2vw, 3.1rem);
  --fs-h1:      clamp(2.4rem, 1.9rem + 3vw, 4.1rem);
  --fs-mega:    clamp(3.4rem, 2rem + 7vw, 7rem);

  /* ---------- Espaço ---------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;
  --e-9: 7rem;

  --gutter: clamp(1.15rem, 5vw, 4rem);
  --largura-max: 1200px;
  --largura-texto: 62ch;

  /* ---------- Forma ---------- */
  --raio-sm: 6px;
  --raio-md: 8px;
  --raio-lg: 16px;
  --raio-pill: 999px;

  --sombra-1: 0 2px 8px rgb(26 24 15 / 0.08);
  --sombra-2: 0 10px 30px rgb(26 24 15 / 0.12);
  --sombra-3: 0 22px 55px rgb(26 24 15 / 0.20);

  /* ---------- Movimento ---------- */
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-saida: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-rapida: 0.18s;
  --dur-media: 0.35s;
  --dur-lenta: 0.6s;

  --header-h: 76px;
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
}