/* Seu Chips — tokens do design system (v2, 2026-10-12)
   Fonte: docs/design/2026-10-10-direcao-visual.md (§paleta revisada em 12/10). As cores da marca vieram do Ton em 12/10
   (marrom #b2967d, azul #6894a5, marrom escuro #160a02) e foram conferidas no mascote e no logotipo novos; as das pedras
   seguem medidas nos pôsteres da Coleção STONES e no cardápio.
   Regra: nenhum hex fora deste arquivo. Nova cor = novo token aqui, com contraste medido (tools/check-site.py, check 2). */
:root {
  /* Marca (12/10): o traço grosso escuro do mascote e do logotipo é a linguagem; botão e cartão levam contorno e sombra dura */
  --marrom: #b2967d;          /* fundo da marca: hero, nav, /pedido/, 404. Só --marrom-escuro passa como texto sobre ele (7,0:1) */
  --marrom-escuro: #160a02;   /* tinta e contorno; rodapé, resumo, item da sacola, sombras duras */
  --marrom-meio: #5a4e48;     /* o "Chips" do logotipo: hover do botão escuro, texto suave sobre papel (6,0:1). Nunca texto sobre --marrom (2,9:1) */
  --azul: #6894a5;            /* azul do Ton: CTA e formas, sempre com tinta --marrom-escuro (5,9:1). Nunca como texto: 1,2:1 sobre --marrom */
  --azul-escuro: #2a4e4e;     /* chapéu do mascote: links, ícones e foco sobre papel (6,9:1); número de etapa (texto grande) sobre --marrom (3,3:1) */
  --azul-claro: #78b4cc;      /* brilho do chapéu: texto de apoio, hover e foco sobre --marrom-escuro (8,5:1). Nunca sobre --marrom (1,2:1) */
  --massa: #cca272;           /* cookie do mascote: assinatura do rodapé (8,3:1 sobre --marrom-escuro) */
  --chip: #424242;            /* gota do mascote: bordas e divisores sobre papel (7,6:1) */
  --whatsapp: #25d366;        /* cor do WhatsApp: só fundo do botão flutuante e ícone; sobre ele a tinta é --marrom-escuro (9,8:1) */

  /* Papel (pôsteres e cardápio) */
  --papel: #eedebc;
  --papel-claro: #f6ecd6;
  --papel-escuro: #dcc49a;

  /* Pedras */
  --onyx: #0e0e0e;
  --onyx-tinta: #cabeb1;
  --onyx-brilho: #f3efeb;
  --ambar-fundo: #e4c895;
  --ambar: #cf9a5d;
  --ambar-tinta: #463424;
  --ruby-fundo: #320706;
  --ruby: #8d3636;
  --ruby-vivo: #5f0f0f;
  --ruby-brilho: #f5ecdd;

  /* Texto por fundo (hex literal onde o gate mede contraste) */
  --tinta-sobre-marrom: var(--marrom-escuro);
  --tinta-sobre-escuro: var(--papel-claro);
  --tinta-sobre-papel: #160a02;          /* = --marrom-escuro (14,7:1 sobre --papel) */
  --tinta-sobre-papel-suave: #5a4e48;    /* = --marrom-meio (6,0:1 sobre --papel) */

  /* Tipografia */
  --fonte-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-1: clamp(2.6rem, 6vw, 5.5rem);
  --t-2: clamp(2rem, 3.6vw, 3.25rem);
  --t-3: 1.6rem;
  --t-4: 1.25rem;
  --t-0: 1.0625rem;
  --t-s: 0.9rem;
  --lh-corpo: 1.55;
  --lh-titulo: 1.05;
  --medida: 68ch;

  /* Forma */
  --raio-pill: 999px;
  --raio-caixa: 14px;
  --raio-s: 6px;
  --borda: 1.5px;
  --contorno: 2px;                           /* o traço do mascote, em botão e cartão */

  /* Espaço (base 8) */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-6: 3rem;
  --e-8: 4rem;
  --e-12: 6rem;
  --gutter: 24px;
  --max: 1200px;

  /* Elevação: sombra dura da tinta, nunca cinza difusa */
  --sombra-caixa: 0 10px 0 0 var(--marrom-escuro);
  --sombra-cartao: 0 6px 0 0 rgba(22, 10, 2, 0.18);
  --sombra-botao: 0 4px 0 0 var(--marrom-escuro);
  /* Rodada 11: sombra difusa do cookie recortado sobre a textura do pôster (a única difusa do site) */
  --sombra-cookie: 0 22px 26px rgba(14, 14, 14, 0.42);
  --sombra-cookie-papel: 0 18px 22px rgba(70, 52, 36, 0.32);

  /* Movimento */
  --ms: 1;                                   /* escala global; 0 desliga */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pouso: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-curta: calc(0.18s * var(--ms));
  --dur-media: calc(0.45s * var(--ms));
  --dur-longa: calc(0.9s * var(--ms));
}

@media (prefers-reduced-motion: reduce) {
  :root { --ms: 0; }
}

/* pi, rodada 4: Classic, medido no cardápio da cliente */
:root {
  --classic-fundo: #f5ecdd;
  --classic: #8c6a55;         /* 4,16:1 sobre --classic-fundo: só decorativo aqui, nunca texto pequeno */
  --classic-massa: #d7b372;   /* idem: só preenchimento de forma */
  --classic-tinta: #4a3528;   /* 9,79:1 sobre --classic-fundo */
}