/* ===========================
   VARIABLES.CSS — WCosta Marketing
   Edite aqui e o site inteiro atualiza.
   Nunca use cor solta no CSS — sempre via var()
   =========================== */

:root {
  /* ---- Cores principais da marca ---- */
  --azul-eletrico: #0068DB;     /* CTA, links, destaques — Azul WCosta */
  --preto: #050A12;              /* fundo hero, seções dark — Preto-Azulado */
  --cinza-claro: #B0C4D6;        /* acentos, bordas suaves — Azul-Aço */

  /* ---- Cores derivadas ---- */
  --azul-escuro: #0A1A2F;        /* gradientes profundos — Azul Profundo */
  --azul-glow: #0080FF;          /* hover, brilho (derivado do Azul WCosta) */
  --branco: #FFFFFF;             /* fundo seções claras */
  --cinza-fundo: #F7F9FB;        /* fundo alternativo claro */
  --cinza-texto: #2C2C2C;        /* texto em fundo claro */
  --cinza-medio: #6B7280;        /* texto secundário */
  --cinza-borda: #E5E7EB;        /* divisores em modo claro */

  /* ---- WhatsApp ---- */
  --verde-whatsapp: #25D366;

  /* ---- Gradientes-assinatura ---- */
  --gradient-hero: radial-gradient(ellipse at center, #0A1A2F 0%, #050A12 70%);
  --gradient-azul: linear-gradient(135deg, #0068DB 0%, #0A1A2F 100%);

  /* ---- Sombras ---- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-header: 0 2px 24px rgba(0, 0, 0, 0.12);
  --shadow-azul: 0 4px 20px rgba(0, 104, 219, 0.30);
  --shadow-azul-hover: 0 8px 30px rgba(0, 104, 219, 0.50);

  /* ---- Tipografia ---- */
  --font-display: 'Montserrat', sans-serif;   /* títulos, hero, CTAs */
  --font-body: 'Open Sans', sans-serif;       /* parágrafos, menus, formulários */

  /* ---- Espaçamentos ---- */
  --section-padding: 96px 0;
  --section-padding-mobile: 64px 0;
  --container-max: 1200px;
  --container-padding: 24px;

  /* ---- Transições ---- */
  --transition-fast: 200ms ease;
  --transition-base: 300ms ease;

  /* ---- Border radius ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-full: 50px;
}