/* ==========================================================================
   MT MediTeam — Design tokens
   Palette anchored on the logo blue (#012095), warmed with cream surfaces
   so the site reads as caring rather than clinical.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --c-brand:        #012095;  /* exact logo blue */
  --c-brand-dark:   #01166b;
  --c-brand-mid:    #0c4da2;
  --c-brand-soft:   #dfe6fa;
  --c-brand-tint:   #eef2fc;
  --c-brand-wash:   #f6f8fe;

  /* --- Accent: calm green, used for "covered by insurance" signals ------- */
  --c-accent:       #0d6b52;
  --c-accent-dark:  #07513e;
  --c-accent-tint:  #e4f2ed;

  /* --- Warm neutrals: the site's ground ---------------------------------- */
  --c-warm:         #faf7f2;
  --c-warm-2:       #f3ece1;
  --c-warm-3:       #e9dfd0;

  /* --- Ink --------------------------------------------------------------- */
  --c-ink:          #0e1526;
  --c-ink-2:        #3c4759;
  --c-ink-3:        #5f6b7e;
  --c-ink-4:        #8a94a4;

  /* --- Surfaces & lines --------------------------------------------------- */
  --c-surface:      #ffffff;
  --c-line:         #e4e7ec;
  --c-line-soft:    #eef0f3;
  --c-line-warm:    #e6ddd0;

  --c-focus:        #0c4da2;

  /* --- Typography --------------------------------------------------------- */
  /* One family throughout. Geometric-humanist, and its geometry echoes the
     Poppins in the logo, so wordmark and page read as one system. */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fw-body:    400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-display: 800;

  /* Fluid scale. Body sits at 17–18px: the audience skews elderly, so the
     base is deliberately larger than a typical marketing site. */
  --step--2: clamp(0.75rem,  0.735rem + 0.08vw, 0.8125rem);
  --step--1: clamp(0.875rem, 0.85rem  + 0.13vw, 0.9375rem);
  --step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);
  --step-1:  clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
  --step-2:  clamp(1.375rem, 1.24rem  + 0.68vw, 1.75rem);
  --step-3:  clamp(1.625rem, 1.36rem  + 1.32vw, 2.375rem);
  --step-4:  clamp(2rem,     1.58rem  + 2.1vw,  3.25rem);
  --step-5:  clamp(2.375rem, 1.72rem  + 3.27vw, 4.25rem);

  --lh-tight:   1.12;
  --lh-heading: 1.2;
  --lh-snug:    1.4;
  --lh-body:    1.68;

  /* A geometric sans at display sizes needs to be pulled tighter than a
     serif would; large headings get the most negative tracking. */
  --tracking-display: -0.035em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.015em;
  --tracking-wide:     0.09em;

  /* --- Space -------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;

  /* Section rhythm scales with the viewport */
  --sp-section: clamp(3.5rem, 2.4rem + 5.5vw, 7rem);
  --gutter:     clamp(1.125rem, 0.7rem + 2.1vw, 2.5rem);

  /* --- Layout -------------------------------------------------------------- */
  --w-max:     1220px;
  --w-medium:  940px;
  --w-narrow:  760px;
  --w-prose:   68ch;

  /* --- Radii --------------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- Elevation: soft and blue-tinted, never grey mud --------------------- */
  --sh-sm: 0 1px 2px rgba(14, 21, 38, 0.05), 0 1px 3px rgba(14, 21, 38, 0.04);
  --sh-md: 0 2px 4px rgba(14, 21, 38, 0.04), 0 6px 16px rgba(14, 21, 38, 0.07);
  --sh-lg: 0 4px 8px rgba(14, 21, 38, 0.04), 0 16px 36px rgba(14, 21, 38, 0.10);
  --sh-brand: 0 8px 24px rgba(1, 32, 149, 0.18);

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 140ms;
  --t-mid:  240ms;
  --t-slow: 420ms;

  /* --- Chrome -------------------------------------------------------------- */
  --header-h: 72px;
  --callbar-h: 64px;
  --z-header: 60;
  --z-drawer: 80;
  --z-callbar: 70;
}

@media (min-width: 60em) {
  :root { --header-h: 88px; }
}