/* ============================================================
   tokens.css — design tokens · Caldinho e Hambúrguer Amarelinho
   (Maranguape I, Paulista-PE)

   Direção visual: "Boteco pioneiro". Amarelo e preto do emblema
   da casa (desde 1995), sobre um off-white quente de mesa de bar.
   Os nomes das variáveis seguem o molde do Seu Antônio para o
   style.css continuar igual: --cor-laranja é a cor primária
   (aqui, o amarelo) e --cor-marinho é a cor escura de apoio
   (aqui, o preto).
   ============================================================ */

:root {
  /* ---------- Cor ---------- */
  --cor-laranja:      #FFC400;   /* primária — amarelo do emblema */
  --cor-laranja-esc:  #E0A800;   /* hover / estados pressionados */
  --cor-kicker:       #7A5200;   /* rótulos pequenos sobre fundo claro (AA) */
  --cor-em:           #8F6100;   /* ênfase em títulos sobre fundo claro (AA grande) */
  --cor-em-clara:     #FFC400;   /* ênfase/kicker sobre fundo escuro */
  --cor-marinho:      #141414;   /* secundária — preto do emblema */
  --cor-marinho-esc:  #0B0B0B;
  --cor-limao:        #FFC400;
  --cor-terracota:    #D9480F;   /* apoio — brasa */

  --cor-tinta:        #17130A;   /* "preto" quente */
  --cor-tinta-70:     #50493B;
  --cor-fundo:        #FFFBF0;   /* off-white quente */
  --cor-fundo-2:      #FBF1D6;   /* alternância de seção */
  --cor-carta:        #FFFEFA;   /* fundo de cards */
  --cor-linha:        #EBDDB8;   /* divisórias suaves */

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

  /* ---------- Tipografia ---------- */
  --fonte-titulo: "Raleway", "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:   800;

  /* 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(23 19 10 / 0.08);
  --sombra-2: 0 10px 30px rgb(23 19 10 / 0.12);
  --sombra-3: 0 22px 55px rgb(23 19 10 / 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; }
}