/* ==========================================================================
   Variáveis do site (tokens do docs/DESIGN.md)
   Altere cores e fontes somente aqui.
   ========================================================================== */

:root {
  /* ---------- Cores (somente azul, branco e cinza) ---------- */
  --azul-marinho: #001736; /* fundos escuros principais (hero, rodapé) */
  --azul-escuro: #152944;  /* seções escuras alternadas, títulos */
  --azul-marca: #29297F;   /* azul do logo: botões, links, destaques */
  --azul-medio: #012F6A;   /* hover de botões, ícones, detalhes */
  --azul-claro: #98BBDB;   /* detalhes sobre fundo escuro, linhas, tags */
  --branco: #FFFFFF;
  --cinza-fundo: #F5F5F7;  /* fundo de seções claras alternadas */
  --cinza-borda: #E1E2E4;  /* bordas e divisórias */
  --cinza-texto: #5B6270;  /* texto corrido secundário */
  --texto: #152944;        /* texto principal sobre fundo claro */

  /* ---------- Fontes ---------- */
  --fonte-titulo: "Montserrat", "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Inter", "Segoe UI", Arial, sans-serif;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-negrito: 700;

  --altura-linha: 1.6;
  --altura-linha-titulo: 1.2;

  /* ---------- Tamanhos de texto (fluidos) ---------- */
  --tamanho-base: 1rem;                              /* 16px */
  --tamanho-pequeno: 0.875rem;                       /* 14px */
  --tamanho-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --tamanho-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --tamanho-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --tamanho-destaque: clamp(1.25rem, 1rem + 1vw, 1.75rem); /* citações e frases de destaque */

  /* ---------- Espaçamentos ---------- */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 1rem;
  --espaco-4: 1.5rem;
  --espaco-5: 2rem;
  --espaco-6: 3rem;
  --espaco-7: 4rem;
  --espaco-secao: clamp(4rem, 3rem + 4vw, 7rem); /* respiro vertical das seções */

  /* ---------- Layout ---------- */
  --largura-conteudo: 1200px;
  --margem-lateral: 1rem;   /* 16px no celular; ampliada nas media queries */
  --altura-menu: 72px;

  /* Pontos de quebra (referência; variáveis não funcionam em @media):
     640px, 960px, 1280px */

  /* ---------- Componentes ---------- */
  --raio-botao: 8px;
  --raio-card: 16px;
  --borda: 1px solid var(--cinza-borda);
  --sombra-leve: 0 2px 8px rgba(0, 23, 54, 0.06);
  --sombra-hover: 0 12px 32px rgba(0, 23, 54, 0.12);

  /* ---------- Movimento ---------- */
  --transicao: 0.25s ease;
  --transicao-entrada: 0.6s ease;
}