/* ══════════════════════════════════════════════════════════════════════════
   Tokens do Essenti — o `:root` único.
   Extraído de `home.css` (item 6 do PLANO-VISUAL.md). Carregado ANTES de
   `home.css` e de `card.css`, na mesma posição relativa de sempre: era o
   primeiro bloco de `home.css`, então movê-lo para um arquivo anterior não
   muda um pixel. É a fonte de verdade da paleta VENICE, dos raios, do
   movimento e das sombras — as cinco cópias espalhadas nos HTML saem.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   Fallback com métrica casada — a correção do CLS 0,23 medido em 31/10.

   As três famílias chegam do Google Fonts em CSS assíncrono (`media="print"`
   trocado por JS). Entre a primeira pintura e a chegada do arquivo, o texto é
   desenhado com a fonte local e DEPOIS troca. A troca muda a largura e a
   altura de linha, o `<nav>` do header cresce, e tudo abaixo dele desce —
   medido com Playwright a 1350×940: 0,2244 de deslocamento em
   `div.container.hero-inner` + `nav.nav`, aos 3.005 ms.

   `size-adjust` faz o fallback ocupar a MESMA largura da fonte real;
   `ascent-override`/`descent-override` fazem a MESMA altura de linha. Com os
   dois iguais, a troca não move nada.

   Números medidos a 100 px (Playwright, 31/10):

     família            largura    altura de linha
     Plus Jakarta 500   1622,31    126
     Arial 500          1534,05    115
     Playfair 500       1023,91    133
     Georgia 500         988,75    114
     JetBrains Mono 500  600,00    132
     Consolas 500        549,81    117

   size-adjust = largura real / largura do fallback.
   ascent+descent = altura real / size-adjust.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Jakarta Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica');
  size-adjust:105.75%;
  ascent-override:95%;
  descent-override:24.15%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Playfair Fallback';
  src:local('Georgia'),local('Times New Roman');
  size-adjust:103.56%;
  ascent-override:103%;
  descent-override:25.4%;
  line-gap-override:0%;
}
@font-face{
  font-family:'JetBrains Fallback';
  src:local('Consolas'),local('Lucida Console'),local('Courier New');
  size-adjust:109.13%;
  ascent-override:95%;
  descent-override:26%;
  line-gap-override:0%;
}

:root{
  --font-brand:'Material Lettering','Playfair Display','Playfair Fallback',Georgia,serif;
  --font-serif:'Playfair Display','Playfair Fallback',Georgia,serif;
  --font-sans:'Plus Jakarta Sans','Jakarta Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-data:'JetBrains Mono','JetBrains Fallback',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── Paleta VENICE (Redesign_VENICE.MD §5.1) ─────────────────────────────
     Papel em vez de branco puro: branco é tela, a categoria é analógica.
     O verde migrou de #263D2E para #1A2A20 — mais escuro, mais perto de
     vidro de frasco. O vinho entra em dois pontos e só dois (o selo de
     desconto e o dot de "ao vivo"), porque é a única cor quente-saturada da
     página; acima de 5% da área o sistema colapsa. O ouro é filete, nunca
     preenchimento.

     `--ouro-texto` existe por medição, não por gosto: o #A8874F do documento
     dá 3,17:1 sobre o papel e reprova AA para texto pequeno — e o eyebrow em
     ouro é 0,68rem. A correção que o próprio documento guarda como plano B
     (#8E6F3C) ainda reprova, em 4,41:1. #856538 é o mesmo matiz escurecido
     até passar: 5,05:1. O #A8874F continua valendo para filete e ícone, que
     não têm piso de contraste. */
  --papel:#FBF8F1;--papel-2:#F3EDE1;--creme:#F4EFE4;
  --tinta:#131A15;--tinta-70:#4A544C;--tinta-55:#5C665C;
  --verde:#22372A;--verde-fundo:#1A2A20;
  --ouro:#A8874F;--ouro-claro:#C6A972;--ouro-texto:#856538;
  --vinho:#6B2233;
  --linha:rgba(19,26,21,.14);--linha-forte:rgba(19,26,21,.30);

  /* ── Aliases do sistema herdado ──────────────────────────────────────────
     O header, o rodapé e o `/guias` leem estes nomes (com fallback). Apontá-
     los para a paleta VENICE faz a superfície inteira migrar sem reescrever
     cada regra que já existe. */
  --bg-principal:var(--papel);--bg-secundario:var(--papel-2);
  --bg-card:var(--papel);--bg-card-subtle:var(--papel-2);
  --texto-principal:var(--tinta);--texto-secundario:var(--tinta-70);--texto-terciario:var(--tinta-55);
  --verde-principal:var(--verde);--verde-escuro:var(--verde-fundo);
  /* `--verde-medio` era #648267 (4,26:1 sobre branco, reprovava AA). #4A6B4D
     mantém o matiz e chega a 5,65:1 sobre o papel. */
  --verde-medio:#4A6B4D;
  /* `--verde-suave` saiu: valia ouro no VENICE e sálvia no legado — dois
     significados no mesmo nome. Quem quer o ouro dos guias usa `--ouro-claro`;
     quem quer a sálvia do legado usa `--verde-salvia-claro`. */
  --verde-salvia-claro:#EDEFE4;--verde-muito-claro:#E4E7DA;

  --leitura:#8A5A16;--leitura-bg:#FBF3E4;--leitura-borda:#E3C89A;
  --alerta:#8C2F2F;--alerta-bg:#FBF0F0;--alerta-borda:#E0B4B4;
  --confirma:#2E5B3C;--confirma-bg:#EDF4EE;--confirma-borda:#B9D3BE;

  --borda-suave:var(--linha);--borda-media:var(--linha-forte);--borda-foco:var(--verde);
  /* Sem sombra difusa (§4). A elevação do card é o `translateY`, não a sombra. */
  --sombra-card:none;--sombra-card-hover:none;--sombra-pill:none;
  /* Canto pequeno: "nada de canto arredondado grande" (§4). A pílula continua
     redonda — ela não é canto de caixa, é forma de chip. */
  --radius-sm:2px;--radius-md:4px;--radius-lg:5px;--radius-xl:8px;--radius-pill:9999px;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --t-fast:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}

/* ══ SKIP LINK ═══════════════════════════════════════════════════════════
   Vive aqui, e nao em `home.css`, porque esta e a unica folha que TODAS as
   paginas carregam. Medido em 01/11/2026: o link existia so na home; as
   outras nove paginas tinham <main> sem `id` e nenhum atalho, entao quem
   navega por Tab atravessava o cabecalho inteiro em cada pagina.

   Fora da tela ate receber foco. `top:-100px` em vez de `display:none`,
   porque elemento com `display:none` nao recebe foco e o link nunca
   apareceria. O `:focus` (nao `:focus-visible`) e de proposito: quem chega
   por Tab precisa ve-lo, e o Safari nao dispara `:focus-visible` em link. */
.skip-link{position:absolute;left:1rem;top:-100px;z-index:200;
  display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.25rem;
  background:var(--tinta);color:var(--creme);font-size:.85rem;font-weight:700;
  border-radius:0 0 var(--radius-md) var(--radius-md);text-decoration:none}
.skip-link:focus{top:0;outline:2px solid var(--ouro-claro);outline-offset:2px}
