/* ═══════════════════════════════════════════════════════════
   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;

  /* ── 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;
  --border: #E9E5DE;
  --border2: #DCD6CD;
  --border-soft: #F2EFEA;  /* hairline interna (linhas de tabela) */

  /* ── Texto (tinta com viés do navy) ── */
  --text: #131F38;
  --text2: #535E75;
  --text3: #98A0B0;

  /* ── 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) ── */
  --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);
}