:root {
  /* ===== Tokens de design — fonte única da paleta e da tipografia =====
     Os valores vêm do protótipo do redesign (branch `prototype/redesign-vitrine`,
     `prototipo/proto.html`), que nasce do verde do logo. Componente nenhum escreve
     cor da paleta à mão: quem precisa de uma cor consome um token daqui.

     Esta folha é carregada ANTES da folha de cada superfície, e é a única que
     declara paleta, família, sombra e curva. Superfície que redeclara um nome
     daqui na própria folha ganha a disputa em silêncio e cria o segundo
     vocabulário — `site/tokens.test.mjs` falha se isso voltar a acontecer. */

  /* superfícies, do topo da página para o fundo do cartão */
  --green: #415240;          /* verde do logo — fundo da página e do cabeçalho */
  --green-high: #4a5b49;     /* superfície elevada: hover, faixa, controle */
  --green-deep: #2e3b2d;     /* cartão, gaveta, painel */
  --green-darkest: #232d22;  /* rodapé, dropdown, fundo de mídia */

  /* destaque */
  --gold: #c8a46d;
  --gold-light: #e3c89a;     /* foco e hover do dourado */
  --gold-dark: #a08a5e;      /* dourado apagado: a seta do menu e o "voltar" da gaveta */

  /* texto */
  --text: #f2efe8;           /* sobre verde */
  --text-soft: #c3cec1;      /* secundário, sobre verde */
  --ink: #1e241d;            /* sobre dourado ou sobre foto clara */

  /* traços e véus */
  --line: rgba(200, 164, 109, 0.26);
  --line-strong: rgba(200, 164, 109, 0.46);
  --wash: rgba(200, 164, 109, 0.08);
  /* Véu do dourado para quando o TEXTO por cima também é dourado (o badge de
     "Enviado" e o de "Entregue"). O --wash não serve nesse par: ele clareia a
     superfície e derruba o --gold para 4,40:1 sobre o --green-deep, abaixo dos
     4,5:1 do WCAG AA. Este é um dourado FUNDO em alfa maior — tinge igual e
     escurece, e o mesmo par sobe para 4,64:1. */
  --gold-wash: rgba(107, 85, 47, 0.18);
  /* Véu escuro por trás da folha de Filtrar/Ordenar, e SÓ dela — daí o nome com o
     componente. O véu do menu (`.nav-backdrop`, no `styles.css`) é verde e tem valor
     próprio: a divergência é anterior ao token (#222), e unificar os dois muda pixel na
     loja — decisão de desenho, não de vocabulário, que o #328 deixou de fora de propósito.
     Este aqui é o escuro das duas sombras, e fica em `rgba()` literal como os outros véus
     da paleta: `color-mix()` ou cor relativa derivariam de um token que não existe (canal
     nenhum da paleta é este), e ainda imporiam piso de navegador a uma folha que hoje não
     tem nenhum. */
  --sheet-scrim: rgba(20, 26, 19, 0.62);

  /* estados (não fazem parte da marca: existem para serem lidos de longe) */
  /* ⚠️ Os dois foram CLAREADOS no ADR 0022, e o motivo não é estética: como TEXTO
     sobre o --green da página eles davam 4,19:1 (âmbar) e 3,83:1 (vermelho),
     abaixo dos 4,5:1 do WCAG AA. A loja já os usava assim — a mensagem de erro do
     checkout e o bloco de cancelamento da Área do Cliente —, e ninguém tinha
     medido porque o guarda de contraste só varre a folha do painel. Hoje dão
     4,81:1 sobre o --green e mais em qualquer superfície elevada. Escurecê-los de
     volta devolve o defeito à tela que mais precisa ser lida: a de quem travou na
     compra. */
  --warn: #e6bf70;
  --warn-wash: rgba(168, 124, 40, 0.16);
  --danger: #e8baaf;
  --danger-wash: rgba(168, 57, 44, 0.14);
  --danger-strong: #a8392c;  /* vermelho cheio: a flag "Esgotado" sobre a foto */
  --success: #8fd1a6;
  --success-wash: rgba(122, 180, 140, 0.15);
  --whatsapp: #25d366;

  --shadow: 0 18px 42px rgba(20, 26, 19, 0.28);
  --shadow-deep: 0 28px 68px rgba(20, 26, 19, 0.42);
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* Uma família só, servida pelo Google Fonts. A CSP já autoriza
     `fonts.googleapis.com` em style-src e `fonts.gstatic.com` em font-src. */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}