/*
  Tokens de design do Observatório Digital de Resiliência Climática do Recife.
  Fonte: design-system-observatorio-recife.md (seção 25 — "Tokens CSS sugeridos"),
  que substitui a paleta anterior extraída do mockup do Gamma.
  Ajustar apenas se Rod confirmar uma mudança no design system.
*/

:root {
  /* ---------- Cor de marca ---------- */
  --color-brand: #5B6549;           /* Verde Observatório — institucional */
  --color-brand-dark: #3F4832;
  --color-brand-foreground: #F7F6F5; /* texto/símbolo sobre fundo de marca */

  /* ---------- Fundos ---------- */
  --color-background: #F7F6F5;          /* off-white — fundo editorial padrão */
  --color-background-secondary: #E3E0D2; /* creme — fundos secundários/transição */
  --color-white: #FFFFFF;               /* branco puro — uso pontual (ex.: superfícies elevadas) */

  /* ---------- Texto ---------- */
  --color-text: #11110F;            /* texto primário */
  --color-text-secondary: #4E5048;  /* texto secundário/corpo de parágrafo */

  /* ---------- Bordas ---------- */
  --color-border: #D8D6CD;

  /* ---------- Dados / informação ---------- */
  --color-info: #7090FC;       /* azul indicador — gráficos, links destacados, estados informativos */
  --color-info-light: #9DB2FA; /* azul claro — backgrounds de card, elementos secundários de dados */

  /* ---------- Resiliência / sucesso ---------- */
  --color-success: #2F9E41;    /* verde resiliência — sustentabilidade, adaptação, resultados positivos */

  /* Fundo escuro de seção pontual (ex.: bloco "O Efeito 2022" da Home) — pedido específico de Rod, não faz parte da paleta semântica do design system */
  --color-secao-escura: #414A2C;

  /* ---------- Risco (uso funcional, nunca como cor institucional) ---------- */
  --color-risk-very-high: #C62828;
  --color-risk-high: #E76F24;
  --color-risk-medium: #F2B134;
  --color-neutral: #7A7A72;

  /* Cores usadas nos gráficos de barra/linha (ordem sugerida na seção 13 do design system) */
  --grafico-1: #7090FC;
  --grafico-2: #9DB2FA;
  --grafico-3: #2F9E41;
  --grafico-4: #5B6549;

  /* ---------- Tipografia ---------- */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sauce One', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala tipográfica — mobile (ver seção 3 do design system; desktop sobrescreve em base.css) */
  --text-display: 48px;
  --text-h1: 44px;
  --text-h2: 36px;
  --text-h3: 28px;
  --text-h4: 22px;
  --text-lead: 18px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-label: 12px;

  /* ---------- Raio ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --raio-card: var(--radius-lg); /* alias — mantém compatibilidade com o CSS já escrito */

  /* ---------- Espaçamento (múltiplos de 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 128px;

  /* ---------- Contêineres ---------- */
  --container-md: 780px;  /* textos longos */
  --container-lg: 1280px; /* padrão */
  --container-xl: 1440px; /* páginas editoriais amplas */
}

@media (min-width: 1024px) {
  :root {
    --text-display: 72px;
    --text-h1: 64px;
    --text-h2: 48px;
    --text-h3: 32px;
    --text-h4: 24px;
    --text-lead: 20px;
  }
}