/* ═══════════════════════════════════════════════════════════
   TOKENS DE DESIGN — LMGF
   Identidade oficial (kit 2026): navy #01226A + off-white #FFFBF8.
   Tudo deriva das duas oficiais; verde/vermelho são SEMÂNTICA de
   dinheiro, nunca cor de marca. Para mudar cor/fonte, mude AQUI.
═══════════════════════════════════════════════════════════ */

/* Fontes vendorizadas (variáveis — um arquivo cobre todos os pesos).
   Hanken Grotesk = UI/títulos · Manrope = números (dígitos tabulares). */
@font-face {
  font-family: 'Hanken Grotesk';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/manrope-var.woff2') format('woff2');
}

:root {
  /* ── Oficiais do kit ── */
  --navy: #01226A;
  --bg: #FFFBF8;

  /* ── Marca do add-on Nítido (o teal do selo; o rel-nitido.js carrega um
        fallback local com o mesmo valor, para render fora da casca) ── */
  --nit-marca: #0E9E90;

  /* ── Derivações do navy ── */
  --navy-d: #011744;   /* mais fundo (pressed/bordas escuras) */
  --navy-m: #0B3180;   /* hover do primário */
  --navy-l: #2E56A6;   /* acento claro (links/ícones ativos) */
  --navy-100: #CDD8EE; /* anel de foco */
  --navy-050: #EEF1F8; /* tinta 5% (hover de linha, fundos ativos) */

  /* ── Superfícies e bordas (quentes, seguindo o off-white) ── */
  --white: #fff;
  /* o que vai EM CIMA de um fundo --navy (texto de botão primário, aba ativa,
     cabeçalho da DRE). Existe porque no tema escuro o navy deixa de ser tinta e
     passa a ser LUZ: `#fff` sobre o azul claro dá 2,59:1, e o inverso 7,10:1. */
  --sobre-navy: #fff;
  --border: #E9E5DE;
  --border2: #DCD6CD;
  --border-soft: #F2EFEA;  /* hairline interna (linhas de tabela) */

  /* ── Texto (tinta com viés do navy) ── */
  --text: #131F38;
  --text2: #535E75;
  /* 18/08/2026: era #98A0B0, medido em 2,55:1 sobre o creme — REPROVA o AA e
     é usado em sub-texto de card e rótulo de coluna, que são texto para LER.
     Em monitor de clínica com luz ambiente, desaparecia. #7C8798 dá 3,53:1 e
     é o mesmo cinza-azulado, um passo mais escuro. */
  --text3: #7C8798;

  /* ── Semânticas de dinheiro ── */
  --neg: #C6303E;
  --neg-bg: #FCF0F1;
  --pos: #0E8A4C;
  --pos-bg: #EAF6EF;
  --warn: #9A6700;
  --warn-bg: #FBF3E0;
  --zero: #B8B2A9;

  /* ── Raios e sombras (elevação em vez de contorno) ── */
  /* ── SEMÂNTICOS por componente (18/08/2026) ────────────────────────────
     Antes, tabela, card e drawer liam `--navy-050` direto. Consequência: mexer
     na faixa do cabeçalho da tabela mexia no hover de linha e no fundo de card
     ao mesmo tempo, e a evolução de um componente vazava nos outros. Estes
     tokens têm o MESMO valor de hoje — a mudança é poder mover um sem mover os
     demais. Componente novo deve ler daqui, não do token cru. */
  --tab-cabecalho: var(--navy-050);   /* faixa do thead */
  --tab-linha: var(--border-soft);    /* hairline entre linhas */
  --tab-zebra: color-mix(in srgb, var(--navy-050) 55%, transparent);
  --tab-hover: var(--navy-050);       /* linha sob o cursor */
  --card-fundo: var(--white);
  --card-borda: var(--border);

  --r-card: 14px;
  --r-ctl: 10px;
  --shadow-1: 0 1px 2px rgba(19, 31, 56, .05), 0 4px 14px rgba(19, 31, 56, .06);
  --shadow-2: 0 2px 4px rgba(19, 31, 56, .06), 0 10px 28px rgba(19, 31, 56, .10);

  /* ── Tipografia ── */
  --font-base: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Manrope', var(--font-base); /* números: proporcionais + tabulares */
}

/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  /* dígitos tabulares em todo o sistema: números alinham em qualquer coluna */
  font-variant-numeric: tabular-nums;
}

/* ═══ CAMPOS — padrão único do sistema (mata o "retângulo preto") ═══
   Todo input de texto/data/número, select e textarea têm a mesma altura,
   raio, borda suave e anel de foco navy — em TODAS as telas. */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  font: inherit;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border2);
  border-radius: var(--r-ctl);
  padding: 7px 10px;   /* altura vem do padding — contextos densos podem compactar */
  transition: border-color .12s, box-shadow .12s;
}

textarea {
  min-height: 60px;
  resize: vertical;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><path d="M1 1.3 5.5 5.8 10 1.3" fill="none" stroke="%23535E75" stroke-width="1.7" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-100);
}

input[type="checkbox"],
input[type="radio"] {
  height: auto;
  accent-color: var(--navy);
}

/* Input de arquivo: o botão nativo segue o padrão de botão secundário */
input[type="file"] {
  border: none;
  padding: 0;
  background: transparent;
  font: inherit;
  color: var(--text2);
}
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border2);
  border-radius: var(--r-ctl);
  padding: 7px 14px;
  margin-right: 10px;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--navy);
  color: var(--navy);
}