/* Tokens da fundação de interface (rodada de interface, etapa 1, prompt #36).
 *
 * Um arquivo só, custom properties em :root. As telas novas consomem DAQUI;
 * valor de cor/raio/altura digitado à mão em componente é regressão.
 * Nenhuma fonte de CDN: a stack do sistema resolve e não custa requisição.
 */

:root {
  /* Superfícies e tinta */
  --surface: #ffffff;
  --page: #f8fafc;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #64748b;   /* #42: era #898781 (3,35:1); 4,54:1 sobre --surface */

  /* Linhas divisórias */
  --line: #e2e8f0;
  --line-2: #f1f5f9;

  /* Cores de significado, cada uma com o fundo fraco correspondente */
  --azul: #2563eb;    /* #42: era #2a78d6 (3,99:1); 4,55:1 */
  --azul-fraco: #eff6ff;
  /* #145: o azul escuro da paleta do dono (#1D4ED8). Faltava um token para
     ele -- o `--acao-escura` do app.css cumpria esse papel com a cor antiga. */
  --azul-escuro: #1d4ed8;
  --verde: #12843c;  /* #142: #16a34a dava 3,15:1 sobre --verde-fraco */
  --verde-fraco: #f0fdf4;
  --vermelho: #d92323;  /* #142: #dc2626 dava 4,41:1 sobre --vermelho-fraco (exigido 4,5) */
  --vermelho-fraco: #fef2f2;
  --amarelo: #ad5f05; /* #42: era #a87400 (3,75:1); 4,51:1 */  /* #142: #d97706 dava 3,07:1 sobre --amarelo-fraco */
  --amarelo-fraco: #fffbeb;

  /* Borda de CAMPO interativo (input/select/textarea) — 1.4.11 pede 3:1.
   * As divisórias de tabela e bordas de cartão são estruturais e ficam
   * em --line (#42).
   * #163: era #94a3b8, que NÃO cumpria o que este comentário promete —
   * 2,56:1 sobre --surface e 2,45:1 sobre --page, medido. A anotação "3:1"
   * existia desde o #42 sem o número atrás dela. #7f8da4 é o primeiro valor
   * da mesma família que fecha nas DUAS superfícies (3,36:1 e 3,21:1), que é
   * o que a borda de `.campo` precisa: ela aparece sobre cartão branco e
   * sobre a página. Alcança junto o trilho do `.chave-pago` desligado, onde
   * a cor É o indicador de estado. Guarda: tests/test_contraste_163.py. */
  --linha-campo: #7f8da4;

  /* ESPAÇAMENTO (#165). Até aqui o sistema tinha 29 tokens de cor e ZERO de
   * espaço — por isso todo respiro era digitado à mão, inclusive dentro de
   * `style=` em template, onde nem a cascata alcança.
   *
   * A ESCALA DESCREVE O SISTEMA; NÃO IMPÕE UMA TEORIA A ELE. Medido nos dois
   * CSS antes de escolher qualquer número: 478 valores px de espaçamento em
   * 30 tamanhos distintos, e **só 31% são múltiplos de 8**. O "grid de 8px"
   * que todo guia de estilo recomenda descreveria menos de um terço deste
   * arquivo; adotá-lo obrigaria a mexer em 173 valores (36% do sistema) para
   * fazer a régua caber, em produção, com regressão de layout que a suíte não
   * pega (R32). A régua seria minha, não do sistema (R33).
   *
   * O que o sistema USA é uma escala DENSA de passo 2 até 16, e um degrau de
   * seção em 24 — coerente com a diretriz #77/4, onde densidade é requisito e
   * não defeito. Os nove níveis abaixo cobrem 393 dos 478 usos (82%).
   *
   * NOMEADOS PELO VALOR de propósito. `--esp-10` não é abstração e não quer
   * ser: numa escala de passo 2, um nome de nível (`--esp-5`) obrigaria a
   * decorar a tabela, e "onde uso 10px?" deixaria de ser respondível por
   * grep. O ganho aqui é ter UM lugar e nove opções no lugar de trinta.
   *
   * OS 18% QUE FICARAM DE FORA (10px não, esses entraram — 3, 5, 7, 9, 18,
   * 20, 28...) continuam literais e estão contados no teste de teto de
   * `tests/test_espacamento_165.py`: eles podem CAIR, nunca crescer. Puxá-los
   * para a escala muda pixel na tela e é decisão do dono, com prova visual —
   * não conversão mecânica. */
  --esp-2: 2px;
  --esp-4: 4px;
  --esp-6: 6px;
  --esp-8: 8px;
  --esp-10: 10px;
  --esp-12: 12px;
  --esp-14: 14px;
  --esp-16: 16px;
  --esp-24: 24px;

  /* Geometria */
  --raio: 10px;
  --altura-linha: 48px;
  --pad-linha: 9px;
}
/* #287: as densidades vivem AQUI, não no ui.js. O <html> chega do servidor
   com `data-densidade` (base.html), então a linha já nasce na altura escolhida
   -- sem o pulo de ~400px na primeira dobra que o JS causava ao reescrever as
   variáveis depois da primeira pintura. Os pares são os do ui.js (DENSIDADES). */
:root[data-densidade="compacto"] { --altura-linha: 40px; --pad-linha: 5px; }
:root[data-densidade="relaxado"] { --altura-linha: 58px; --pad-linha: 13px; }
:root {

  /* Tipografia (#70). Existiam DOIS corpos de texto no sistema: 13px Inter
     (app.css) e 15px system-ui (aqui). O corpo único é 15px system-ui -- o da
     referência visual, e o das três telas que o dono opera todo dia. Relatório
     de muitas colunas usa `.tabela-densa`, que declara a densidade em vez de
     herdá-la por acidente. */
  /* A pilha da fonte, num token só (#249): a Inter primeiro, e a stack de
     sistema atrás dela como rede -- se o woff2 não chegar, a tela continua
     legível com o que a máquina tem, que é exatamente o que havia antes. */
  --fonte: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Dígitos de LARGURA FIXA para tudo que é dinheiro, data ou contagem. É o
     que faz uma coluna de valores formar régua: sem isso, 1.111,11 e 4.444,44
     têm larguras diferentes e o olho não consegue varrer a coluna. */
  --num-tabular: tabular-nums;

  /* #249: o número que fecha uma tela -- hoje só a DIFERENÇA da conciliação.
     24px já era o tamanho de fato do sistema (título de página, total de
     relatório, herói da Início), escrito à mão em cinco lugares; aqui ele
     ganha nome em vez de virar o sexto literal. */
  --corpo-heroi: 24px;

  --corpo: 15px;
  --corpo-miudo: 13px;
  --corpo-denso: 13px;
  --altura-linha-densa: 32px;

  /* #166 — OS TRÊS DEGRAUS ABAIXO DE 13px, QUE ERAM 83 USOS SEM TOKEN.
   * Medido antes de nomear: 174 declarações literais de `font-size` nos dois
   * CSS, em 27 tamanhos distintos. O tamanho MAIS USADO do sistema é `12px`
   * (54 usos) — e ele não tinha token, enquanto `--corpo` (15px, o corpo
   * travado no #70) tem 4 usos diretos. A escala de leitura existia de fato;
   * só não existia por escrito.
   * Nomeados por PAPEL, e não pelo valor como em `--esp-*`: aqui o papel é
   * real e verificável na tela (nota de rodapé não é pastilha, pastilha não é
   * tecla), enquanto numa escala de espaçamento de passo 2 o papel seria
   * inventado. */
  --corpo-nota: 12px;   /* nota, metadado, rótulo secundário — o mais usado */
  --corpo-rotulo: 12.5px; /* #289: cabeçalho de tabela, etiqueta, nota de bloco -- o 4º tamanho mais usado, sem nome até aqui (16 literais) */
  --corpo-mini: 11px;   /* pastilha, contador, etiqueta de contagem */
  --corpo-micro: 10px;  /* <kbd>, marca de canto — o menor que o sistema usa */

  /* PESO. Oito valores distintos em 77 usos, sendo 600 (44), 500 (11),
   * 400 (8) e 700 (5) = 68 deles. Os outros nove são 640, 650, 620 e 550.
   * NÃO foram tocados: em `system-ui` o peso cai na variante mais próxima que
   * a fonte instalada tiver, então 620 e 640 PODEM renderizar igual a 600 —
   * mas "podem" não é medida, e isso é prova de navegador (R41), não de
   * arquivo. O CLAUDE.md registra que o 640 da empresa ativa foi medido no
   * Chromium contra o 400 do menu; ninguém mediu 640 contra 600. Enquanto
   * não medir, mexer seria trocar tela por palpite. */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-maximo: 700;

  /* ------------------------------------------------------------------ #168
   * A COR QUE ESTAVA SOLTA NO `app.css`.
   *
   * A decisão #70 diz "cor literal só em tokens.css", e o #164 transformou
   * isso em teste — mas só para TEMPLATE. A folha de estilo nunca foi
   * varrida: em 17/08/2026 o `app.css` carregava 43 cores literais vivas,
   * várias repetidas em lugares que não sabiam um do outro (`#e6f4ec` em
   * três, `#f7f9fc` e `#fdf6e7` em dois cada).
   *
   * Todas entram aqui COM O VALOR EXATO que já tinham. Este commit não muda
   * um pixel — muda o endereço. Guarda:
   * tests/test_cor_literal_so_em_tokens_168.py
   *
   * DUAS CONSOLIDAÇÕES ficaram DE FORA de propósito, porque mudariam cor em
   * tela e cor é decisão do dono (#142). Estão anotadas abaixo, onde doem. */

  /* (1) UMA FAMÍLIA DE ESTADO SÓ — decisão do dono em 17/08/2026 (#169), em
   * caixa de escolha, entre unificar na paleta do #142 e manter as duas.
   *
   * Até aqui conviviam duas: `--verde/--vermelho/--amarelo` (a paleta que ele
   * passou no #142, com contraste medido) e `--erro/--sucesso/--atencao`
   * (descendentes do #36, que moravam dentro do `app.css`). O #145 unificou
   * tinta, ação, fundo e borda e parou antes de chegar aqui; o #168 as trouxe
   * para este arquivo com o valor intacto, sem escolher. Agora escolheu.
   *
   * OS NOMES FICAM, virando apelidos — é o mesmo mecanismo do #145, e pela
   * mesma razão: são 130+ usos, e reescrevê-los numa rodada de cor trocaria
   * uma mudança medida por uma varredura de texto.
   *
   * ⚠️ TINTA E FUNDO ANDAM JUNTOS, e isso foi MEDIDO, não suposto. Trocar só
   * a tinta REPROVA em quatro pontos, porque a paleta do #142 é mais clara e
   * os fundos do #36 eram calibrados para a tinta do #36:
   *     .marca-pago 4,22:1 · .marca-aberto 4,32:1
   *     .cat-movimento 4,50:1 · .alerta-faixa .valor 4,42:1   (exigido 4,5)
   * Com os dois trocados, nenhum reprova — mas a MARGEM ENCOLHEU em todos os
   * casos (o pior fica em 4,55:1 sobre --page, cinco centésimos acima do
   * mínimo). Consequência prática: qualquer mudança futura no fundo da página
   * ou do cartão precisa remedir estes pares ANTES, não depois.
   * Guarda: tests/test_cor_de_estado_unica_169.py */
  --erro: var(--vermelho);
  --sucesso: var(--verde);
  --atencao: var(--amarelo);
  --sucesso-fraco: var(--verde-fraco);
  --atencao-fraco: var(--amarelo-fraco);
  --erro-fraco: var(--vermelho-fraco);
  /* Fica literal: é FUNDO de botão com texto branco (7,02:1), não tinta, e a
   * família do #142 não tem um amarelo escuro. Escurece o --amarelo no hover
   * do `.alerta-acao`, que é o único lugar onde aparece. */
  --atencao-escuro: #7d4f00;

  /* (2) OS CREMES. Eram seis; a unificação de estado levou TRÊS junto, porque
   * os três eram fundo de texto `--atencao` e tinham de acompanhar a tinta.
   * Sobram os dois da linha vencida (que não são estado semântico: marcam
   * LINHA de tabela, não rótulo) e a borda do alerta. */
  --alerta-fundo: var(--amarelo-fraco);    /* .alerta-faixa, .dre-sem_grupo:hover */
  --atencao-realce: var(--amarelo-fraco);  /* .cat-atencao */
  --vencido-fundo: #fefaf1;                /* .linha-vencida */
  --vencido-fundo-forte: #fdf3e0;          /* .linha-vencida:hover */
  /* ACHADO FORA DO ESCOPO, pré-existente e NÃO corrigido aqui: esta borda mede
   * 1,35:1 sobre branco e 1,30:1 sobre o fundo novo — abaixo dos 3:1 que a
   * 1.4.11 pede. Não é regressão do #169 (já era assim com o creme antigo) e
   * não é violação clara: a caixa do alerta tem fundo próprio, então a borda
   * não é o ÚNICO indicador. Corrigir muda tela e é decisão do dono. */
  --alerta-borda: #f0dcae;

  /* Neutros de tabela */
  --saldo-fundo: #fafbfd;      /* .linha-saldo */
  --secao-hover: #f7f9fc;      /* .dre-secao:hover, .cruzada-secao:hover */

  /* Branco PURO, e por que não é `--surface`: os dois valem #ffffff hoje, e
   * significam coisas diferentes. `--surface` é a superfície de cartão, que
   * pode virar off-white num ajuste de paleta; o texto sobre azul saturado
   * tem de continuar branco no mesmo dia, ou o contraste cai junto. */
  --branco: #ffffff;

  /* Identificação de empresa — cor como etiqueta, não como significado.
   * `--empresa-1` e `--empresa-2` calham de repetir o valor de --sucesso e
   * --atencao; é coincidência de tom, não parentesco semântico. */
  --empresa-0: #276fc6;
  --empresa-1: #0b7a46;
  --empresa-2: #9a6200;
  --empresa-3: #7a3ea3;
  --empresa-4: #0f6f7a;
  --empresa-5: #b5468c;

  /* Bordas das marcas de conciliação */
  --marca-conciliar-borda: #cfe6d9;
  --marca-criar-borda: #d6e5f9;
  --marca-ignorar-borda: #f0e2c2;
  --etiqueta-sugerida-borda: #b9d3f4;

  /* ELEVAÇÃO. Cinco sombras para o mesmo conceito ("isto flutua"), cada uma
   * escrita à mão numa rodada diferente, com opacidade e desfoque próprios.
   * Ganham nome agora; virar UMA escala de 2 ou 3 degraus muda sombra em
   * tela e fica para o dono. */
  --sombra: 0 1px 2px rgba(15, 26, 43, .06), 0 1px 3px rgba(15, 26, 43, .04);
  --sombra-suspensa: 0 4px 16px rgba(45, 65, 95, .16);  /* .submenu */
  --sombra-menu: 0 6px 20px rgba(15, 26, 43, .16);      /* .menu-itens */
  --sombra-paleta: 0 24px 64px rgba(15, 26, 43, .28);   /* .paleta-painel */
  --sombra-caixa: 0 10px 30px rgba(15, 26, 43, .10);    /* .caixa-de-entrada */
  --sombra-dica: 0 6px 20px rgba(15, 23, 42, .12);      /* .grafico-dica */
  --veu-paleta: rgba(15, 26, 43, .35);                  /* .paleta */

  /* ------------------------------------------------------------- #168 (b)
   * A COR SOLTA NO `componentes.css` — 29 ocorrências, achadas só depois de
   * o `app.css` fechar em zero. A varredura do #164 nunca passou por aqui.
   *
   * ⚠️ QUATRO DELAS ERAM DA PALETA ANTERIOR AO #142 — o #168 as nomeou com o
   * valor quente intacto porque cor é decisão do dono. #169 (17/08/2026): a
   * decisão veio, em caixa de escolha, e é "unificar na paleta do #142". As
   * quatro passam para a família vigente ABAIXO, cada uma DERIVADA de um token
   * que já existe e com o par medido antes (guarda:
   * tests/test_hover_da_paleta_vigente_169.py).
   *
   * O que a troca conserta em tela: o botão primário e o de perigo estavam
   * SLATE parados e viravam QUENTES ao passar o mouse — o hover mudava de
   * família, não de tom. */

  /* Derivado de `--ink` (#0f172a, slate-900): o degrau acima na MESMA rampa,
   * slate-800. O sentido é CLAREAR, e não é escolha minha — é o que o token
   * antigo já fazia (#2a2a28 é mais claro que `--ink`); escurecer um quase
   * preto não se vê. O salto de luminância fica em ×2,47, contra ×2,57 do
   * valor antigo: mesma leitura, sem o desvio de família. Branco por cima
   * mede 14,63:1 (exigido 4,5). */
  --btn-primario-hover: #1e293b;

  /* Derivado de `--vermelho` (#d92323) pela relação que o sistema JÁ usa entre
   * `--azul` e `--azul-escuro`: luminância dividida por 1,4356. O alvo dá
   * 0,11197 e este valor mede 0,11229 — 0,3% de diferença — e calha de ser o
   * degrau red-700 da mesma rampa de onde a paleta do #142 saiu. Branco por
   * cima mede 6,47:1, contra 6,66:1 do #a83228 (exigido 4,5). Fica literal
   * pelo mesmo motivo do `--atencao-escuro`: é FUNDO de botão com um consumidor
   * só, não tinta reaproveitável. */
  --btn-perigo-hover: #b91c1c;

  /* O mesmo 15% de antes, agora sobre o azul VIGENTE (`--azul` #2563eb) no
   * lugar do #2a78d6, que era do #42 — duas paletas atrás. Composto sobre o
   * fundo real do chip (`--azul-fraco`) dá #d1e0fc: o `--azul` do "×" por cima
   * mede 3,88:1 (era 3,95:1) — elemento de interface, mínimo 3:1 — e o realce
   * se separa do chip por 1,22:1 (era 1,20:1), que é o feedback.
   * ⚠️ Os canais repetem `--azul` À MÃO porque `rgba()` não aceita token. Se
   * `--azul` mudar, ESTE VALOR NÃO ACOMPANHA. `color-mix()` derivaria de
   * verdade, mas não há um só uso dele nas folhas e a renderização não se prova
   * daqui — fica anotado, não feito. */
  --chip-remover-hover: rgba(37, 99, 235, 0.15);

  /* Slate-50, o degrau que a família vigente usa para "quase branco" — o mesmo
   * valor de `--page`, e literal pelo mesmo motivo que `--branco` não é
   * `--surface`: significam coisas diferentes e o CLAUDE.md avisa que o fundo
   * da página pode ser remedido. Acoplar o feedback da linha ao fundo da página
   * faria a tabela mudar de comportamento numa rodada que só falava de fundo.
   * `--ink` por cima mede 17,06:1 (exigido 4,5). Separação do repouso
   * (`--surface`): 1,046:1, contra 1,045:1 do #fafaf8 — o hover continua tão
   * discreto quanto era, nem mais nem menos. */
  --linha-hover: #f8fafc;

  /* Tinta sobre fundo ESCURO (toast e barra de lote, que são quase pretos).
   * Não confundir com --branco: aqui a transparência é o recurso. */
  --sobre-escuro-borda: rgba(255, 255, 255, 0.4);
  --sobre-escuro-hover: rgba(255, 255, 255, 0.15);
  --sobre-escuro-fraco: rgba(255, 255, 255, 0.6);

  /* Véu do modal/drawer. Note que NÃO é o mesmo do `.paleta` (--veu-paleta,
   * acima): dois escurecimentos de fundo, com cores e opacidades diferentes,
   * para o mesmo gesto de "o que está atrás não é clicável agora". */
  --veu: rgba(11, 11, 11, 0.35);

  /* ELEVAÇÃO DO `componentes.css`. Pareciam oito sombras; são QUATRO valores,
   * escritos em duas grafias (`rgba(0,0,0,.25)` e `rgba(0, 0, 0, 0.25)`) —
   * que é parte de por que ninguém notou a repetição. */
  --sombra-flutuante: 0 6px 24px rgba(0, 0, 0, 0.25);   /* toast, dica, combo, calendário, lote */
  /* #249: a régua de conciliação gruda no rodapé, e a sombra é para CIMA --
     ela separa a barra das linhas que passam por baixo. Suave de propósito:
     uma barra permanente com sombra forte vira uma segunda tela. */
  --sombra-regua: 0 -4px 12px -8px rgba(0, 0, 0, 0.25);
  --sombra-painel: 0 12px 40px rgba(0, 0, 0, 0.25);     /* modal, paleta de comandos, menu de período */
  --sombra-coluna-esq: 8px 0 8px -8px rgba(0, 0, 0, 0.25);
  --sombra-coluna-dir: -8px 0 8px -8px rgba(0, 0, 0, 0.25);
}

/* ============================ TIPOGRAFIA ============================
 * INTER, servida por NÓS (#249). Pedido do dono com a tela do Controlle na
 * mesa: "melhorar essa fonte, deixar a fonte parecida com a da imagem".
 *
 * O que havia antes era `system-ui` -- que não é uma fonte, é "o que a máquina
 * tiver". Medido no navegador desta VM em 01/09/2026: caía em **DejaVu Sans**,
 * com dígitos de largura variável. Numa tela que existe para COMPARAR NÚMEROS
 * em coluna, isso não é preferência estética: `1` estreito e `4` largo fazem
 * dois valores da mesma grandeza terminarem em pixels diferentes, e o olho
 * perde a régua que a conciliação inteira depende.
 *
 * Servida local, nunca por CDN: o sistema é interno, e uma dependência externa
 * no caminho de render é indisponibilidade importada. 3 pesos × subset latin =
 * 141 KiB, cacheados pelo WhiteNoise. O `latin-ext` (mais 249 KiB) FICOU DE
 * FORA de propósito -- o português cabe no latin, e caractere fora dele cai no
 * fallback sem quebrar nada.
 *
 * Licença OFL em `core/static/fontes/LICENSE-inter.txt`.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  /* UM arquivo para os três pesos, e não três: a Inter v20 é uma fonte
     VARIÁVEL -- o mesmo woff2 desenha 400, 500 e 600. Baixei os três "pesos"
     do Google Fonts e os três vieram com o MESMO md5; só apareceu ao ver o
     CSS servido em produção, onde o `ManifestStaticFilesStorage` deu o mesmo
     hash aos três. Eram 141 KiB e três downloads para servir 47 KiB. */
  font-weight: 100 900;
  font-display: swap;
  src: url("../fontes/inter-variavel-latin.260c81a4759b.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--corpo);
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
}

/* O link tem a cor de ação do sistema. Sem esta regra o navegador usa o próprio
   azul (#0000EE) em todo `<a>` que nenhuma regra de contexto alcance -- foi o
   que a Tarefa 5 achou no rodapé da conciliação. A referência visual traz esta
   linha desde sempre; a fundação nunca a trouxe. (#70) */
a { color: var(--azul); }

/* Todo número em tabela ou coluna usa dígitos tabulares para alinhar.
 * Número grande solto (o herói) NÃO leva a classe — proporcional lê melhor. */
.num {
  font-variant-numeric: tabular-nums;
}