/* =============================================================================
   MT MediTeam — design tokens

   THREE COLOURS. Nothing else.
     blue    #012095   the logo mark
     silver  #7F8A93   the logo tagline
     white   #FFFFFF

   There is no second blue. Where the design needs depth it uses the one blue
   at reduced opacity over white, or white at reduced opacity over the blue —
   never a darker or lighter blue mixed by hand. The silver ramp is the same
   silver lightened or darkened for borders and body text, which is what the
   logo already does with it.
   ========================================================================== */

:root {
  /* --- the palette ------------------------------------------------------- */
  --blue:   #012095;
  --silver: #7F8A93;
  --white:  #FFFFFF;

  /* the one blue, thinned over white — used for washes and borders only */
  --blue-a04: rgba(1, 32, 149, .04);
  --blue-a08: rgba(1, 32, 149, .08);
  --blue-a12: rgba(1, 32, 149, .12);
  --blue-a20: rgba(1, 32, 149, .20);
  --blue-a60: rgba(1, 32, 149, .60);
  --blue-a85: rgba(1, 32, 149, .85);
  --blue-a94: rgba(1, 32, 149, .94);

  /* white thinned over the blue */
  --on-blue:      rgba(255, 255, 255, .80);
  --on-blue-dim:  rgba(255, 255, 255, .60);
  --on-blue-line: rgba(255, 255, 255, .24);
  --on-blue-wash: rgba(255, 255, 255, .10);

  /* the one silver, lightened and darkened */
  --silver-800: #4A525A;
  --silver-700: #5B646B;
  --silver-600: #7F8A93;
  --silver-400: #A8B1B8;
  --silver-300: #C4CBD0;
  --silver-200: #DCE0E3;
  --silver-100: #EBEEEF;
  --silver-50:  #F5F7F8;

  /* --- semantic ----------------------------------------------------------- */
  --ink:       var(--blue);        /* headings carry the brand colour */
  --body:      var(--silver-700);  /* body copy is silver, darkened for contrast */
  --muted:     var(--silver-600);
  --line:      var(--silver-200);
  --line-soft: var(--silver-100);
  --bg:        var(--white);
  --bg-alt:    var(--silver-50);

  /* --- type --------------------------------------------------------------- */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --fs-h4:   clamp(1.15rem, 0.5vw + 1rem, 1.35rem);
  --fs-h3:   clamp(1.35rem, 1vw + 1.05rem, 1.75rem);
  --fs-h2:   clamp(1.75rem, 2.1vw + 1.15rem, 2.75rem);
  --fs-h1:   clamp(2.1rem, 3.4vw + 1.2rem, 3.75rem);
  --fs-display: clamp(2.3rem, 4.4vw + 1.1rem, 4.25rem);

  --lh-tight: 1.1;
  --lh-head:  1.16;
  --lh-body:  1.68;

  --tracking-eyebrow: .16em;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.032em;

  /* --- space -------------------------------------------------------------- */
  --sp-1:  .25rem;  --sp-2:  .5rem;   --sp-3:  .75rem;  --sp-4: 1rem;
  --sp-5:  1.25rem; --sp-6:  1.5rem;  --sp-7:  1.75rem; --sp-8: 2rem;
  --sp-10: 2.5rem;  --sp-12: 3rem;    --sp-14: 3.5rem;  --sp-16: 4rem;
  --sp-20: 5rem;    --sp-24: 6rem;    --sp-32: 8rem;

  --section-y: clamp(3.5rem, 6.5vw, 7.5rem);
  --gutter:    clamp(1rem, 4vw, 2rem);
  --maxw:      1240px;
  --maxw-prose: 68ch;

  /* --- radius: square by design ------------------------------------------- */
  --r-xs: 0;
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-pill: 0;

  /* --- elevation: the one blue, thinned -------------------------------- */
  --sh-xs: 0 1px 2px var(--blue-a04);
  --sh-sm: 0 2px 10px var(--blue-a08);
  --sh-md: 0 10px 30px var(--blue-a08), 0 2px 6px var(--blue-a04);
  --sh-lg: 0 24px 56px var(--blue-a12), 0 4px 12px var(--blue-a04);
  --sh-xl: 0 36px 80px var(--blue-a20);

  /* --- motion -------------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s;
  --t: .3s;
  --t-slow: .6s;

  --header-h: 80px;
}

@media (max-width: 1100px) { :root { --header-h: 66px; } }