/* tokens.css — só as variáveis do sistema. Nada de reset, nada de componente.

   Existe separado do marca.css por um motivo concreto: o painel
   (dashboard.html) precisa dos TOKENS, mas não pode receber os COMPONENTES.
   As duas folhas têm classes de mesmo nome e sentido oposto — `.selo`, no
   painel, é o selo 16x16 da rede (Instagram/LinkedIn/YouTube) e os ícones
   dentro dele pintam por `currentColor`; no sistema é um rótulo em caixa
   alta com `color` próprio. Herdar esse `color` pintaria os ícones de
   cinza-ardósia. O mesmo vale para `.btn`, que aqui é inline-flex.

   Fora de camada de propósito: quem linka isto e redefine um token no próprio
   <style> vence por ordem de origem, que é como o painel apelida os dele. */

:root{
  /* cor */
  --papel:#EEF1F6;
  --papel-alto:#FFFFFF;
  --tinta:#0B1220;
  --tinta-2:#46536B;
  /* 3o degrau de cinza no escuro. #66799A ficava em 3,95:1 sobre --painel e
     4,41:1 sobre --painel-2, e era usado em textos de 11 a 14px: reprova AA.
     Nao subimos para #9FB2CC porque ele ja ocupa o degrau de cima (8,04:1) e
     achatar os dois destruiria a hierarquia do instrumento. */
  --tinta-3:#768AA8;
  --fio:#D2DAE6;          /* regua decorativa: sem exigencia de contraste */
  /* Borda de CONTROLE (campo, botao vazado) precisa de 3:1 pelo 1.4.11 — e a
     borda e a unica coisa que torna esses controles visiveis. --fio dava 1,41:1. */
  --fio-forte:#7A8AA6;
  --painel:#0F1A2E;       /* instrumento embutido no papel */
  --painel-2:#070D18;     /* fundo interno do instrumento */
  --painel-3:#14223C;     /* linha entre registros do instrumento */
  /* Bordas e textos DENTRO do escuro. Existiam so como hex cru nas regras, e
     era isso que impedia o painel (dashboard.html) de se apoiar no sistema:
     nao havia token nenhum para o que ele mais usa, que e superficie escura. */
  --borda-escura:#24406A;
  --borda-escura-2:#1C2C48;
  /* Borda de CONTROLE no escuro (campo, botao). Separada da decorativa pelo
     mesmo motivo do --fio-forte no claro: o 1.4.11 exige 3:1 e a borda e a
     unica coisa que torna o controle visivel. As bordas navy escuras ficam
     em ~1,4:1 — o painel ja reprovava aqui com o cinza do GitHub (1,68:1). */
  --borda-controle:#4E77AB;
  --txt-claro:#E6EDF6;
  --txt-claro-2:#CFE0F5;
  --txt-claro-3:#9FB2CC;
  --ciano:#22D3EE;
  --teal:#0E7490;
  --ambar:#F5A623;
  --verde:#3ED598;
  --rosa:#FF6B8A;
  --roxo:#C79BFF;

  /* tipografia */
  --f-disp:'Saira Condensed','Arial Narrow',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;

  --t-hero:clamp(44px,7vw,92px);
  --t-h2:clamp(30px,4vw,46px);
  --t-h3:22px;
  --t-corpo:17px;
  --t-peq:14px;
  --t-dado:13px;
  --t-selo:12px;

  /* espaço, raio, sombra */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;
  --r-1:6px; --r-2:12px; --r-3:18px;
  --sombra:0 1px 2px rgba(11,18,32,.06), 0 12px 32px rgba(11,18,32,.08);
  --sombra-alta:0 24px 60px rgba(11,18,32,.22);

  --largura:1120px;
  color-scheme:light;
}