/* ================================================================
   VARIABLES — tokens do design system PlanMed
   Cores extraídas do logo oficial (assets/logos/planmed-logo-completo.png)
   ================================================================ */

:root {
  /* ---------- Identidade PlanMed ---------- */
  --cor-primaria: #0082C7;          /* azul do "Med" */
  --cor-primaria-escura: #0B4E77;   /* header fixo, footer, hover */
  --cor-primaria-clara: #E6F3FA;    /* fundos suaves, destaques leves */
  --cor-secundaria: #00A1A6;        /* teal do "Plan" */
  --cor-secundaria-escura: #00767A;
  --cor-secundaria-clara: #E4F5F5;

  /* ---------- Neutros ---------- */
  --cor-branco: #FFFFFF;
  --cor-fundo: #FFFFFF;
  --cor-fundo-alt: #F5F8FA;         /* seções alternadas */
  --cor-borda: #DDE5EA;
  --cor-borda-forte: #C3D2DB;
  --cor-texto: #14303F;
  --cor-texto-medio: #4A6472;
  --cor-texto-suave: #6B828F;

  /* ---------- Estados e feedback ---------- */
  --cor-atencao: #B3261E;
  --cor-atencao-fundo: #FDF0EF;
  --cor-sucesso: #16794C;
  --cor-sucesso-fundo: #EAF6F0;
  --cor-whatsapp: #25D366;
  --cor-whatsapp-escura: #1EA854;

  /* ---------- Tipografia ---------- */
  --fonte: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg: 1.0625rem;   /* 17px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-4xl: 2.25rem;    /* 36px */
  --fs-5xl: 2.75rem;    /* 44px */
  --fs-6xl: 3.75rem;    /* 60px — só o H1 do hero */

  --lh-apertada: 1.2;
  --lh-titulo: 1.28;
  --lh-corpo: 1.7;

  /* ---------- Espaçamento ---------- */
  --e-xs: 0.5rem;
  --e-sm: 0.75rem;
  --e-md: 1.25rem;
  --e-lg: 2rem;
  --e-xl: 3rem;
  --e-2xl: 4.5rem;
  --e-3xl: 6rem;

  /* ---------- Layout ---------- */
  --largura-max: 1180px;
  --largura-texto: 68ch;    /* medida de leitura confortável */
  --altura-header: 76px;
  --padding-container: 1.25rem;

  /* ---------- Formas ---------- */
  --raio-sm: 4px;
  --raio-md: 8px;
  --raio-lg: 12px;
  --raio-full: 999px;

  /* Sombras discretas — apoio à hierarquia, nunca decoração */
  --sombra-sutil: 0 1px 2px rgba(20, 48, 63, 0.06);
  --sombra-media: 0 4px 16px rgba(20, 48, 63, 0.08);

  /* ---------- Movimento ---------- */
  --transicao: 180ms ease;
  --transicao-lenta: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Empilhamento ---------- */
  --z-conteudo: 1;
  --z-header: 100;
  --z-menu: 150;
  --z-flutuante: 200;
  --z-modal: 300;
}