/* ================================================================
   VARIABLES.CSS - Variáveis globais do site */

:root {
  /* ---------- CORES PRINCIPAIS (identidade Plano A) ---------- */
  --cor-primaria: #104591;           /* Azul do logo Plano A - cor principal */
  --cor-primaria-escura: #0A2E5E;    /* Azul escuro - usado em hover e footer */
  --cor-primaria-clara: #1C65B8;     /* Azul mais claro - usado em gradientes */

  /* ---------- COR DE DESTAQUE (CTA / chamadas de ação) ---------- */
  --cor-destaque: #FF7A1A;           /* Laranja vibrante - botões de ação */
  --cor-destaque-escura: #E56400;    /* Laranja hover */

  /* ---------- CORES NEUTRAS ---------- */
  --cor-branco: #FFFFFF;
  --cor-preto: #0F172A;
  --cor-cinza-claro: #F8FAFC;        /* Fundo de seções alternadas */
  --cor-cinza-medio: #E2E8F0;        /* Bordas, divisórias */
  --cor-cinza-texto: #64748B;        /* Texto secundário */

  /* ---------- CORES DE FEEDBACK (formulários) ---------- */
  --cor-sucesso: #10B981;
  --cor-erro: #EF4444;

  /* ---------- WHATSAPP ---------- */
  --cor-whatsapp: #25D366;
  --cor-whatsapp-escura: #1EBE5D;

  /* ---------- TIPOGRAFIA ---------- */
  /* Fontes carregadas no HTML via Google Fonts */
  --fonte-titulo: 'Poppins', 'Segoe UI', sans-serif;
  --fonte-corpo: 'Poppins', 'Segoe UI', sans-serif;

  /* Tamanhos de fonte (mobile-first: valores base) */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-3xl: 1.875rem;  /* 30px */
  --fs-4xl: 2.25rem;   /* 36px */
  --fs-5xl: 3rem;      /* 48px */

  /* ---------- ESPAÇAMENTOS ---------- */
  --espaco-xs: 0.5rem;    /* 8px */
  --espaco-sm: 1rem;      /* 16px */
  --espaco-md: 1.5rem;    /* 24px */
  --espaco-lg: 2rem;      /* 32px */
  --espaco-xl: 3rem;      /* 48px */
  --espaco-2xl: 4rem;     /* 64px */
  --espaco-3xl: 6rem;     /* 96px */

  /* ---------- BORDAS ---------- */
  --raio-sm: 0.375rem;   /* 6px */
  --raio-md: 0.5rem;     /* 8px */
  --raio-lg: 0.75rem;    /* 12px */
  --raio-xl: 1rem;       /* 16px */
  --raio-full: 9999px;   /* pílula/círculo */

  /* ---------- SOMBRAS ---------- */
  --sombra-sm: 0 1px 3px rgba(16, 69, 145, 0.1), 0 1px 2px rgba(16, 69, 145, 0.06);
  --sombra-md: 0 4px 12px rgba(16, 69, 145, 0.10), 0 2px 4px rgba(16, 69, 145, 0.06);
  --sombra-lg: 0 12px 32px rgba(16, 69, 145, 0.12), 0 4px 8px rgba(16, 69, 145, 0.08);
  --sombra-xl: 0 24px 48px rgba(16, 69, 145, 0.18);

  /* ---------- GRADIENTES ---------- */
  --gradiente-hero: linear-gradient(135deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 60%, var(--cor-primaria-clara) 100%);
  --gradiente-card: linear-gradient(135deg, rgba(16, 69, 145, 0.05), rgba(28, 101, 184, 0.08));
  --gradiente-cta: linear-gradient(135deg, var(--cor-destaque) 0%, var(--cor-destaque-escura) 100%);

  /* ---------- TRANSIÇÕES ---------- */
  --transicao-rapida: all 0.2s ease;
  --transicao-suave: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- LAYOUT ---------- */
  --largura-maxima: 1200px;          /* Largura máxima do conteúdo */
  --altura-header: 80px;             /* Altura fixa do cabeçalho */

  /* ---------- Z-INDEX (ordem de empilhamento) ---------- */
  --z-base: 1;
  --z-menu: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-whatsapp: 950;
  --z-modal: 1000;
}