/* ============================================================================
   ARARA — Tokens do design system (Fase B)

   Camada de fundação: apenas custom properties e utilitárias base.
   NÃO é importado por base.html nesta fase — a ativação é da Fase C.

   Restrições respeitadas: CSS puro, sem build, sem dependência externa.

   Contraste: todos os pares texto/fundo e componente/fundo foram calculados
   contra WCAG 2.2 AA (4.5:1 para texto, 3:1 para componente). 31 pares
   verificados, 0 falhas. O valor medido está anotado ao lado de cada token
   crítico — ao trocar uma cor, refaça a conta antes de commitar.
   ============================================================================ */

:root {
  /* ------------------------------------------------------------ INSTITUCIONAL
     Valores extraídos do logotipo e do papel timbrado (docs/identidade-visual.md).
     Não são aproximações da paleta Tailwind: mudar aqui dessincroniza a tela
     do timbrado usado em todos os PDFs. */
  --arara-verde: #15532E;         /* marca; 9.10:1 com branco */
  --arara-verde-escuro: #0E3A20;  /* hover/ativo; 12.77:1 com branco */
  --arara-verde-profundo: #094C2B;/* faixa do rodapé do timbrado */
  --arara-vermelho: #B71D1F;      /* apoio da marca; 6.54:1 com branco */
  --arara-azul: #3A4151;          /* azul-grafite dos subtítulos institucionais */

  /* ------------------------------------------------------------------ NEUTROS
     Esfriados com um traço de verde, para conversarem com a marca. */
  --cor-fundo: #F6F7F6;           /* fundo da aplicação */
  --cor-superficie: #FFFFFF;      /* cards, tabelas, modais */
  --cor-superficie-alt: #EDEFEE;  /* cabeçalho de tabela, faixas alternadas */

  --cor-texto: #1B1F1D;           /* 16.66:1 em branco */
  --cor-texto-suave: #55605A;     /*  6.55:1 em branco — texto secundário */
  --cor-texto-auxiliar: #6B756F;  /*  4.77:1 em branco — mínimo permitido p/ texto */
  --cor-texto-invertido: #FFFFFF;

  --cor-borda: #DDE2E0;           /* separador DECORATIVO — não delimita componente */
  --cor-borda-forte: #7E8A84;     /* borda de input/controle; 3.59:1 — exigido por 1.4.11 */

  /* --------------------------------------------------------------- SEMÂNTICOS
     Cada família tem: -fundo (superfície sutil), -borda, -texto (sobre o fundo
     sutil) e -solido (fundo cheio, sempre com texto branco). */
  --sucesso-fundo: #E4ECE7;
  --sucesso-borda: #B9CFC2;
  --sucesso-texto: #0E3A20;       /* 10.61:1 sobre sucesso-fundo */
  --sucesso-solido: #15532E;      /*  9.10:1 com branco */

  --atencao-fundo: #FDF3E2;
  --atencao-borda: #EBCF9B;
  --atencao-texto: #7A4A03;       /* 6.80:1 sobre atencao-fundo */
  --atencao-solido: #7A4A03;      /* 7.48:1 com branco — âmbar puro reprova em AA */

  --perigo-fundo: #FDECEC;
  --perigo-borda: #F0BFC0;
  --perigo-texto: #8E1114;        /* 8.21:1 sobre perigo-fundo */
  --perigo-solido: #B71D1F;       /* 6.54:1 com branco */

  --info-fundo: #E7F0F7;
  --info-borda: #B8D2E6;
  --info-texto: #0F3D5C;          /* 9.88:1 sobre info-fundo */
  --info-solido: #0F3D5C;

  --neutro-fundo: #EDEFEE;
  --neutro-borda: #D2D8D5;
  --neutro-texto: #464F4A;        /* 7.34:1 sobre neutro-fundo */
  --neutro-solido: #55605A;       /* 6.55:1 com branco */

  /* ----------------------------------------------------------------- SEMÁFORO
     Apelidos semânticos das famílias acima. O componente de prazo usa SEMPRE
     estes nomes, nunca as cores cruas — assim a régua vive num lugar só. */
  --prazo-vencido-fundo: var(--perigo-fundo);
  --prazo-vencido-texto: var(--perigo-texto);
  --prazo-vencido-solido: var(--perigo-solido);

  --prazo-critico-fundo: var(--perigo-fundo);
  --prazo-critico-texto: var(--perigo-texto);
  --prazo-critico-solido: var(--perigo-solido);

  --prazo-atencao-fundo: var(--atencao-fundo);
  --prazo-atencao-texto: var(--atencao-texto);
  --prazo-atencao-solido: var(--atencao-solido);

  --prazo-regular-fundo: var(--sucesso-fundo);
  --prazo-regular-texto: var(--sucesso-texto);
  --prazo-regular-solido: var(--sucesso-solido);

  --prazo-sem-fundo: var(--neutro-fundo);
  --prazo-sem-texto: var(--neutro-texto);
  --prazo-sem-solido: var(--neutro-solido);

  /* -------------------------------------------------------------- TIPOGRAFIA
     Sem webfont: fila do sistema, para não depender de rede nem de build. */
  --fonte-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                Arial, "Noto Sans", sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
                "Liberation Mono", monospace;

  --texto-titulo: 1.5rem;      /* 24px — h1 da página */
  --texto-subtitulo: 1.125rem; /* 18px — h2 de seção, cabeçalho de card */
  --texto-corpo: 0.9375rem;    /* 15px — leitura padrão */
  --texto-label: 0.8125rem;    /* 13px — rótulo de campo, cabeçalho de tabela */
  --texto-auxiliar: 0.75rem;   /* 12px — ajuda, legenda, metadado */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  --altura-linha-apertada: 1.25; /* títulos */
  --altura-linha-base: 1.5;      /* corpo */

  /* --------------------------------------------------------------- ESPAÇAMENTO
     Escala fechada. Fora dela, nada — é o que impede o "mb-3 aqui, mb-4 ali". */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-12: 48px;

  /* ------------------------------------------------------- RAIOS E ELEVAÇÃO
     Sombras contidas: sistema de trabalho, não vitrine. */
  --raio-sm: 4px;
  --raio-md: 6px;   /* padrão de botões, inputs e badges */
  --raio-lg: 10px;  /* cards e modais */
  --raio-pill: 999px;

  --sombra-sutil: 0 1px 2px rgba(27, 31, 29, .06);
  --sombra-card: 0 1px 3px rgba(27, 31, 29, .08);
  --sombra-flutuante: 0 6px 16px rgba(27, 31, 29, .14); /* dropdown, modal */

  --borda-fina: 1px solid var(--cor-borda);
  --borda-controle: 1px solid var(--cor-borda-forte);

  /* ------------------------------------------------------------------- FOCO
     Anel DUPLO, e não uma cor só. Nenhuma cor isolada alcança 3:1 ao mesmo
     tempo sobre o fundo claro e sobre o verde da marca (o azul chega a 1.74
     sobre o verde). O halo branco separa o núcleo escuro de qualquer fundo:
       halo branco  sobre verde da marca .... 9.10:1
       núcleo escuro sobre o halo/fundo ..... 10.68:1 */
  --foco-halo: #FFFFFF;
  --foco-nucleo: #0B3B66;
  --anel-foco: 0 0 0 2px var(--foco-halo), 0 0 0 4px var(--foco-nucleo);

  /* --------------------------------------------------------------- MOVIMENTO */
  --transicao-rapida: 120ms ease;
  --transicao-base: 180ms ease;

  /* ------------------------------------------------------------- LAYOUT/Z */
  --largura-sidebar: 260px;
  --altura-navbar: 58px;
  --largura-max-formulario: 880px;  /* limite de linha em formulário */
  --largura-max-leitura: 68ch;      /* limite de linha em texto corrido */

  --z-sticky: 100;
  --z-navbar: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-aviso: 500;
}

/* ============================================================================
   UTILITÁRIAS BASE
   Só o que é fundação. Componentes ficam em ux-componentes.md / Fase C.
   ============================================================================ */

/* ------------------------------------------------------------------- foco
   Um único padrão para todo elemento interativo. :focus-visible evita o anel
   no clique de mouse, mantendo-o para teclado.

   O !important é deliberado e restrito a esta regra: `.form-control:focus` e
   `.btn:focus` do Bootstrap têm especificidade maior e apagariam o anel. Foco
   visível é requisito de acessibilidade (WCAG 2.4.7) e não pode depender de
   qual componente foi aplicado antes. */
.foco-anel:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--anel-foco) !important;
  border-radius: var(--raio-sm);
}

/* Alvo mínimo de 24×24px (WCAG 2.2 AA — 2.5.8 Tamanho do Alvo). */
.alvo-minimo {
  min-width: 24px;
  min-height: 24px;
}

/* Visível só para leitor de tela — para dar nome a controle sem texto. */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pular para o conteúdo: primeiro elemento focável da página. */
.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: var(--esp-2);
  z-index: var(--z-aviso);
  padding: var(--esp-2) var(--esp-4);
  background: var(--cor-superficie);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-flutuante);
}
.pular-conteudo:focus {
  left: var(--esp-4);
}

/* ------------------------------------------------------------- tipografia */
.t-titulo {
  font-size: var(--texto-titulo);
  font-weight: var(--peso-forte);
  line-height: var(--altura-linha-apertada);
  color: var(--cor-texto);
}
.t-subtitulo {
  font-size: var(--texto-subtitulo);
  font-weight: var(--peso-forte);
  line-height: var(--altura-linha-apertada);
  color: var(--cor-texto);
}
.t-corpo {
  font-size: var(--texto-corpo);
  line-height: var(--altura-linha-base);
  color: var(--cor-texto);
}
.t-label {
  font-size: var(--texto-label);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
}
.t-auxiliar {
  font-size: var(--texto-auxiliar);
  line-height: var(--altura-linha-base);
  color: var(--cor-texto-auxiliar);
}
.t-numero {
  font-variant-numeric: tabular-nums; /* alinha dígitos em coluna de tabela */
}

/* ------------------------------------------------------------- espaçamento */
.pilha-1 > * + * { margin-top: var(--esp-1); }
.pilha-2 > * + * { margin-top: var(--esp-2); }
.pilha-3 > * + * { margin-top: var(--esp-3); }
.pilha-4 > * + * { margin-top: var(--esp-4); }
.pilha-6 > * + * { margin-top: var(--esp-6); }

/* ------------------------------------------------------------------ estados
   Só a classe explícita. NÃO capturar [disabled] no seletor: o Bootstrap já o
   estiliza, e `pointer-events: none` num campo desabilitado impediria até o
   foco por teclado, quebrando comportamento existente. */
.esta-desabilitado {
  opacity: .55;
  cursor: not-allowed;
}
[aria-busy="true"] {
  cursor: progress;
}

/* ---------------------------------------------------------- acessibilidade
   Respeita quem pediu menos animação no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modo de alto contraste do Windows: o anel de foco não pode sumir. */
@media (forced-colors: active) {
  .foco-anel:focus-visible,
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
  }
}