/* ===========================================================================
   Meranti Growth — Web Design System 2.0 token block
   assets/css/tokens.css

   The single copy. Every page loads this first; nothing else declares a hue,
   a face, a radius or a step on the spacing scale. The hero band and the
   Diagnostic both previously carried their own copy of this block; neither
   does now.

   Load order on every page:
     tokens.css  →  the page's own stylesheet
   =========================================================================== */

:root{
  /* --- Brand ----------------------------------------------------------- */
  --mg-navy:#1D328D;
  --mg-ink:#0D1430;
  --mg-ice:#CEFBF4;
  --mg-slate:#5A6E9E;
  --mg-deep:#141E52;

  /* Navy tints. Percentages are of navy over white. */
  --mg-navy-80:#4A5BA4;
  --mg-navy-60:#7784BB;
  --mg-navy-40:#A5ADD1;
  --mg-navy-20:#D2D6E8;
  --mg-tint-08:#EDEFF6;

  /* --- Neutrals -------------------------------------------------------- */
  --mg-white:#FFFFFF;
  --mg-paper:#F7F7F5;
  --mg-rule:#DDDEE4;
  --mg-mute:#9096A6;
  --mg-grey:#71778A;
  --mg-graphite:#3A4054;

  /* --- Semantic roles --------------------------------------------------- */
  --surface:var(--mg-white);
  --surface-2:var(--mg-paper);
  --surface-3:var(--mg-tint-08);
  --text:var(--mg-ink);
  --text-2:var(--mg-graphite);
  --text-meta:var(--mg-slate);
  --text-inverse:var(--mg-white);
  --text-inverse-2:var(--mg-navy-20);
  --line:var(--mg-rule);
  --focus:var(--mg-navy);
  --action:var(--mg-navy);
  --action-hover:var(--mg-ink);
  --action-disabled:var(--mg-navy-20);
  --action-disabled-text:var(--mg-grey);

  /* --- Type ------------------------------------------------------------- */
  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-text:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fs-hero:clamp(2.75rem,1.6rem + 5.1vw,5rem);
  --fs-display:clamp(2.375rem,1.5rem + 3.9vw,4.25rem);
  --fs-h1:clamp(1.875rem,1.34rem + 2.3vw,2.75rem);
  --fs-h2:clamp(1.4375rem,1.15rem + 1.22vw,1.875rem);
  --fs-h3:clamp(1.125rem,1.05rem + 0.31vw,1.25rem);
  --fs-body:1.0625rem;
  --fs-body-lg:clamp(1.0625rem,1.01rem + 0.23vw,1.1875rem);
  --fs-caption:0.875rem;
  --fs-eyebrow:0.8125rem;
  --fs-figure:clamp(2.25rem,1.4rem + 3.4vw,3.75rem);

  /* --- Space ------------------------------------------------------------ */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px;
  --s-5:40px; --s-6:64px; --s-7:96px; --s-8:128px;

  /* --- Measure and frame ------------------------------------------------ */
  --mg-max:1280px;
  --mg-margin:24px;
  --mg-radius:4px;
  --mg-radius-lg:8px;
  --measure:68ch;
  --nav-h:76px;

  /* Staircase headline indent. The hero's one typographic move. */
  --stair:0px;

  /* --- Elevation -------------------------------------------------------- */
  --elev-1:0 1px 2px rgba(13,20,48,.04), 0 8px 24px -12px rgba(13,20,48,.10);
  --elev-2:0 2px 4px rgba(13,20,48,.05), 0 20px 48px -20px rgba(13,20,48,.18);

  /* --- Motion ----------------------------------------------------------- */
  --dur-1:140ms; --dur-2:320ms; --dur-3:620ms;
  --ease:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

@media (min-width:800px){
  :root{ --mg-margin:72px; --stair:4ch; }
}