/* ============================================================
   PRUMA — Design tokens v1
   Light-first. Dark mode derives from these later, never the reverse.
   ============================================================ */
:root {
  /* ---- Brand ---- */
  --brand: #0C5A87;            /* rio profundo — links, ações, marca. 6.2:1 on --surface-0 */
  --brand-ink: #093F5F;        /* hover / pressed */
  --brand-tint: #E8F1F7;

  /* ---- Neutrals (cool, low-chroma) ---- */
  --ink: #182026;              /* texto primário   14.9:1 */
  --ink-2: #4E5A63;            /* texto secundário  7.3:1 */
  --ink-3: #7A858E;            /* rótulos, metadados 4.6:1 */
  --line: #E3E7EA;             /* bordas, divisores */
  --line-strong: #C9D0D5;

  /* ---- Surfaces ---- */
  --surface-0: #FFFFFF;        /* cartões, painéis */
  --surface-1: #F6F8F9;        /* fundo de página */
  --surface-2: #EEF1F3;        /* frisos, faixas, chips */

  /* ---- Risk scale (semantic; each state = ink / fill / tint) ----
     ink : texto e ícones sobre superfícies claras (AA ≥ 4.5:1)
     fill: marcadores de mapa, barras, badges preenchidos (borda branca 1.5px)
     tint: fundos de badge/bloco (texto sempre em ink) */
  --risk-normal-ink: #166B4C;      /* 5.6:1 */
  --risk-normal-fill: #1F9D6B;
  --risk-normal-tint: #E4F4EC;

  --risk-attention-ink: #8C4E03;   /* 5.4:1 */
  --risk-attention-fill: #F0A11B;
  --risk-attention-tint: #FCF1DC;

  --risk-alert-ink: #B42318;       /* 5.9:1 */
  --risk-alert-fill: #DE3B2E;
  --risk-alert-tint: #FCE9E7;

  --risk-flood-ink: #6D28D9;       /* 5.8:1 — cota de inundação excedida */
  --risk-flood-fill: #8B5CF6;
  --risk-flood-tint: #F1EBFD;

  --risk-stale-ink: #5F6672;       /* 5.9:1 — estação sem dados */
  --risk-stale-fill: #9AA3AC;
  --risk-stale-tint: #EEF0F2;

  /* ---- Type ----
     Pilha de sistema: zero webfonts, rápido em 3G, nativo em cada aparelho.
     Números sempre tabulares. */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 12px;   /* metadados, eixos de gráfico */
  --text-sm: 13px;   /* rótulos, legendas */
  --text-md: 15px;   /* corpo */
  --text-lg: 17px;   /* corpo destacado */
  --text-xl: 22px;   /* títulos de seção */
  --text-2xl: 28px;  /* título de página */
  --display: 64px;   /* o número — nível do rio (mobile) */
  --display-lg: 84px;/* o número (desktop) */

  --leading-tight: 1.1;
  --leading: 1.5;
  --tracking-caps: 0.06em; /* rótulos em MAIÚSCULAS */

  /* ---- Spacing (escala de 4px) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---- Radii ---- */
  --r-sm: 6px;    /* chips, badges */
  --r-md: 10px;   /* cartões, botões */
  --r-lg: 16px;   /* painéis, blocos hero */
  --r-full: 999px;

  /* ---- Shadows (discretas — profundidade, não decoração) ---- */
  --shadow-sm: 0 1px 2px rgba(24,32,38,.06);
  --shadow-md: 0 2px 8px rgba(24,32,38,.08), 0 1px 2px rgba(24,32,38,.05);
  --shadow-float: 0 4px 16px rgba(24,32,38,.12); /* cartões sobre o mapa */

  /* ---- Motion ---- */
  --dur-fast: 120ms;  /* hover, foco */
  --dur-base: 200ms;  /* expansão, troca de aba */
  --ease: cubic-bezier(.2,.6,.2,1);
}
/* Regra de acessibilidade: estado de risco NUNCA é só cor.
   Todo uso de --risk-* vem acompanhado de ícone (forma distinta por estado)
   e rótulo textual. Formas: ✓ círculo (normal), ▲ triângulo (atenção),
   ⬥ losango (alerta), ⏶⏶ seta dupla (inundação), ○ tracejado (sem dados). */