/* ============================================================
   BRAND — fonte ÚNICA da identidade (multi-tenant).
   Tokens de cor, tipografia, raio, sombra e a marca (taça).
   Incluído pelos 3 apps (index/vitrine/portal). Regra: mexeu em
   cor/serif/logo da marca? Mude AQUI, nunca duplicar nos HTMLs.

   Cor da MARCA é sempre daqui. Cada app pode ter só tokens de
   SUPERFÍCIE próprios: a vitrine/portal usam a pele "storefront"
   (branco limpo) definida abaixo; o app de gestão mantém a própria
   pele (off-white, ergonômica p/ uso longo) no seu próprio :root
   (que sobrescreve estes por vir depois na cascata) — de propósito.
   ============================================================ */
:root{
  /* vinho (a marca) */
  --accent:#7A2E3C; --accent-deep:#5C1F2C; --accent-soft:#F7EBED; --on-accent:#FFF6F4; --cream:#FBF7F5;
  /* superfície storefront (branco limpo) */
  --ground:#FFFFFF; --surface:#FFFFFF; --surface2:#F6F2F0; --ink:#241A1B; --ink-soft:#6E5F62; --line:#ECE5E1;
  /* status */
  /* --ok escurecido de #2E7D4F para #276E44: o chip "Pago"/"Entregue em" saía em 4,20:1 (reprova o
     mínimo AA de 4,5) e agora dá 5,14:1. É a informação que o cliente entra no portal para conferir. */
  --ok:#276E44; --warn:#8C5E0E; --wa:#25D366;
  /* forma */
  --radius:16px;
  --shadow:0 14px 42px rgba(58,20,29,.10); --shadow-sm:0 2px 10px rgba(58,20,29,.06);
}
/* escuro OPT-IN (só com data-tema="escuro"; o storefront é claro por padrão) */
:root[data-tema="escuro"]{
  --accent:#E6AEB7; --accent-deep:#F0C6CC; --accent-soft:#3A252A; --on-accent:#1F1012; --cream:#F7ECEA;
  --ground:#141013; --surface:#1D171A; --surface2:#271F22; --ink:#F2EAE8; --ink-soft:#B3A4A6; --line:#342A2D;
  /* o --ok FALTAVA aqui: o bloco escuro redefinia --warn e esquecia o verde, então o tom do tema claro
     ia pintado sobre superfície quase preta. #7CC79A não é hex novo no projeto — já é o verde escuro do
     index.html, o que mantém os 3 apps no mesmo tom. Dá 7,80:1 no chip. */
  --ok:#7CC79A; --warn:#E0B15F;
  --shadow:0 18px 46px rgba(0,0,0,.5); --shadow-sm:0 2px 10px rgba(0,0,0,.3);
}
/* tipografia editorial — o display face da marca (Fraunces é carregada por cada HTML) */
.serif{font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:500}
/* marca — símbolo da taça CHAPADO, herda o vinho (var(--accent)); usar <svg class="brandmark">…</svg> com fill="currentColor" */
.brandmark{color:var(--accent); fill:currentColor}
/* App Check reCAPTCHA v3: esconde o selo do Google (a atribuição obrigatória vira a linha discreta .recaptcha-attr, injetada no rodapé pelos 3 apps).
   MEDIDO ao vivo (2026-07-30): o selo fica com visibility:hidden E área ZERO (rect 0,0,0,0) — não recebe
   toque nenhum, então pointer-events:none nele seria linha morta. O problema real era a ATRIBUIÇÃO. */
.grecaptcha-badge{visibility:hidden !important}
/* Sem opacity: o token --ink-soft dá 6,04:1 sobre branco, mas o opacity:.72 que estava aqui derrubava
   para 3,26:1 — abaixo do mínimo AA de 4,5:1 (medido no navegador). O verificar-marca.ps1 validava o
   TOKEN e passava, porque não olhava a opacidade aplicada em cima. Discrição agora vem do tamanho da
   fonte, não de apagar o texto.
   --attr-lift: gancho para a atribuição SUBIR quando o app tem barra fixa no pé (a barra do carrinho da
   vitrine, z-index 30, cobria esta linha inteira justamente no checkout). Cada app define o valor. */
/* ⚠️ SEM transition no `bottom`. Eu tinha posto `transition:bottom .2s` aqui e MEDI o resultado: um
   `bottom` que depende de custom property NÃO REGISTRADA fica LATCHED com transition ligada — travava
   no primeiro valor e não voltava, nos dois sentidos (conferido no ar: com transition, 110px fixo;
   sem transition, 6px ↔ 110px certinho). Deslizar era enfeite; a atribuição aparecer, não é. */
.recaptcha-attr{position:fixed;left:8px;bottom:calc(6px + var(--attr-lift, 0px));z-index:45;font-size:11px;line-height:1.2;color:var(--ink-soft)}
/* inline-block + padding: os links tinham 15px de altura, abaixo do alvo mínimo de 24px (WCAG 2.5.8 AA) */
.recaptcha-attr a{color:inherit;text-decoration:underline;display:inline-block;padding:5px 3px;min-height:24px;box-sizing:border-box}