/**
 * css/typography.css — Fluid type scale for the lrxd theme.
 *
 * Replaces the static token + @media stepped approach with a single
 * continuous clamp() per heading level. All other typographic properties
 * (font-family, weight, color, line-height, margin) remain unchanged.
 *
 * Load order: tokens → reset → base → typography → style → theme
 * No @layer — project decision.
 *
 * ── Clamp formula ────────────────────────────────────────────────────────────
 *   clamp(floor, calc(intercept + slope × 100vw), ceiling)
 *   Viewport range : 320px (--base-min-width) → 1440px (design desktop)
 *   Range width    : 1120px
 *
 * ── Floor sources (grep of all @media --h*-font-size redefinitions) ─────────
 *   h1  floor 36px  · ceiling 70px
 *         sources: @media (≤1023px) :root 50px;
 *                  @media (≤767px)  .main-carousel-content .h1 36px  ← smallest
 *   h2  floor 30px  · ceiling 60px
 *         sources: @media (≤1023px) :root 46px;
 *                  @media (≤767px)  :root 30px  ← smallest
 *   h3  floor 32px  · ceiling 50px
 *         sources: @media (≤1023px) :root 36px;
 *                  @media (≤767px)  :root 32px  ← smallest
 *   h4  floor 28px  · ceiling 38px
 *         source:  @media (≤767px)  :root 28px  ← only breakpoint
 *   h5  floor 17px  · ceiling 20px
 *         source:  @media (≤767px)  :root 17px  ← only breakpoint
 *   h6  floor 14px  · ceiling 18px
 *         source:  @media (≤767px)  :root 14px  ← only breakpoint
 *   subtitle-1  floor 22px  · ceiling 32px
 *         source:  @media (≤767px)  :root 22px  ← only breakpoint
 *   subtitle-2  floor 21px  · ceiling 24px
 *         source:  @media (≤1023px) :root 21px  ← only breakpoint
 *
 * ── Intercept derivation ─────────────────────────────────────────────────────
 *   intercept = floor − (Δ ÷ 1120) × 320
 *   where Δ = ceiling − floor
 *   Verified: at 320px the calc hits the floor; at 1440px it hits the ceiling.
 */

/* ─── Heading element font-sizes — fluid clamp scale ─────────────────────── */
/*
 * base.css also declares h1–h6 font-size via var(--h*-font-size).
 * These rules load after base.css and override those declarations with
 * the fluid clamp. style.css h1/.h1–h6/.h6 font-size rules have been
 * removed so the clamp is the winning declaration at every viewport width.
 */

h1 { font-size: clamp(36px, calc(26.29px + 3.04vw), 70px); }
h2 { font-size: clamp(30px, calc(21.43px + 2.68vw), 60px); }
h3 { font-size: clamp(32px, calc(26.86px + 1.61vw), 50px); }
h4 { font-size: clamp(28px, calc(25.14px + 0.89vw), 38px); }
h5 { font-size: clamp(17px, calc(16.14px + 0.27vw), 20px); }
h6 { font-size: clamp(14px, calc(12.86px + 0.36vw), 18px); }

/* ─── Heading utility classes (.h1–.h6) ──────────────────────────────────── */
/*
 * Base properties (font-family, weight, color, line-height, margin) are also
 * declared in style.css for the combined h1/.h1…h6/.h6/.h selector block.
 * Including them here keeps typography.css self-contained and means it still
 * works if the style.css block is ever consolidated.
 */

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h {
	color:       var(--headings-color);
	line-height: 1.3;
	margin:      0 0 15px;
}

/* H1 = Tungsten Narrow Bold, H2 = Averta Std Semibold (#302); H3–H6/.h stay on Noe Text. */
/* #326: ALL CAPS, matching the `h1` element rule in css/base.css — see the
   full rationale there. `.h1` is currently unused in markup, but this layer
   pairs every element rule with its size-as-class companion
   (docs/2.0-system-guide.md §2), so it moves together or the pattern rots. */
.h1 {
	font-family: var(--h1-font-family);
	font-weight: 700;
	text-transform: uppercase;
}

.h2 {
	font-family: var(--h2-font-family);
	font-weight: 600;
}

.h3,
.h4,
.h5,
.h6,
.h {
	font-family: var(--headings-font-family);
	font-weight: 700;
}

.h1 { font-size: clamp(36px, calc(26.29px + 3.04vw), 70px); }
.h2 { font-size: clamp(30px, calc(21.43px + 2.68vw), 60px); }
.h3 { font-size: clamp(32px, calc(26.86px + 1.61vw), 50px); }
.h4 { font-size: clamp(28px, calc(25.14px + 0.89vw), 38px); }
.h5 { font-size: clamp(17px, calc(16.14px + 0.27vw), 20px); }
.h6 { font-size: clamp(14px, calc(12.86px + 0.36vw), 18px); }

/* ─── Subtitle utility classes ────────────────────────────────────────────── */

.subtitle-1 { font-size: clamp(22px, calc(19.14px + 0.89vw), 32px); }
.subtitle-2 { font-size: clamp(21px, calc(20.14px + 0.27vw), 24px); }

/* ─── Body utility classes ────────────────────────────────────────────────── */

/*
 * body-1: large callout / pull-quote size.
 * No @media override exists for --body-1, so the token value (28px) is
 * used as-is; no fluid scale is needed.
 */
.body-1 {
	font-size: var(--body-1);
}

/*
 * body-2: standard running-text size — mirrors the base paragraph size.
 */
.body-2 {
	font-size: var(--font-size-base);
}

/* ─── Paragraphs ──────────────────────────────────────────────────────────── */

p {
	margin:      0 0 20px;
	line-height: var(--line-height-base);
}

/* ─── Links ───────────────────────────────────────────────────────────────── */

a {
	color:           var(--base-link-color);
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}