/* ==========================================================================
   DESIGN SYSTEM - ONG Mãos que Ajudam
   Variáveis (tokens) de cor, tipografia, espaçamento e efeitos, além do
   reset e dos estilos base. Todos os outros arquivos CSS usam só estas
   variáveis, então uma mudança aqui se reflete no site inteiro.
   ========================================================================== */

:root {
  /* ---------- Cores primárias (azul do logo) ---------- */
  --cor-primaria: #1e6fb8;
  --cor-primaria-escura: #15528a;
  --cor-primaria-clara: #e8f1fa;

  /* ---------- Cores secundárias (verde e laranja das ilustrações) ---------- */
  --cor-secundaria: #2e7d4f;
  --cor-secundaria-clara: #e9f6ec;
  --cor-destaque: #f2a33a;
  --cor-destaque-clara: #fff4e0;

  /* ---------- Cores de estado (feedback) ---------- */
  --cor-sucesso: #2e7d4f;
  --cor-erro: #b3261e;
  --cor-erro-clara: #fdecea;
  --cor-aviso: #8a5a00;
  --cor-aviso-clara: #fff4e0;
  --cor-info: #1e6fb8;

  /* ---------- Tons neutros ---------- */
  --cor-texto: #1f2933;
  --cor-texto-suave: #52606d;
  --cor-borda: #cbd2d9;
  --cor-fundo: #f5f7fa;
  --cor-superficie: #ffffff;

  /* ---------- Tipografia ---------- */
  /* Fontes do sistema: carregam na hora, sem download extra */
  --fonte-principal: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala modular de razão 1.25 (terça maior) a partir de 16px */
  --fonte-xs: 0.8rem;      /* 12.8px - legendas e rodapé */
  --fonte-sm: 0.875rem;    /* 14px   - badges e textos auxiliares */
  --fonte-base: 1rem;      /* 16px   - texto corrido */
  --fonte-md: 1.25rem;     /* 20px   - h4 e destaques */
  --fonte-lg: 1.563rem;    /* 25px   - h3 */
  --fonte-xl: 1.953rem;    /* 31px   - h2 */
  --fonte-xxl: 2.441rem;   /* 39px   - h1 */

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

  --altura-linha: 1.6;
  --altura-linha-titulo: 1.25;

  /* ---------- Espaçamentos (escala modular de 8px) ---------- */
  --esp-1: 0.25rem;  /* 4px  */
  --esp-2: 0.5rem;   /* 8px  */
  --esp-3: 1rem;     /* 16px */
  --esp-4: 1.5rem;   /* 24px */
  --esp-5: 2rem;     /* 32px */
  --esp-6: 3rem;     /* 48px */
  --esp-7: 4rem;     /* 64px */

  /* ---------- Bordas, sombras e transições ---------- */
  --raio-sm: 4px;
  --raio-md: 8px;
  --raio-lg: 16px;
  --raio-pilula: 999px;

  --sombra-sm: 0 1px 3px rgba(31, 41, 51, 0.12);
  --sombra-md: 0 4px 12px rgba(31, 41, 51, 0.12);
  --sombra-lg: 0 12px 32px rgba(31, 41, 51, 0.18);

  --transicao: 0.2s ease-in-out;

  /* ---------- Layout ---------- */
  --largura-maxima: 1200px;
  --altura-cabecalho: 72px;

  /* ---------- Camadas (z-index) ---------- */
  --z-cabecalho: 100;
  --z-menu: 200;
  --z-toast: 300;
}

/* ==========================================================================
   RESET E BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

/* Links internos (#id) não ficam escondidos atrás do cabeçalho fixo */
[id] {
  scroll-margin-top: calc(var(--altura-cabecalho) + var(--esp-3));
}

body {
  margin: 0;
  font-family: var(--fonte-principal);
  font-size: var(--fonte-base);
  line-height: var(--altura-linha);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Hierarquia tipográfica ---------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--esp-3);
  line-height: var(--altura-linha-titulo);
  font-weight: var(--peso-forte);
  color: var(--cor-texto);
}

h1 { font-size: var(--fonte-xl); }
h2 { font-size: var(--fonte-lg); color: var(--cor-primaria-escura); }
h3 { font-size: var(--fonte-md); }
h4 { font-size: var(--fonte-base); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-texto-suave); }

/* Títulos crescem em telas maiores (tipografia escalável) */
@media (min-width: 768px) {
  h1 { font-size: var(--fonte-xxl); }
  h2 { font-size: var(--fonte-xl); }
  h3 { font-size: var(--fonte-lg); }
  h4 { font-size: var(--fonte-md); }
}

p,
ul,
ol {
  margin: 0 0 var(--esp-3);
}

small {
  font-size: var(--fonte-xs);
}

a {
  color: var(--cor-primaria);
  text-underline-offset: 3px;
  transition: color var(--transicao);
}

a:hover {
  color: var(--cor-primaria-escura);
}

/* Foco visível para quem navega pelo teclado */
:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 2px;
}

/* Respeita quem prefere menos animações */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */

/* Esconde visualmente, mas mantém para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo": aparece só ao receber foco */
.pular-conteudo {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: var(--z-toast);
  padding: var(--esp-2) var(--esp-3);
  background-color: var(--cor-texto);
  color: var(--cor-superficie);
  border-radius: var(--raio-sm);
  transform: translateY(-200%);
}

.pular-conteudo:focus {
  transform: translateY(0);
  color: var(--cor-superficie);
}

.texto-centro { text-align: center; }
.texto-suave { color: var(--cor-texto-suave); }