/* =========================================================================
   Design tokens — extraídos do Figma "LP - Planos Unimed"
   Fonte única de verdade para cor, tipografia, espaçamento, raio e sombra.
   ========================================================================= */

:root {
  /* -- Cores da marca --------------------------------------------------- */
  --color-green-900: #00401a; /* texto sobre superfícies claras            */
  --color-green-800: #0a5f55; /* fundo de seções, header, footer           */
  --color-green-600: #00995d; /* cor primária (botões, destaques)          */
  --color-green-500: #00b36a; /* fim do gradiente das seções               */
  --color-lime-400:  #b1d34b; /* acento (selo "Mais Recomendado", ícones)  */

  --color-white:        #ffffff;
  --color-surface:      #ffffff;
  --color-surface-mute: #efefef;
  --color-ink:          #1a1a1a;
  --color-danger:       #900b09;

  /* Texto */
  --color-text:            var(--color-green-900);
  --color-text-on-dark:    var(--color-white);
  --color-text-muted:      rgba(0, 64, 26, 0.72);
  --color-text-muted-dark: rgba(255, 255, 255, 0.82);

  /* Superfícies compostas */
  --overlay-header:   rgba(10, 95, 55, 0.62);
  --overlay-header-scrolled: #094f47;
  --hero-overlay: linear-gradient(
      100deg,
      rgba(0, 64, 26, 0.92) 0%,
      rgba(10, 95, 85, 0.78) 42%,
      rgba(10, 95, 85, 0.35) 100%);
  --section-gradient: linear-gradient(180deg, var(--color-green-800) 0%, var(--color-green-500) 100%);
  --section-gradient-invert: linear-gradient(180deg, var(--color-green-600) 0%, var(--color-green-800) 100%);

  /* -- Tipografia ------------------------------------------------------- */
  --font-sans: "Unimed Sans", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;

  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Escala fluida (mobile-first: cresce até o breakpoint desktop) */
  --fs-display: clamp(2rem, 1.3rem + 3.4vw, 3rem);      /* 32 → 48 */
  --fs-h2:      clamp(1.625rem, 1.2rem + 2vw, 2.25rem); /* 26 → 36 */
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); /* 20 → 24 */
  --fs-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);  /* 18 → 24 */
  --fs-subtitle: 1.125rem;                              /* 18 */
  --fs-body:    1rem;                                   /* 16 */
  --fs-sm:      0.875rem;                               /* 14 */
  --fs-label:   0.75rem;                                /* 12 */

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.5;

  /* -- Espaçamento (base 4px) ---------------------------------------- */
  --space-3xs: 0.25rem;  /*  4 */
  --space-2xs: 0.5rem;   /*  8 */
  --space-xs:  0.75rem;  /* 12 */
  --space-sm:  1rem;     /* 16 */
  --space-md:  1.5rem;   /* 24 */
  --space-lg:  2rem;     /* 32 */
  --space-xl:  3rem;     /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-3xl: 6rem;     /* 96 */

  /* -- Layout --------------------------------------------------------- */
  --container-max: 1216px;
  --container-pad: var(--space-sm);
  --header-h: 64px;

  /* -- Raio ---------------------------------------------------------- */
  --radius-sm:   16px;
  --radius-md:   20px;
  --radius-lg:   28px;
  --radius-xl:   36px;
  --radius-pill: 999px;

  /* -- Sombra (M3 Elevation) --------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --shadow-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 2px 6px rgba(0, 32, 13, 0.08), 0 12px 28px rgba(0, 32, 13, 0.12);

  /* -- Movimento --------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 200ms;

  /* -- Z-index --------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 90;
}

@media (min-width: 48rem) { /* ≥ 768px */
  :root {
    --container-pad: var(--space-lg);
    --header-h: 72px;
  }
}

@media (min-width: 64rem) { /* ≥ 1024px */
  :root {
    --container-pad: var(--space-xl);
    --header-h: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
}