/* ============================================================
   GESTÃO EM SAÚDE — Design Tokens v1.0
   Base: Especificação de Design — Website 2026
   ============================================================ */

:root {
  /* ---------- Cores da marca (mandala Gestão em Saúde) ---------- */
  --brand:      #2D3192;  /* Índigo oficial da marca-mãe — logo, detalhes, gradientes */
  --brand-700:  #242777;  /* Índigo escuro — gradientes premium */
  --brand-100:  #E5E6F4;  /* Índigo claro — fundos de pill de marca */

  /* ---------- Cores: marca e ação (híbrido sutil: navy puxado p/ índigo) ---------- */
  --ink:        #101A3D;  /* Navy-índigo profundo — títulos, footer, blocos escuros */
  --navy-800:   #182350;  /* Superfície de card sobre navy */
  --navy-700:   #20296A;  /* Fim de gradientes */
  --blue-600:   #1E56D6;  /* Azul de ação — botão primário, links, ativo */
  --blue-500:   #2E66EC;  /* Hover do botão primário */
  --blue-100:   #DCE6FA;  /* Bordas de pill-tag, hover de card */
  --blue-50:    #EEF3FC;  /* Fundo de pill-tag, ícones, checks */
  --orange-500: #F26B21;  /* Acento operacional — CTA orçamento, dots */
  --orange-600: #DD5A12;  /* Hover do botão accent, kickers */
  --orange-100: #FDE7D8;  /* Fundo de pill-tag laranja, ícones de stats */
  --ready:      #1FA567;  /* Verde "em prontidão" — status dots, checks */

  /* ---------- Neutros e texto ---------- */
  --white:        #FFFFFF;
  --paper:        #F6F8FB;
  --line:         #DFE6F0;
  --line-dark:    rgba(255,255,255,0.14);
  --text:         #25334B;
  --text-soft:    #5A6B85;
  --text-inv:     #EAF0FA;
  --text-inv-soft:#9FB2D2;

  /* ---------- Gradientes ---------- */
  --grad-hero:
    radial-gradient(1200px 600px at 85% -10%, var(--blue-50), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--white) 75%);
  --grad-cta: linear-gradient(135deg, var(--blue-600), var(--brand-700) 92%);

  /* ---------- Tipografia ---------- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Public Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --fs-hero:    clamp(34px, 5.2vw, 56px);
  --fs-h2:      clamp(30px, 3.6vw, 46px);
  --fs-h3:      clamp(22px, 2.2vw, 30px);
  --fs-h4:      20px;
  --fs-body-lg: clamp(17px, 1.4vw, 19px);
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-mono:    13px;

  /* ---------- Espaçamento & forma (densidade: regular) ---------- */
  --sec-pad:   104px;
  --block-gap: 56px;
  --card-gap:  24px;
  --card-pad:  32px;

  --container: 1440px;
  --pad-x:     48px;

  --r-xl:   24px;
  --r-lg:   18px;
  --r-md:   12px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(10,30,60,.05), 0 8px 28px rgba(10,30,60,.07);
  --shadow-pop:  0 12px 40px rgba(10,30,60,.16);
  --shadow-glow-blue:   0 8px 24px rgba(30,86,214,.32);
  --shadow-glow-orange: 0 8px 24px rgba(242,107,33,.32);

  --ease: cubic-bezier(.22,.61,.36,1);
  /* Curvas de animação (Emil Kowalski) */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* entradas / feedback — punch */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* movimento / morph on-screen */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* drawers (curva iOS) */

  /* ---------- Marca de apoio ---------- */
  --whatsapp: #25D366;

  /* ---------- Camadas (z-index) ---------- */
  --z-sticky:  100;  /* nav */
  --z-fab:     120;  /* whatsapp / barra CTA mobile */
  --z-scrim:   140;
  --z-drawer:  150;
}

@media (max-width: 768px) {
  :root {
    --sec-pad:   72px;
    --block-gap: 40px;
    --card-gap:  18px;
    --card-pad:  26px;
    --pad-x:     20px;
  }
}