/* ==========================================================================
   variables.css
   Tokens de design (cores, tipografia, espaçamentos) em CSS Custom Properties.
   Carregar este arquivo ANTES dos demais para que todos herdem os tokens.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Paleta de cores (referência cores.png)
     Uso sóbrio: neutros e azuis dominam; laranja/coral apenas como acento.
     -------------------------------------------------------------------- */
  --cor-neutro: #d9d9d9;          /* cinza neutro: base, seções, divisores */
  --cor-azul-claro: #92b5e7;      /* azul claro: detalhes, hover discreto   */
  --cor-azul-acinzentado: #78849c;/* texto secundário, ícones, traços marca */
  --cor-azul-escuro: #042387;     /* títulos fortes, footer, contraste      */
  --cor-laranja: #ff9563;         /* acento principal: CTAs, links          */
  --cor-coral: #ff6f5b;           /* acento secundário: hover de botões     */
  --cor-pessego: #e3be9b;         /* gradientes/transições suaves           */

  /* Neutros utilitários derivados */
  --cor-branco: #ffffff;
  --cor-fundo: #f5f6f8;           /* fundo claro base                       */
  --cor-fundo-alt: #eceef2;       /* fundo alternado de seções              */
  --cor-borda: #dfe3ea;           /* divisores sutis                        */
  --cor-texto: #0f1b3d;           /* texto principal (azul bem escuro)      */
  --cor-texto-suave: #78849c;     /* texto secundário                       */

  /* --------------------------------------------------------------------
     Gradientes da paleta (usados com elegância no hero / acentos)
     -------------------------------------------------------------------- */
  --grad-acento: linear-gradient(135deg, var(--cor-laranja), var(--cor-coral));
  --grad-hero: linear-gradient(135deg, #042387 0%, #1f3aa6 45%, #78849c 100%);
  --grad-suave: linear-gradient(135deg, var(--cor-pessego), var(--cor-azul-claro));

  /* --------------------------------------------------------------------
     Tipografia
     -------------------------------------------------------------------- */
  --fonte-titulo: "Space Grotesk", "Segoe UI", sans-serif;
  --fonte-corpo: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Escala tipográfica fluida (usa clamp para responsividade) */
  --fs-hero: clamp(2.5rem, 6vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 4vw, 2.75rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-corpo: 1rem;
  --fs-lead: clamp(1.05rem, 1.6vw, 1.2rem);
  --fs-pequeno: 0.875rem;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-bold: 700;
  --altura-linha: 1.65;

  /* --------------------------------------------------------------------
     Espaçamentos (escala consistente)
     -------------------------------------------------------------------- */
  --esp-xs: 0.5rem;
  --esp-sm: 1rem;
  --esp-md: 1.5rem;
  --esp-lg: 2.5rem;
  --esp-xl: 4rem;
  --esp-xxl: 6rem;

  /* Padding vertical padrão das seções */
  --secao-py: clamp(4rem, 9vw, 7rem);

  /* --------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-px: clamp(1.25rem, 5vw, 3rem);
  --navbar-altura: 72px;

  /* --------------------------------------------------------------------
     Cantos arredondados
     -------------------------------------------------------------------- */
  --raio-sm: 8px;
  --raio-md: 16px;
  --raio-lg: 24px;
  --raio-full: 999px;

  /* --------------------------------------------------------------------
     Sombras
     -------------------------------------------------------------------- */
  --sombra-sm: 0 2px 8px rgba(4, 35, 135, 0.06);
  --sombra-md: 0 10px 30px rgba(4, 35, 135, 0.08);
  --sombra-lg: 0 20px 50px rgba(4, 35, 135, 0.12);
  --sombra-acento: 0 12px 28px rgba(255, 111, 91, 0.28);

  /* --------------------------------------------------------------------
     Transições e camadas (z-index)
     -------------------------------------------------------------------- */
  --trans-rapida: 0.2s ease;
  --trans-media: 0.35s ease;
  --trans-lenta: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  --z-navbar: 1000;
  --z-menu: 1100;
}