/* =====================================================================
   tokens.css — base de landing page da casa (Arkad)
   Canônico: /srv/workspace/downloads/_lp-base/tokens.css
   ---------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE
   O mesmo sistema de ritmo vertical e de trim óptico já estava copiado à
   mão em três páginas (aeroclube-lp/v2, aeroclube-webinario e agora a
   Line). Copiado, ele não é um sistema, é três cópias que divergem no dia
   em que alguém ajusta uma só. Aqui fica o que é ESTRUTURAL, isto é, o que
   não muda de cliente para cliente.

   O QUE ENTRA AQUI
     - ritmo vertical (o vão entre seções, entre título e conteúdo)
     - trim óptico (a compensação de caixa de linha, por família de fonte)
     - forma (raio de canto, largura máxima do container)
   O QUE NÃO ENTRA AQUI
     - cor. Cor é marca, muda a cada cliente, e vive no :root da página.
     - tipo. A escolha da família é da marca; aqui só ficam as CONSTANTES
       métricas das famílias que a casa já serve, medidas nos arquivos.
     - conteúdo, layout, componente. Isto é token, não folha de estilo.

   COMO USAR
     <link rel="stylesheet" href="assets/tokens.css" />   (cópia local)
     e logo em seguida o <style> da página, que declara as cores e pode
     sobrescrever qualquer token daqui. Cascata: base primeiro, marca depois.

   🔴 SOBRE A CÓPIA LOCAL
   A página publicada serve só a própria pasta, então um caminho ../ para
   cá quebraria no ar. Cada página leva uma CÓPIA em assets/tokens.css.
   A cópia é gerada deste arquivo e nunca editada no lugar: o harness da
   página compara o sha256 das duas e reprova se divergirem. Mudou o
   sistema? Muda aqui, copia de novo, roda o harness.

   ⚠️ NÃO MIGREI as duas páginas do Aeroclube para cá. Elas estão no ar e a
   migração é decisão da Aurora, depois. Este arquivo nasceu para a Line.

   COMPANHEIROS OBRIGATÓRIOS QUE NÃO CABEM EM CSS
   1. Shim de prefers-reduced-motion como PRIMEIRO filho do <head>. O Chefe
      navega com "reduzir movimento" ligado no PC. Sem o shim ele não vê
      animação nenhuma e conclui que a página está quebrada. CSS não
      contorna isso, só JS, e só se rodar antes de tudo.
   2. <meta name="viewport" ... viewport-fit=cover> mais os
      env(safe-area-inset-*) no container, por causa do notch.
   3. Piso de largura suportada: 360px. Abaixo disso a página degrada, mas
      nunca gera rolagem horizontal.
   ===================================================================== */

:root{

  /* ===== Forma ===== */
  --radius:18px;
  --maxw:1180px;

  /* ===== Escala de ritmo vertical =====
     --gap-sec  : vão entre duas seções vizinhas, o valor que o olho lê.
     --pad-sec  : metade do vão. Cada seção paga a sua metade, então duas
                  vizinhas somam exatamente --gap-sec e nunca o dobro.
                  Serve também de recuo interno quando a seção tem fundo.
     --gap-head : fim do bloco de título até o conteúdo da seção.
     --gap-eyebrow : respiro entre o rótulo e o h2, DERIVADO do --gap-head,
                  para o respiro de dentro do bloco de título ficar sempre
                  menor que o vão que fecha o bloco, e para o celular
                  acompanhar sozinho quando o --gap-head cai.
                  Régua de validade, nenhum lado em pixel absoluto:
                  o vão fica entre 1,0 e 1,4 vezes o --fs-eyebrow e nunca
                  passa de 0,72 vezes o --gap-head. Abaixo de 1,0 o rótulo
                  cola no título; acima de 1,4 ele compete com o vão que
                  fecha o bloco e o título deixa de ler como uma unidade.
                  Hoje: desktop 22,4/16,80 = 1,33 e 22,4/32 = 0,70;
                        celular 16,8/15,20 = 1,11 e 16,8/24 = 0,70.
     --gap-h2   : respiro do h2 para a linha de apoio.
     --fs-eyebrow : corpo do rótulo. Vive aqui e não no seletor porque o
                  ajuste é de escala, não de seção, e o trim abaixo é em em,
                  então cresce junto e os vãos de tinta continuam batendo. */
  --gap-sec:56px;
  --pad-sec:calc(var(--gap-sec) / 2);
  --gap-head:32px;
  --gap-eyebrow:calc(var(--gap-head) * .7);
  --gap-h2:14px;
  --fs-eyebrow:1.05rem;

  /* ===== Compensação óptica (trim) =====
     Os vãos acima são de CAIXA. O olho não lê caixa, lê TINTA. Entre a
     borda da caixa de linha e a tinta sobra espaço vazio: meia entrelinha
     em cima e embaixo, mais a parte do ascendente acima da caixa alta no
     topo, e o descendente abaixo da linha de base na saída. É essa sobra
     que faz um vão nominal de 64px medir de 69 a 79px de tinta, dobra a
     dobra, se ninguém descontar.

     Fórmula, com Lh = entrelinha do elemento e Ext = asc + desc:
       trim de topo  = (Lh - Ext)/2 + (asc - cap)
       trim de base  = (Lh - Ext)/2 + desc
     O resultado sai em em, então a constante serve para qualquer corpo:
     quem multiplica é o font-size do próprio elemento. Não existe valor
     mágico por seletor, existe uma constante por par (família, entrelinha).

     Uso: margem NEGATIVA do trim para colar a tinta no vão nominal.
       .eyebrow{ margin-top:calc(-1 * var(--in16-t)) }
       h2{ margin:calc(var(--gap-eyebrow) - var(--sg115-t)) 0 ... }

     ===== métricas lidas dos arquivos servidos, não de memória =====
       Inter          upem 2048 · hhea 1984/-494 · sCapHeight 1490
                      asc .9687500 · desc .2412109 · cap .7275391
       Space Grotesk  upem 1000 · hhea  984/-292 · sCapHeight  700
                      asc .9840000 · desc .2920000 · cap .7000000
       Anton          upem 2048 · hhea 2409/-674 · sCapHeight 1760
                      asc 1.1762695 · desc .3291016 · cap .8593750
     Nas três, hhea == OS/2 typo e o bit USE_TYPO_METRICS está ligado, então
     Chrome, Firefox e Safari montam a caixa de texto com o mesmo par.

     ⚠️ Anton tem Ext = 1,5054, maior que qualquer entrelinha razoável para
     display. Os trims dela dão POSITIVO pequeno ou negativo, e isso está
     certo: a caixa de linha é menor que o extent da fonte, a tinta
     transborda a caixa. Quem for adicionar família nova mede o arquivo,
     não copia constante de outra.

     PARA ADICIONAR UMA FAMÍLIA: leia upem, hhea asc/desc e sCapHeight do
     arquivo que a página REALMENTE serve, escreva o trio --ext/--over/
     --under e derive só as entrelinhas que a página usa. */

  /* Inter (topo e base coincidem: asc-cap == desc nesta fonte) */
  --ext-in:1.2099609; --over-in:.2412109; --under-in:.2412109;
  --in16-t:calc((1.60 - var(--ext-in)) * .5em + var(--over-in)  * 1em);
  --in16-b:calc((1.60 - var(--ext-in)) * .5em + var(--under-in) * 1em);
  --in15-t:calc((1.50 - var(--ext-in)) * .5em + var(--over-in)  * 1em);
  --in15-b:calc((1.50 - var(--ext-in)) * .5em + var(--under-in) * 1em);
  --in14-t:calc((1.40 - var(--ext-in)) * .5em + var(--over-in)  * 1em);
  --in14-b:calc((1.40 - var(--ext-in)) * .5em + var(--under-in) * 1em);
  --in135-t:calc((1.35 - var(--ext-in)) * .5em + var(--over-in)  * 1em);
  --in135-b:calc((1.35 - var(--ext-in)) * .5em + var(--under-in) * 1em);
  --in125-t:calc((1.25 - var(--ext-in)) * .5em + var(--over-in)  * 1em);
  --in125-b:calc((1.25 - var(--ext-in)) * .5em + var(--under-in) * 1em);

  /* Space Grotesk (usada nas páginas do Aeroclube, fica aqui para quando
     elas migrarem; a Line não carrega esta família) */
  --ext-sg:1.2760000; --over-sg:.2840000; --under-sg:.2920000;
  --sg16-t:calc((1.60 - var(--ext-sg)) * .5em + var(--over-sg)  * 1em);
  --sg16-b:calc((1.60 - var(--ext-sg)) * .5em + var(--under-sg) * 1em);
  --sg115-t:calc((1.15 - var(--ext-sg)) * .5em + var(--over-sg)  * 1em);
  --sg115-b:calc((1.15 - var(--ext-sg)) * .5em + var(--under-sg) * 1em);
  --sg116-t:calc((1.16 - var(--ext-sg)) * .5em + var(--over-sg)  * 1em);
  --sg116-b:calc((1.16 - var(--ext-sg)) * .5em + var(--under-sg) * 1em);
  --sg120-t:calc((1.20 - var(--ext-sg)) * .5em + var(--over-sg)  * 1em);
  --sg120-b:calc((1.20 - var(--ext-sg)) * .5em + var(--under-sg) * 1em);

  /* Anton (display condensado pesado) */
  --ext-an:1.5053711; --over-an:.3168945; --under-an:.3291016;
  --an092-t:calc((0.92 - var(--ext-an)) * .5em + var(--over-an)  * 1em);
  --an092-b:calc((0.92 - var(--ext-an)) * .5em + var(--under-an) * 1em);
  --an100-t:calc((1.00 - var(--ext-an)) * .5em + var(--over-an)  * 1em);
  --an100-b:calc((1.00 - var(--ext-an)) * .5em + var(--under-an) * 1em);
  --an112-t:calc((1.12 - var(--ext-an)) * .5em + var(--over-an)  * 1em);
  --an112-b:calc((1.12 - var(--ext-an)) * .5em + var(--under-an) * 1em);

  /* ===== Trim de ACENTO, só faz falta em display de caixa alta =====
     A fórmula de cima mede da CAIXA ALTA até a linha de base. Em texto de
     corpo isso basta. Em display de caixa alta em português, não: o acento
     sobe acima da caixa alta e a cedilha desce abaixo da linha de base, e é
     ELE que encosta na linha vizinha, não a caixa alta.
     Descoberto numa prova visual da LP da Line: "INDICAÇÃO." em Anton a
     108px invadia 12,9px a linha de cima com o til do Ã e 23px a linha de
     baixo com a cedilha do Ç, com o trim de caixa alta aplicado direitinho.

     Extremos lidos no glyf da própria Anton servida (yMax e yMin contra
     sCapHeight 1760, upem 2048):
       Á Ó Ê  yMax 2254  ->  .2412 em acima da caixa alta   (pior caso)
       Ã      yMax 2195  ->  .2124 em
       Ç      yMin -631  ->  .3081 em abaixo da linha de base
       ,      yMin -235  ->  .1147 em
     As constantes são o PIOR CASO da família, de propósito: o token não
     pode depender de quais letras a copy tem hoje. Trocar "INDICAÇÃO" por
     "CRESCIMENTO" não pode reabrir uma colisão.
     Efeito colateral aceito: num bloco sem acento nenhum o vão de tinta sai
     MAIOR que o nominal, nunca menor. Errar para o lado do respiro. */
  --acc-an:.2412;  /* acento acima da caixa alta */
  --ced-an:.3081;  /* cedilha abaixo da linha de base */
  --vir-an:.1147;  /* vírgula abaixo da linha de base */
  --an092-t-ac:calc(var(--an092-t) - var(--acc-an) * 1em);
  --an092-b-ce:calc(var(--an092-b) - var(--ced-an) * 1em);
  --an100-b-vi:calc(var(--an100-b) - var(--vir-an) * 1em);
  --an112-t-ac:calc(var(--an112-t) - var(--acc-an) * 1em);
  --an112-b-ce:calc(var(--an112-b) - var(--ced-an) * 1em);

  /* Folga entre duas linhas de um mesmo bloco em Anton, em em:
       folga = entrelinha - (caixa alta) = Lh - .8594
     Para uma linha quebrada que COMECE com acento, a folga precisa cobrir
     o --acc-an. Daí a entrelinha 1,12 nos títulos que podem quebrar:
       1,12 - .8594 = .2606 em  contra  .2412 em de acento. Sobra .0194 em.
     A 0,92 a folga é .0606 em e NÃO cobre acento: aquela entrelinha só
     serve para bloco de uma linha só, comprovada por medição de hmtx. */
}

/* Celular: a escala inteira cai junto. A página pode sobrescrever depois,
   mas o padrão da casa é este. */
@media(max-width:640px){
  :root{
    --gap-sec:42px;
    --gap-head:24px;
    --fs-eyebrow:.95rem;
  }
}
