/* Abrigo Virtual 128 — shared design tokens ("Rota Noturna")
   Load this ONCE in base.html, before any other stylesheet.
   Todos os tokens partilhados vivem aqui — nenhum stylesheet de pagina deve
   voltar a declarar :root. */

:root {
  /* Neutrals */
  --color-bg: oklch(96% 0.016 280);
  --color-surface: oklch(99% 0.008 280);
  --color-text: oklch(20% 0.02 280);
  --color-text-soft: oklch(46% 0.02 280);
  --color-text-faint: oklch(62% 0.02 280);
  --color-border: oklch(90% 0.018 280);

  /* Brand */
  --color-primary: oklch(38% 0.15 290);
  --color-primary-dark: oklch(27% 0.12 290);
  --color-primary-light: oklch(90% 0.045 290);
  /* Azul da rosa dos ventos do CNE, o simbolo do Abrigo. */
  --color-simbolo: #1F5D77;

  /* Categorias de elemento (Pioneiro / Animador).
     Mesma estrutura de luminosidade nas duas categorias; matiz constante por
     categoria. Croma limitado ao gamut sRGB — a L 27% / H 152 o máximo é
     ~0.071. Texto branco por cima em ambos os verdes (9.6:1 e 14.7:1). */
  --color-categoria-pioneiro: var(--color-primary);
  --color-categoria-pioneiro-dark: var(--color-primary-dark);
  --color-categoria-pioneiro-light: var(--color-primary-light);
  --color-categoria-animador: oklch(38% 0.09 152);
  --color-categoria-animador-dark: oklch(27% 0.07 152);
  --color-categoria-animador-light: oklch(90% 0.045 152);

  /* Danger / destructive actions */
  --color-danger: oklch(58% 0.19 25);
  --color-danger-dark: oklch(48% 0.17 25);

  /* Accents */
  --color-accent-lime: oklch(82% 0.19 130);
  --color-accent-lime-ink: oklch(25% 0.05 130);
  --color-accent-pink: oklch(68% 0.19 350);
  --color-accent-pink-light: oklch(93% 0.05 350);
  /* Rosa: branco por cima só dá 3.17:1 — usar -ink como texto sobre o rosa
     (5.14:1). Para rosa como *texto* em fundo claro usar -dark (6.9:1 sobre
     --color-bg); -dark como fundo não serve nos cartões escuros (1.37:1). */
  --color-accent-pink-ink: oklch(25% 0.05 350);
  --color-accent-pink-dark: oklch(46% 0.16 350);
  /* Âmbar: como o lime, exige tinta escura por cima (branco dá só 2.06:1). */
  --color-accent-amber: oklch(78% 0.16 70);
  --color-accent-amber-ink: oklch(28% 0.06 70);
  --color-accent-amber-light: oklch(93% 0.05 70);

  /* Oportunidade / etapa state spectrum */
  --state-nao-iniciado-bg: oklch(92% 0.01 280);
  --state-nao-iniciado-ink: oklch(50% 0.02 280);
  --state-a-caminho-bg: oklch(90% 0.06 230);
  --state-a-caminho-ink: oklch(40% 0.12 230);
  --state-a-validar-bg: oklch(93% 0.05 350);
  --state-a-validar-ink: oklch(46% 0.16 350);
  --state-validado-bg: oklch(90% 0.045 290);
  --state-validado-ink: oklch(38% 0.15 290);
  --state-aprovado-bg: oklch(88% 0.1 130);
  --state-aprovado-ink: oklch(25% 0.05 130);
  --state-parcial-bg: oklch(90% 0.06 230);
  --state-parcial-ink: oklch(40% 0.12 230);
  --state-presente-bg: oklch(85% 0.09 152);
  --state-presente-ink: oklch(28% 0.08 152);
  --state-ausente-bg: oklch(90% 0.08 24);
  --state-ausente-ink: oklch(40% 0.15 24);

  /* Type */
  --font-title: 'Sora', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Shape / elevation */
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 40px -14px rgba(30, 20, 60, .3);

  /* Motion. Nome em portugues por ser o que os ~20 sitios ja usam;
     renomear para --transition implica tocar em todos.
     Use --transicao-tempo quando quiser animar so uma propriedade:
     `transition: border-color var(--transicao-tempo)`. Com --transicao a
     shorthand fica "border-color all .2s ease", que e invalida e cai fora. */
  --transicao-tempo: .2s ease;
  --transicao: all var(--transicao-tempo);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

a { color: var(--color-primary); text-decoration: none; }
/* O escurecer no hover é para ligações de texto. O `:where(a)` tira o peso ao
   seletor de elemento: a regra fica com a especificidade só do `:hover`
   — (0,1,0) —, o suficiente para vencer o seletor `a` base mas não uma classe.
   Assim, qualquer <a> a que uma classe dê cor (os botões: primario, gestao-btn,
   pp-btn, filtros-btn-limpar, e os que vierem) mantém a sua cor no hover sem a
   reafirmar defensivamente — esta folha carrega antes de todas as outras, por
   isso o empate de especificidade com a classe resolve-se sempre a favor dela.
   docs/specs/core/contraste-hover-botoes.md */
:where(a):hover { color: var(--color-primary-dark); }

/* Badge-estado helper classes — reuse instead of hardcoded hexes */
.badge-estado--0  { background: var(--state-nao-iniciado-bg); color: var(--state-nao-iniciado-ink); }
.badge-estado--10 { background: var(--state-a-caminho-bg);    color: var(--state-a-caminho-ink); }
.badge-estado--20 { background: var(--state-a-validar-bg);    color: var(--state-a-validar-ink); }
.badge-estado--30 { background: var(--state-validado-bg);     color: var(--state-validado-ink); }
.badge-estado--40 { background: var(--state-aprovado-bg);     color: var(--state-aprovado-ink); }