/* ==========================================================================
   TYPOGRAPHY TOKENS — Single source of truth for font sizing
   --------------------------------------------------------------------------
   Loaded in ALL three layouts (New-site/home, flow, landing) BEFORE the
   page CSS, so component rules keep cascade precedence (additive, no
   regressions). Use these tokens — not ad-hoc px/rem values — for all new
   and migrated typography.

   Scale is rem-based on a 16px root. Migrate components by referencing the
   `var(--fs-*)` tokens directly, or with the opt-in utility classes below.
   ========================================================================== */

:root {
  /* Font sizes (rem @ 16px base) */
  --fs-3xs: 0.625rem;  /* 10px — micro: badges, fine print */
  --fs-2xs: 0.6875rem; /* 11px — micro: badges, tiny labels */
  --fs-xs:  0.75rem;   /* 12px — captions, footnotes */
  --fs-sm:  0.875rem;  /* 14px — small body, labels */
  --fs-base:1rem;      /* 16px — default body */
  --fs-md:  1.125rem;  /* 18px — lead / large body */
  --fs-lg:  1.25rem;   /* 20px — small headings, subtitles */
  --fs-xl:  1.5rem;    /* 24px — h4 / section subtitle */
  --fs-2xl: 1.75rem;   /* 28px — h3 */
  --fs-3xl: 2rem;      /* 32px — h2 */
  --fs-4xl: 2.5rem;    /* 40px — h1 */
  --fs-5xl: 3rem;      /* 48px — display */
  --fs-6xl: 4.5rem;    /* 72px — oversized display / decorative numbers */
  --fs-hero: clamp(2rem, 5vw, 3.5rem);        /* responsive hero 32 → 56px */
  --fs-section-title: clamp(1.4rem, 2.5vw, 1.9rem); /* fluid section heading 22 → 30px */

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
}

/* ==========================================================================
   BASE NORMALIZATION
   Maps body + headings to the scale. Keeps the existing "Mont" family and
   1.6 base line-height. Loaded first, so any per-component CSS still wins.
   ========================================================================== */

body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

h1, .h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
h2, .h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-xl); }
h5, .h5 { font-size: var(--fs-lg); }
h6, .h6 { font-size: var(--fs-md); }

/* ==========================================================================
   OPT-IN UTILITY CLASSES
   Size utilities use the `.fs-*` named scale (no clash with Bootstrap 5's
   numeric `.fs-1`..`.fs-6`). Weight / line-height utilities are namespaced
   with `t-` to avoid clashing with Bootstrap 5's `.fw-*` / `.lh-*`.
   ========================================================================== */

.fs-3xs { font-size: var(--fs-3xs); }
.fs-2xs { font-size: var(--fs-2xs); }
.fs-xs  { font-size: var(--fs-xs); }
.fs-sm  { font-size: var(--fs-sm); }
.fs-base{ font-size: var(--fs-base); }
.fs-md  { font-size: var(--fs-md); }
.fs-lg  { font-size: var(--fs-lg); }
.fs-xl  { font-size: var(--fs-xl); }
.fs-2xl { font-size: var(--fs-2xl); }
.fs-3xl { font-size: var(--fs-3xl); }
.fs-4xl { font-size: var(--fs-4xl); }
.fs-5xl { font-size: var(--fs-5xl); }
.fs-6xl { font-size: var(--fs-6xl); }
.fs-hero{ font-size: var(--fs-hero); }
.fs-section-title { font-size: var(--fs-section-title); }

.t-fw-regular  { font-weight: var(--fw-regular); }
.t-fw-medium   { font-weight: var(--fw-medium); }
.t-fw-semibold { font-weight: var(--fw-semibold); }
.t-fw-bold     { font-weight: var(--fw-bold); }

.t-lh-tight { line-height: var(--lh-tight); }
.t-lh-snug  { line-height: var(--lh-snug); }
.t-lh-base  { line-height: var(--lh-base); }
.t-lh-loose { line-height: var(--lh-loose); }