/* =========================================================================
   FONTS.CSS
   -------------------------------------------------------------------------
   All typography lives here, and ONLY here. This is Barlow (Regular +
   SemiBold), pulled directly from the original design file's text layers.
   Swap the Google Fonts <link> in index.html + the variables below to
   re-skin the whole page — every other stylesheet reads these variables
   instead of hard-coding a font name.
   ========================================================================= */

:root{
  /* ---- Font families --------------------------------------------------
     The design uses a single type family (Barlow) in two weights:
     SemiBold for headings/labels, Regular for body copy. ---------------- */
  --font-heading: 'Barlow', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Barlow', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---- Weights -------------------------------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Fluid type scale (clamp = min, preferred, max) ------------------
     Calibrated against the source file's own sizes (30px body / 36px
     eyebrow / 50px H1 at a ~1500px-wide canvas) and scaled down smoothly
     for smaller screens. ------------------------------------------------ */
  --fs-eyebrow:   clamp(0.85rem, 0.7rem + 0.5vw, 1.05rem);
  --fs-h1:        clamp(1.7rem, 1.1rem + 2.6vw, 2.9rem);
  --fs-h2:        clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  --fs-h3:        clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --fs-lead:      clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
  --fs-body:      clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-small:     0.85rem;
  --fs-stat:      clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --fs-closing:   clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);

  --ls-eyebrow: 0.14em;
  --lh-heading: 1.2;
  --lh-body: 1.65;
}

body{
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6,
.font-heading{
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
}

.eyebrow{
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.h1, h1{ font-size: var(--fs-h1); font-weight: var(--fw-semibold); }
.h2, h2{ font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.h3, h3{ font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

.lead-text{ font-size: var(--fs-lead); font-weight: var(--fw-regular); }
.stat-text{ font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-stat); }
.closing-text{ font-size: var(--fs-closing); }
.text-small{ font-size: var(--fs-small); }