/*
 * Sistema de design — Gestão de Custos
 * ====================================
 *
 * Um instrumento de contabilidade pública, não um painel de SaaS. Quem usa é
 * servidor municipal fechando competência; quem audita é o Tribunal de Contas.
 * O trabalho do design é fazer o número parecer defensável.
 *
 * DUAS REGRAS DE DISCIPLINA
 *
 * 1. Azul significa custo. Cor semântica (verde/âmbar/vermelho) significa
 *    situação. Nenhuma cor é decorativa — se aparece, informa.
 * 2. Rótulo à esquerda, figura à direita. Sempre. É a convenção do livro-razão
 *    e a única que deixa somar com o olho.
 *
 * FONTES DE SISTEMA, POR OBRIGAÇÃO
 *
 * O RT-06 instala o sistema numa VM do município, que pode não ter internet, e
 * nenhum asset pode vir de CDN. Só entra fonte que já esteja na máquina. Daí
 * Georgia nos títulos: existe em todo Windows e Mac, e carrega uma gravidade
 * institucional que a sans do sistema não tem. A sans fica na interface e nas
 * tabelas, onde densidade importa mais que personalidade.
 *
 * Este arquivo é a única fonte dos tokens. `app.css`, `admin.css` e
 * `relatorio.css` consomem daqui — inclusive o PDF, que recebe este arquivo
 * concatenado (ver `relatorios.renderizadores._estilo`).
 */

:root {
  color-scheme: light;

  /* -- Azul institucional. O #1f4e79 é o eixo; o resto deriva dele. ------ */
  --azul: #1f4e79;
  --azul-escuro: #14314b;
  --azul-medio: #2e75b6;
  --azul-claro: #9dc3e6;
  --azul-tenue: #e8eff6;
  --azul-vidro: rgba(31, 78, 121, 0.08);

  /* -- Papel. Neutros frios, puxados para o azul — nunca creme. --------- */
  --papel: #f5f7f9;
  --superficie: #ffffff;
  --superficie-alt: #fafbfc;
  --linha: #dbe2e9;
  --linha-forte: #aebccb;

  --tinta: #16202b;
  --tinta-media: #46586b;
  --tinta-suave: #6b7c8d;

  /* -- Situação contábil. Só isto justifica sair do azul. --------------- */
  --confere: #0f6b45;
  --confere-tenue: #e7f3ed;
  --atencao: #8a5300;
  --atencao-tenue: #fcf3e3;
  --diverge: #a12a2a;
  --diverge-tenue: #fbedec;

  /* -- Tipografia ------------------------------------------------------- */
  --fonte-titulo: Georgia, "Times New Roman", Times, serif;
  --fonte-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fonte-codigo: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    "Roboto Mono", Consolas, "Liberation Mono", monospace;

  /* Escala modular de terça maior (1,25), do corpo de 15px. Densa o
     suficiente para tabela de custo, larga o suficiente para ler. */
  --t-xs: 0.6875rem;   /* 11 — pastilha de código, nota de rodapé */
  --t-sm: 0.8125rem;   /* 13 — rótulo, legenda, célula secundária */
  --t-base: 0.9375rem; /* 15 — corpo */
  --t-md: 1.125rem;    /* 18 — subtítulo */
  --t-lg: 1.375rem;    /* 22 — título de seção */
  --t-xl: 1.75rem;     /* 28 — título de página */
  --t-2xl: 2.375rem;   /* 38 — figura de destaque */

  --linha-texto: 1.55;
  --linha-apertada: 1.25;

  /* -- Espaço. Múltiplos de 4, porque tabela alinha em grade. ----------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  /* -- Forma. Raio só em controle interativo; painel e tabela são réguas,
        como no livro-razão. ---------------------------------------------- */
  --raio: 3px;
  --raio-pastilha: 2px;

  /* Uma sombra só, para a gaveta — onde a elevação é real. */
  --sombra-gaveta: 0 0 0 100vmax rgba(10, 22, 34, 0.45);
  --sombra-flutuante: 0 8px 28px rgba(10, 22, 34, 0.18);

  --topo-altura: 52px;
  --largura-conteudo: 1180px;
  --transicao: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================== */
/* Primitivas compartilhadas                                             */
/* ===================================================================== */

/*
 * A pastilha de código é o dispositivo visual próprio deste domínio.
 * Unidade, centro de custo, insumo, natureza de despesa, item da POC — tudo
 * aqui é identificado por um código hierárquico, e é por ele que o servidor
 * procura. Dar forma a ele não é enfeite: é sinalização.
 */
.codigo {
  font-family: var(--fonte-codigo);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--azul);
  background: var(--azul-tenue);
  border-radius: var(--raio-pastilha);
  padding: 0.15em 0.45em;
  white-space: nowrap;
}

/* Figura monetária. `tabular-nums` é o que faz a coluna somar com o olho. */
.figura {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/*
 * Situação é borda à esquerda, não etiqueta colorida. Fica discreta, dá para
 * varrer uma lista inteira de relance, e sobrevive à impressão em preto e
 * branco — que é como metade dos relatórios de prefeitura acaba.
 */
.situacao-confere { border-left: 3px solid var(--confere); }
.situacao-atencao { border-left: 3px solid var(--atencao); }
.situacao-diverge { border-left: 3px solid var(--diverge); }

.texto-confere { color: var(--confere); }
.texto-atencao { color: var(--atencao); }
.texto-diverge { color: var(--diverge); }
.texto-suave { color: var(--tinta-suave); }

/* Foco sempre visível: o sistema é operado por teclado em mesa de trabalho. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--azul-medio);
  outline-offset: 2px;
  border-radius: var(--raio);
}