/* ========== Typography ========== */
/*
 * Type scale utility classes, derived from the ExaLife frontend (life-exabyting-frontend).
 * Apply directly to any element. Values come from tokens.css.
 *
 * Gilroy (headings, pills): 400 / 500 / 700 (fonts.css), Outfit fallback.
 * Inter (body, buttons).
 * Sizes step up at 768px, matching ExaLife's md breakpoint.
 *
 *   .exa-text-display   Gilroy 700  40 → 64px   Hero headline
 *   .exa-text-heading   Gilroy 700  28 → 40px   Section heading
 *   .exa-text-quote     Gilroy 700  28px        Testimonial pull quote
 *   .exa-text-title     Gilroy 700  20px        Card / item title
 *   .exa-text-title-s   Gilroy 700  18px        Smaller title
 *   .exa-text-subtitle  Gilroy 500  20px        Medium-weight subtitle
 *   .exa-text-eyebrow   Gilroy 500  16px        Pill label above headings
 *   .exa-text-lead      Inter 400   18 → 20px   Intro paragraph
 *   .exa-text-body      Inter 400   16px        Body copy (-medium for 500)
 *   .exa-text-body-s    Inter 400   14px        Small body copy
 *   .exa-text-caption   Inter 700   12px        Caption / meta
 */

/* ---------- Gilroy (heading font) ---------- */
.exa-text-display,
.exa-text-heading,
.exa-text-quote,
.exa-text-title,
.exa-text-title-s {
  font-family: var(--exa-font-heading);
  font-weight: var(--exa-font-weight-bold);
}

.exa-text-display {
  font-size: var(--exa-text-display-size);
  line-height: var(--exa-text-display-line-height);
  letter-spacing: var(--exa-text-display-tracking);
}

.exa-text-heading {
  font-size: var(--exa-text-heading-size);
  line-height: var(--exa-text-heading-line-height);
  letter-spacing: var(--exa-text-heading-tracking);
  text-wrap: balance;
}

.exa-text-quote {
  font-size: var(--exa-text-quote-size);
  line-height: var(--exa-text-quote-line-height);
  letter-spacing: var(--exa-text-quote-tracking);
}

.exa-text-title {
  font-size: var(--exa-text-title-size);
  line-height: var(--exa-text-title-line-height);
  letter-spacing: var(--exa-text-title-tracking);
}

.exa-text-title-s {
  font-size: var(--exa-text-title-s-size);
  line-height: var(--exa-text-title-s-line-height);
}

.exa-text-subtitle,
.exa-text-eyebrow {
  font-family: var(--exa-font-heading);
  font-weight: var(--exa-font-weight-medium);
}

.exa-text-subtitle {
  font-size: var(--exa-text-subtitle-size);
  line-height: var(--exa-text-subtitle-line-height);
  letter-spacing: var(--exa-text-subtitle-tracking);
}

.exa-text-eyebrow {
  font-size: var(--exa-text-eyebrow-size);
  line-height: var(--exa-text-eyebrow-line-height);
}

/* ---------- Inter (body font) ---------- */
.exa-text-lead,
.exa-text-body,
.exa-text-body-medium,
.exa-text-body-s,
.exa-text-caption {
  font-family: var(--exa-font-body);
  font-weight: var(--exa-font-weight-regular);
}

.exa-text-lead {
  font-size: var(--exa-text-lead-size);
  line-height: var(--exa-text-lead-line-height);
}

.exa-text-body,
.exa-text-body-medium {
  font-size: var(--exa-text-body-size);
  line-height: var(--exa-text-body-line-height);
}

.exa-text-body-medium {
  font-weight: var(--exa-font-weight-medium);
}

.exa-text-body-s {
  font-size: var(--exa-text-body-s-size);
  line-height: var(--exa-text-body-s-line-height);
}

.exa-text-caption {
  font-size: var(--exa-text-caption-size);
  font-weight: var(--exa-font-weight-bold);
  line-height: var(--exa-text-caption-line-height);
}

/* ---------- md: 768px and up ---------- */
@media (min-width: 768px) {
  .exa-text-display {
    font-size: var(--exa-text-display-size-md);
    line-height: var(--exa-text-display-line-height-md);
    letter-spacing: var(--exa-text-display-tracking-md);
  }

  .exa-text-heading {
    font-size: var(--exa-text-heading-size-md);
    letter-spacing: var(--exa-text-heading-tracking-md);
  }

  .exa-text-lead {
    font-size: var(--exa-text-lead-size-md);
    line-height: var(--exa-text-lead-line-height-md);
  }
}

/* Keeps a hyphenated word on one line in large headings (exa_keep_hyphenated() adds it) */
.exa-nowrap { white-space: nowrap; }

/* ---------- Color modifiers ---------- */
.exa-text-primary { color: var(--exa-color-text-primary); }
.exa-text-secondary { color: var(--exa-color-text-secondary); }
.exa-text-tertiary { color: var(--exa-color-text-tertiary); }
.exa-text-brand { color: var(--exa-color-text-brand); }

/* Brand gradient text (hero wordmarks, highlighted words) */
.exa-text-gradient,
.exa-text-gradient-cyan {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.exa-text-gradient { background-image: var(--exa-gradient-brand); }
.exa-text-gradient-cyan { background-image: var(--exa-gradient-brand-cyan); }