/* ============================================================
   A Voz da Cidade — Design System base
   Paleta inspirada na Prefeitura do Recife / Conecta Recife
   ============================================================ */

:root {
  /* Marca */
  --azul-950: #052440;
  --azul-900: #0A3A6B;
  --azul-800: #0C4A8A;
  --azul-700: #0E5AA7;
  --azul-600: #1268C3;
  --azul-500: #2A78D6;
  --azul-400: #5598E7;
  --azul-200: #B7D3F6;
  --azul-100: #E3F0FC;
  --azul-50:  #F2F8FE;

  --amarelo: #FFC20E;
  --amarelo-600: #E0A400;
  --amarelo-100: #FFF3CC;

  /* Status (fixos — nunca reutilizados como série) */
  --ok: #0CA30C;
  --ok-escuro: #006300;
  --ok-100: #E2F6E2;
  --alerta: #FAB219;
  --alerta-100: #FDF0D2;
  --serio: #EC835A;
  --critico: #D03B3B;
  --critico-100: #FBE4E4;

  /* Séries de gráfico (paleta validada) */
  --serie-1: #2A78D6;
  --serie-2: #EB6834;
  --serie-3: #1BAF7A;

  /* Neutros */
  --pagina: #F3F6FA;
  --superficie: #FFFFFF;
  --superficie-2: #F8FAFD;
  --tinta: #10233B;
  --tinta-2: #4A5B70;
  --tinta-3: #83919F;
  --borda: #E2E9F1;
  --borda-forte: #C9D5E3;
  --grade: #ECF0F5;

  /* Geometria */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --sombra-1: 0 1px 2px rgba(10, 42, 74, .06), 0 4px 16px rgba(10, 42, 74, .07);
  --sombra-2: 0 4px 10px rgba(10, 42, 74, .10), 0 16px 40px rgba(10, 42, 74, .14);
  --sombra-3: 0 12px 28px rgba(5, 36, 64, .22), 0 30px 70px rgba(5, 36, 64, .25);

  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--pagina);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--azul-600); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--amarelo); color: var(--azul-950); }

/* ---------- Utilidades compartilhadas ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.chip--azul     { background: var(--azul-100); color: var(--azul-800); }
.chip--amarelo  { background: var(--amarelo-100); color: #7A5A00; }
.chip--ok       { background: var(--ok-100); color: var(--ok-escuro); }
.chip--alerta   { background: var(--alerta-100); color: #7A5200; }
.chip--critico  { background: var(--critico-100); color: #8F2020; }
.chip--neutro   { background: var(--grade); color: var(--tinta-2); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: scale(.985); }

.btn--primario {
  background: linear-gradient(135deg, var(--azul-600), var(--azul-800));
  color: #fff;
  box-shadow: 0 6px 16px rgba(14, 90, 167, .35);
}
.btn--primario:hover { box-shadow: 0 8px 22px rgba(14, 90, 167, .45); }

.btn--amarelo {
  background: var(--amarelo);
  color: var(--azul-950);
  box-shadow: 0 6px 16px rgba(224, 164, 0, .35);
}
.btn--amarelo:hover { background: #FFCD3D; }

.btn--fantasma {
  background: var(--superficie);
  color: var(--azul-700);
  border: 1.5px solid var(--borda-forte);
}
.btn--fantasma:hover { border-color: var(--azul-500); background: var(--azul-50); }

.btn--sutil {
  background: var(--azul-50);
  color: var(--azul-700);
  font-size: 14px;
  padding: 10px 16px;
}
.btn--sutil:hover { background: var(--azul-100); }

/* Toast global */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--azul-950);
  color: #fff;
  padding: 13px 22px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sombra-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 480px);
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast .toast-icone { color: var(--amarelo); flex-shrink: 0; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}