/*
  Typography classes reproducing the established Figma text styles.
  Values (family, weight, size, line height, letter spacing) are taken exactly
  from the Figma text styles — reuse these classes rather than writing new
  one-off type rules per page.

  Fonts (Figtree, Inter) are self-hosted locally — see css/fonts.css.
*/

/* ---- Headings (Figtree) ----

   Sizes are fluid via clamp(): the MAXIMUM of every clamp is the exact
   Figma value, reached at a 1280px viewport (the site's own container
   width) and held from there up — so the approved desktop design is
   completely unchanged. Below 1280px each level scales down its own
   ramp to a sensible mobile size instead of a 64px headline sitting in a
   360px column. Same technique/ramp the Home page already established
   (see .global-cta__heading, css/site-endcap.css) — 390px is the mobile
   reference viewport, 1280px the desktop one, so the slope is always
   (desktop − mobile) / 8.9 vw.

   Line heights become unitless ratios equal to the Figma pair (e.g.
   70.4/64 = 1.1) so they scale with the fluid size instead of pinning a
   desktop leading onto a mobile size. */

.text-h1-oversize {
  font-family: var(--font-primary);
  font-weight: 600; /* SemiBold */
  font-size: clamp(44px, 28.22px + 4.045vw, 80px);
  line-height: 1;
}

.text-h1 {
  font-family: var(--font-primary);
  font-weight: 600; /* SemiBold */
  font-size: clamp(38px, 26.61px + 2.921vw, 64px);
  line-height: 1.1;
}

.text-h2 {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600; /* SemiBold */
  font-size: clamp(30px, 22.11px + 2.022vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em; /* was an invalid "-2%" — -0.02em is that same -2%, and resolves to the desktop -0.96px at 48px while staying proportional as the size scales down */
}

.text-h3 {
  font-family: var(--font-primary);
  font-weight: 600; /* SemiBold */
  font-size: clamp(28px, 21.87px + 1.573vw, 42px);
  line-height: 1.2571;
}

.text-h4 {
  font-family: var(--font-primary);
  font-weight: 600; /* SemiBold */
  font-size: clamp(24px, 18.74px + 1.348vw, 36px);
  line-height: 1.25;
}

.text-h5 {
  font-family: var(--font-primary);
  font-weight: 600; /* SemiBold */
  font-size: clamp(20px, 18.25px + 0.449vw, 24px);
  line-height: 1.2;
}

.text-h6 {
  font-family: var(--font-primary);
  font-weight: 600; /* SemiBold */
  font-size: 18px;
  line-height: 25.2px;
}

.text-h7 {
  font-family: var(--font-primary);
  font-weight: 500; /* Medium */
  font-size: 16px;
  line-height: 19.2px;
}

/* ---- Body (Inter, except Fine Print which is Figtree) ---- */

/* The three large body sizes scale on the same 390→1280px ramp as the
   headings above (desktop value unchanged at ≥1280px); 16px body and
   below are already comfortable at every width and stay fixed. */

.text-body-xxl {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(17px, 14.81px + 0.562vw, 22px);
  line-height: 1.4;
}

.text-body-xl {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(16px, 14.25px + 0.449vw, 20px);
  line-height: 1.5;
}

.text-body-lg {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(16px, 15.12px + 0.225vw, 18px);
  line-height: 1.5;
}

.text-body {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
}

.text-body-medium {
  font-family: var(--font-secondary);
  font-weight: 500; /* Medium weight */
  font-size: 16px;
  line-height: 25.6px;
}

.text-body-sm {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px; /* 1.6 — bumped for readability, was 19.6px (1.4) */
}

.text-body-fine-print {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}

/* ---- Buttons (Figtree) ---- */

.text-button-xl {
  font-family: var(--font-primary);
  font-weight: 700; /* Bold */
  font-size: 20px;
  line-height: 30px;
}

.text-button-lg {
  font-family: var(--font-primary);
  font-weight: 600; /* SemiBold */
  font-size: 18px;
  line-height: 27px;
}

.text-button {
  font-family: var(--font-primary);
  font-weight: 700; /* Bold */
  font-size: 16px;
  line-height: 24px;
}

.text-button-sm {
  font-family: var(--font-primary);
  font-weight: 600; /* SemiBold */
  font-size: 14px;
  line-height: 19.5px;
  letter-spacing: 0.42px; /* was an invalid "3%" — letter-spacing doesn't accept percentages; 0.42px is what 3% of 14px actually resolves to, and matches the same 14px/600 treatment already used correctly elsewhere (e.g. the section eyebrow labels) */
}

.text-button-xs {
  font-family: var(--font-primary);
  font-weight: 700; /* Bold */
  font-size: 11px;
  line-height: 19.5px;
}