/* Tokens gerados por tokens.py em 04/11/2026
   marca #5b8fff · tema escuro · base marca
   Sem direção, a cor da marca é acento em no máximo 3 papéis por tela (ação principal, foco e a
   seleção ou o balão da empresa) e o resto é neutro. COM DIREÇÃO (assets/direcao.css), vale o
   direcao.md: os lugares da marca, a mono e as sombras (--sombra-1/2 são o padrão neutro).
   Troque de tema com <html data-tema="claro"> ou <html data-tema="escuro">. */

:root,
[data-tema="escuro"],
.dark {
  color-scheme: dark;
  /* base: fundo, superfícies (cartão, painel) e bordas */
  --cor-fundo: #0b0e15;
  --cor-superficie: #11151c;
  --cor-superficie-2: #181c23;
  --cor-superficie-3: #1f232b;
  --cor-borda: #262a32;
  --cor-borda-forte: #3a3f47;
  /* texto: principal, secundário, apagado (todos AA) */
  --cor-texto: #edf0f7;
  --cor-texto-2: #aeb1b8;
  --cor-texto-3: #878a90;
  /* marca com propósito: sem direção, no máximo 3 papéis por tela (ação principal, foco e a seleção ou o balão da empresa); com direção, os lugares que o direcao.md dá */
  --cor-acento: #5b8fff;
  --cor-acento-hover: #6f9eff;
  --cor-acento-suave: #13223f;
  --cor-acento-texto: #0d121b;
  --cor-foco: #6a9aff;
  /* marca original: logo e ilustração (fora da conta dos 3 papéis; na ilustração, um detalhe só); botão na cor original com --cor-marca-texto e, no hover, --cor-marca-hover (só existe quando o par passa 4,5:1) */
  --cor-marca: #5b8fff;
  --cor-marca-texto: #0d121b;
  --cor-marca-hover: #6f9eff;
  /* significado: variação, status (texto e fundo suave) */
  --cor-sucesso: #5ac576;
  --cor-alerta: #e19b1b;
  --cor-perigo: #ff7e77;
  --cor-info: #54b3fd;
  --cor-sucesso-suave: #122d19;
  --cor-alerta-suave: #352206;
  --cor-perigo-suave: #3b1c1a;
  --cor-info-suave: #0e293d;
  /* categorias: use na ordem (1, 2, 3...), sem pular; a mesma cor para o mesmo dado no menu, na legenda, no gráfico e na tabela */
  --cor-cat-1: #ba8c01;
  --cor-cat-2: #df5795;
  --cor-cat-3: #de6e29;
  --cor-cat-4: #19a4b7;
  --cor-cat-5: #75a322;
  --cor-cat-6: #8f6ce0;
  --cor-cat-7: #2ea55c;
  --cor-cat-8: #468de5;
  /* escala de neutros: 1 a 3 fundos, 4 e 5 hover, 6 a 8 bordas, 9 e 10 sólidos, 11 e 12 texto */
  --neutro-1: #0b0e15;
  --neutro-2: #11151c;
  --neutro-3: #181c23;
  --neutro-4: #1f232b;
  --neutro-5: #262a32;
  --neutro-6: #2d323a;
  --neutro-7: #3a3f47;
  --neutro-8: #4e535c;
  --neutro-9: #707379;
  --neutro-10: #7d8086;
  --neutro-11: #aeb1b8;
  --neutro-12: #edf0f7;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-2: 0 8px 24px rgb(0 0 0 / 0.45), 0 0 0 1px var(--cor-borda);
}

:root {
  /* espaço: só estes degraus (menor dentro do grupo, maior entre grupos) */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
  --espaco-8: 32px;
  --espaco-10: 40px;
  --espaco-12: 48px;
  --espaco-16: 64px;
  /* cantos: caixa dentro de caixa = raio de fora menos o recuo */
  --raio-1: 6px;
  --raio-2: 8px;
  --raio-3: 12px;
  --raio-4: 16px;
  /* texto: tamanho e altura de linha */
  --texto-xs: 12px;
  --linha-xs: 16px;
  --texto-sm: 13px;
  --linha-sm: 18px;
  --texto-base: 14px;
  --linha-base: 20px;
  --texto-md: 16px;
  --linha-md: 24px;
  --texto-lg: 20px;
  --linha-lg: 28px;
  --texto-xl: 24px;
  --linha-xl: 32px;
  --texto-2xl: 32px;
  --linha-2xl: 40px;
  --texto-3xl: 40px;
  --linha-3xl: 48px;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --fonte: Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* mono só em texto pequeno secundário (até 13 px), em todos os lugares do mesmo tipo */
  --fonte-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* números alinhados em tabela, valor e contador */
.numero, td, .tabular { font-variant-numeric: tabular-nums; }
