/* =============================================================================
   TYPOGRAPHY ROLES — composed type styles built from primitives.

   9 roles. Every text element on the site should map to one of these.
   Apply via class (e.g. <h2 class="t-display-section">) OR by composing
   inside a component selector with the same property set.

   Color is intentionally NOT set here. Type roles handle font properties
   only; color comes from the consuming component context.

   Load order: primitives.css → typography.css → styles.css.
   ============================================================================= */

/* 1. display-hero — hero h1 */
.t-display-hero {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* 2. display-section — section headings */
.t-display-section {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

/* 3. display-quote — pull quote */
.t-display-quote {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  font-style: italic;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* 4. display-mid — card h3, logo word, mid-tier display */
.t-display-mid {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

/* 4b. display-cta — cta-banner heading (between mid display and section heading) */
.t-display-cta {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

/* 5. display-lead — section deck (italic via modifier) */
.t-display-lead {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: var(--lh-normal);
  letter-spacing: 0;
}

/* Modifier — italic deck used for hero subtitle and section decks */
.t-display-lead.is-italic {
  font-style: italic;
}

/* 6. body — default body copy */
.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: 0;
}

/* 6b. body-lead — hero subtitle (one notch larger than t-body, sans-serif) */
.t-body-lead {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: 0;
}

/* 6c. nav — header navigation links */
.t-nav {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: 0;
}

/* 7. body-sm — footer body, utility bar, captions, small body copy */
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: 0;
}

/* 8. label — eyebrows, footer h4, meta, attribution, micro-tags */
.t-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

/* 9. btn — button label */
.t-btn {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

/* 10. tagline — small cased mark/byline (logo-tag, micro-headers without uppercase) */
.t-tagline {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Element defaults — apply roles to bare HTML so unstyled markup still
   renders on-system. Components can opt out by setting their own role
   class on the element.
   ───────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0;
}

p {
  margin: 0;
}