/* ---------------------------------------------------------------------------
   IDENTIDADE DO GUARDIÃO — fonte única de verdade

   Direção: CORPORATIVO. Fundo branco, azul naval, cinza-azulado. É o registro
   sério e conferível de sempre, mas na linguagem que uma diretoria de escola ou
   um conselho de igreja reconhece na hora.

   DUAS LIÇÕES QUE CUSTARAM CARO E ESTÃO CODIFICADAS AQUI:

   1. Token de TEXTO não é token de SUPERFÍCIE. `--tinta` era a cor dos títulos
      e foi apontada para uma cor de fundo. No claro passou despercebido; no
      escuro virou preto sobre preto e sumiu metade da tela — título, nome de
      departamento, botão secundário. Por isso os nomes abaixo dizem o PAPEL de
      cada cor, e os dois grupos vêm com aviso.

   2. Medir contraste de texto não basta. O que cega uma tela é a estrutura:
      borda invisível, cartão que não se separa do fundo. A regra 1.4.11 da
      WCAG pede 3:1 para qualquer limite que identifique um componente, e todos
      os valores aqui foram RESOLVIDOS por cálculo contra esse alvo — não
      escolhidos no olho. `node scripts/contraste.js` confere e falha se algum
      par regredir.

   MODO ESCURO: desligado de propósito. Foi a origem do pior defeito e não há
   ninguém testando-o a cada mudança. Volta quando houver.
--------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  color-scheme: light;

  /* --- SUPERFÍCIES (nunca use como cor de texto) -------------------------- */
  --card:#FFFFFF;         /* a folha: cartão, painel, campo */
  --paper:#F2F5F9;        /* a mesa: fundo da página */
  --raso:#E4EAF2;         /* recuo: célula alternada, campo desabilitado */

  /* --- FIOS: é o que dá estrutura à tela ---------------------------------- */
  --line:#848EA1;         /* 3.30:1 no cartão · campo, divisória, borda */
  --line-suave:#C1C7D0;   /* 1.70:1 · só onde o preenchimento já separa */
  --line-forte:#657185;   /* 4.94:1 · régua de seção, cabeçalho de tabela */

  /* --- TINTA (nunca use como cor de fundo) -------------------------------- */
  --ink:#0F1D2E;          /* 17.00:1 · título e texto principal */
  --muted:#4A5768;        /*  7.36:1 · texto secundário */
  --fraco:#6B7789;        /*  4.54:1 · rótulo, legenda */

  /* --- AZUL: a ação ------------------------------------------------------- */
  --acao:#123566;         /* botão primário — branco em cima dá 12.16:1 */
  --acao-forte:#1A4A8A;   /* o mesmo azul um degrau acima, para hover */
  --acao-suave:#E7EEF8;   /* fundo de destaque, aba ativa */
  --acao-ink:#FFFFFF;     /* o que se escreve sobre o azul */

  /* --- ACENTO: link e número em destaque ---------------------------------- */
  --accent:#1E6FD2;       /* 4.93:1 no cartão */
  --accent-2:#FFFFFF;     /* sobre o azul escuro */
  --accent-soft:#E7EEF8;

  /* --- FAIXA ESCURA: topo, hero, rodapé ----------------------------------- */
  --ground:#0F2748;
  --ground-ink:#F4F7FB;
  --ground-muted:#AFC2DA;
  --ground-line:#28456E;

  /* --- SEMÂNTICOS --------------------------------------------------------- */
  --verde:#1A6B3C;      --verde-soft:#E4F2E9;
  --ambar:#8A5A00;      --ambar-soft:#FBF0DC;
  --vermelho:#A32020;   --vermelho-soft:#FBE7E7;

  /* --- TIPOGRAFIA --------------------------------------------------------- */
  /* Uma família só na interface, monoespaçada nos dados. CPF, data e número de
     certidão são para CONFERIR dígito a dígito, e isso pede largura fixa: a
     coluna não dança quando o número muda. */
  --sans:'IBM Plex Sans',system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --serif:var(--sans);   /* quem ainda pede serifa recebe a mesma família */

  /* --- FORMA -------------------------------------------------------------- */
  --r-sm:4px; --r:6px; --r-lg:10px;
  --sombra:0 1px 2px rgba(15,29,46,.06);
  --sombra-media:0 1px 3px rgba(15,29,46,.10),0 1px 2px rgba(15,29,46,.06);
  --sombra-alta:0 10px 30px rgba(15,29,46,.12);
}

/* --- base ---------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);line-height:1.25;
  letter-spacing:-.011em;text-wrap:balance}
h1,h2{font-weight:600}

/* Rótulo pequeno em versalete monoespaçado — o ar de formulário oficial sem
   precisar de moldura nenhuma. */
.rotulo,.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fraco)}

/* Qualquer coisa que se confere dígito a dígito. */
.dado{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* Campo tem que LER como campo: sem borda visível o input vira um pedaço de
   texto e a pessoa não sabe onde clicar. */
:where(input,select,textarea){
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm);font-family:inherit;font-size:inherit}
:where(input,select,textarea):hover{border-color:var(--line-forte)}
:where(input,select,textarea):disabled{background:var(--raso);color:var(--fraco);cursor:not-allowed}
::placeholder{color:var(--fraco);opacity:1}

/* Foco visível de verdade — nunca remover. Quem opera isto passa o dia no
   teclado, e o anel é a única pista de onde está. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}