/* Os tokens do sistema antigo, sem o resto do landing.css — para as landings
   (/para/*, /sobre, /quanto-custa, as decisões), desde 06/10/2026.

   Essas páginas são inteiramente do sistema novo (assets/bv.css) e só
   herdavam do landing.css duas coisas: estes tokens, que o conteudo.css ainda
   usa (a prosa do markdown, os cartões dos textos relacionados, a pílula), e a
   base de elementos (títulos, parágrafo, imagem, link). Por isso elas
   carregavam 131 KB de folha — 40 KB comprimidos bloqueando o render, mais os
   9 KB do publico.css, que não desenha nada nelas — justamente nas páginas
   que os anúncios abrem. Quem escolhe esta folha no lugar daquelas duas é o
   parâmetro `legado: false` do views/publico/_cabeca.ejs.

   O bloco :root é CÓPIA do landing.css: mudou um token lá, muda aqui. O blog,
   o entrar e os documentos seguem no landing.css inteiro. */

:root {
  --noite: #0B1F3A;      /* o fundo da marca */
  --noite-2: #132B4D;    /* cartão sobre a noite */
  --papel: #F5F8FC;
  --branco: #FFFFFF;

  --tinta: #0B1F3A;
  --tinta-media: #1A3357;  /* o parágrafo-tese: preto que respira */
  --tinta-2: #3D4D66;
  --tinta-3: #4B5B73;      /* miúdo; 5,2:1 sobre o papel */

  --linha: #DCE5F0;
  --linha-2: #E6EEF8;      /* divisória interna, mais fraca */
  --linha-3: #C5D2E3;      /* borda de pílula e trilho da linha do tempo */

  --ouro-claro: #A3E3F3;   /* só sobre a noite */
  --ouro: #2563D9;         /* grafismo sobre o papel */
  --ouro-forte: #1557C7;   /* texto e link sobre o papel */
  --ouro-toque: #C9F0F9;   /* hover do botão de ouro */

  /* A única cor de fora da marca, e ela paga o que custa: é o verde daquele
     aplicativo, e é ele que diz para onde o botão leva antes de alguém ler o
     botão. O tom é mais fundo que o verde de tela do WhatsApp (#25D366, que
     sob texto branco dá 2,1:1) — em #0E7A4A o branco passa AA (5,1:1). */
  --zap: #0E7A4A;
  --zap-toque: #0B6740;

  /* Texto sobre a noite, em três forças. */
  --claro: #F5F8FC;
  --claro-2: rgba(245, 248, 252, .72);
  --claro-3: rgba(245, 248, 252, .58);

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 20px;
  --e6: 24px; --e7: 32px; --e8: 40px; --e9: 64px; --e10: 96px;

  --r-p: 8px; --r-m: 12px; --r-g: 16px; --r-gg: 20px; --r-ggg: 24px;
  --r-redondo: 999px;

  --margem: var(--e5);
  --secao: var(--e9);   /* respiro entre seções; vira --e10 no desktop */

  --f-titulo: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  /* Os dois que decidem o que o SISTEMA desenha dentro dos nossos controles.
     `color-scheme: light` porque não existe tema escuro: sem essa palavra, um
     telefone no modo escuro entrega o seletor de data, o popup do <select> e a
     caixa de marcar em preto no meio de uma página de papel. `accent-color`
     porque a marca de "marcado" é a mesma em toda parte — sem ela, todo rádio e
     todo checkbox sem regra própria sai no AZUL do sistema. */
  color-scheme: light;
  accent-color: var(--ouro-forte);

  --f-corpo: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* As duas curvas do movimento: a da casa (a mesma da inclinação do post) e a
     do pulo, com overshoot, para as coisas que "pousam". */
  --curva: cubic-bezier(.2, .7, .3, 1);
  --curva-pulo: cubic-bezier(.34, 1.56, .64, 1);
}


/* A base de elementos que o landing.css dava. O corpo, a caixa e o foco vêm
   do bv.css (`body.bv-pagina`), que carrega por último e vence onde coincide. */
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--ouro-forte); text-underline-offset: 3px; }
a:hover { color: var(--ouro); }
:focus-visible { outline: 2px solid var(--ouro-forte); outline-offset: 3px; border-radius: 2px; }