/**
 * Tokens de design — a única fonte de verdade para cor, forma, espaço e ritmo.
 * Nenhum componente inventa valor: todos consomem daqui. Este bloco é a
 * referência de QUAL token usar, grupo por grupo.
 *
 * Linguagem visual: a marca SPENT — flat, tipografia pesada, alto contraste.
 * Amarelo + preto sobre azul é a gramática do logo; o azul da marca NUNCA
 * carrega texto branco (contraste 2.49:1, reprova) — sempre tinta escura.
 * Superfícies claras se separam por BORDA, não por sombra. Cor comunica
 * SIGNIFICADO (estado, ação); a identidade fica na sidebar, no wordmark e nos
 * acentos amarelos. Dark mode é um não-objetivo por ora: o painel é claro e a
 * sidebar escura — quem troca a pele é o tema sério, em alterego.css, e ele
 * sobrepõe exatamente estes mesmos nomes.
 *
 * MARCA. `--marca-azul` foi medido do logo e é o fundo do wordmark;
 * `--marca-amarelo` é o acento pontual e carrega tinta escura (14.5:1);
 * `--marca-tinta` é o preto do logo — sidebar e tinta forte; `--tinta-inversa`
 * é o texto que vai por cima de `--marca-tinta`.
 *
 * SUPERFÍCIES. `--sup-fundo` é a página, `--sup-cartao` o plano do conteúdo,
 * `--sup-elevada` o hover de linha e `--sup-afundada` o cinza translúcido de
 * trilha e de chip neutro.
 *
 * TINTA. `--tinta-1` para título e valor, `--tinta-2` para apoio e descrição,
 * `--tinta-3` para meta e carimbo de tempo. `--separador` risca; a
 * `--borda-cartao` contorna, e é ela que define o plano num desenho sem sombra.
 *
 * PALETA SEMÂNTICA. Flat: uma cor por significado, sem par de gradiente.
 * Contraste com glifo/texto branco ≥ 5:1 (AA), exceto `--sem-destaque`, que é
 * o amarelo da marca e carrega tinta escura. Cada cor SEMPRE acompanha rótulo
 * textual — nunca informa sozinha. `--sem-bom` é sucesso, entrada de dinheiro
 * e conectado; `--sem-info` é ação e link (azul derivado da matiz da marca);
 * `--sem-atencao` é aguardando, a pagar e edição externa; `--sem-critico` é
 * erro, saída de dinheiro e remoção; `--sem-neutro` marca identidade de pessoa,
 * sem juízo de valor; `--sem-destaque` é admin e promoção, com glifo escuro.
 * Os `--suave-*` são as mesmas matizes a 10% de opacidade, para fundo de chip
 * e de aviso — o destaque vai a 22% porque o amarelo desaparece antes.
 *
 * FORMA. `--raio-cartao`, `--raio-medio`, `--raio-pequeno` e `--raio-pilula`
 * cobrem tudo que é retângulo. `--raio-azulejo` é a PROPORÇÃO de canto do
 * squircle — a identidade dos azulejos de ícone — e por isso é percentual.
 *
 * PROFUNDIDADE. Flat: a borda define o plano, não a sombra. `--sombra-cartao`
 * é quase imperceptível de propósito; `--sombra-flutua` serve ao que sai do
 * plano (modal, sidebar off-canvas); `--foco` é o anel de foco visível.
 *
 * ESPAÇO. Escala de 4, de `--e1` a `--e10`, em que o número é o múltiplo
 * (`--e6` = 24px). Não existe espaçamento fora dela.
 *
 * TIPOGRAFIA. `--fonte` é a pilha do sistema; `--fonte-mono` só para código e
 * códigos de verificação. Tamanhos: `--t-titulo` (fluido) no título de página,
 * `--t-secao` nos caps pesadas de cabeçalho de seção (ver `.secao__titulo`),
 * `--t-valor` no número grande, e depois `--t-corpo`, `--t-apoio`, `--t-meta`
 * e `--t-etiqueta`. Pesos de `--peso-normal` a `--peso-negro`, mais
 * `--peso-brutal` (900), reservado ao wordmark e ao título de página, como no
 * logo.
 *
 * MOVIMENTO E MEDIDAS. `--transicao` é a curva única do painel. Quem pediu
 * menos animação no sistema recebe 1ms: a media query no fim do arquivo
 * redefine essa variável só, em vez de desligar animação caso a caso.
 * `--largura-max` limita a coluna de conteúdo e `--lateral-larg` é a largura
 * da sidebar (o layout.css a aumenta em telas 2K+).
 */

:root {
  --marca-azul:     #0EB0EA;
  --marca-amarelo:  #F7E51E;
  --marca-tinta:    #101114;
  --tinta-inversa:  #F7F7F8;

  --sup-fundo:      #f6f7f8;
  --sup-cartao:     #ffffff;
  --sup-elevada:    #fbfbfd;
  --sup-afundada:   rgba(118, 118, 128, .08);

  --tinta-1:        #101114;
  --tinta-2:        #55555c;
  --tinta-3:        #86868d;
  --separador:      rgba(16, 17, 20, .12);
  --borda-cartao:   rgba(16, 17, 20, .10);

  --sem-bom:        #15803d;
  --sem-info:       #0873a3;
  --sem-atencao:    #b45309;
  --sem-critico:    #be123c;
  --sem-neutro:     #475569;
  --sem-destaque:   var(--marca-amarelo);

  --suave-bom:      rgba(21, 128, 61, .10);
  --suave-info:     rgba(8, 115, 163, .10);
  --suave-atencao:  rgba(180, 83, 9, .10);
  --suave-critico:  rgba(190, 18, 60, .10);
  --suave-destaque: rgba(247, 229, 30, .22);

  --raio-cartao:    14px;
  --raio-medio:     10px;
  --raio-pequeno:   8px;
  --raio-pilula:    999px;
  --raio-azulejo:   22.37%;

  --sombra-cartao:  0 1px 2px rgba(16, 17, 20, .05);
  --sombra-flutua:  0 2px 8px rgba(16, 17, 20, .08), 0 20px 48px -12px rgba(16, 17, 20, .18);
  --foco:           0 0 0 3px rgba(14, 176, 234, .45);

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

  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
           "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --t-titulo:    clamp(24px, 3vw, 30px);
  --t-secao:     14px;
  --t-valor:     22px;
  --t-corpo:     15px;
  --t-apoio:     13.5px;
  --t-meta:      12px;
  --t-etiqueta:  10.5px;

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-forte:  600;
  --peso-negro:  800;
  --peso-brutal: 900;

  --transicao:   160ms cubic-bezier(.32, .72, 0, 1);
  --largura-max: 1120px;
  --lateral-larg: 248px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 1ms linear; }
}