/* ════════════════════════════════════════════════════════════
   BluCruise Design System — typography.css
   Complete type scale. Never add a font or heading style
   outside this file. Requires: variables.css
════════════════════════════════════════════════════════════ */

/* ── Display / Hero headings (Cormorant Garamond) ──────────── */
.t-hero {
  font-family: var(--font-s);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300;
  line-height: .97;
  letter-spacing: -.04em;
}

.t-hero em,
.t-display em {
  font-style: italic;
  font-weight: 300;
}

/* ── Section headings ───────────────────────────────────────── */
.t-display {          /* H2 — section title */
  font-family: var(--font-s);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.t-heading {          /* H3 — card title, sub-section */
  font-family: var(--font-s);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.t-subheading {       /* H4 — sidebar headings, small sections */
  font-family: var(--font-n);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tx3);
}

/* ── Body ───────────────────────────────────────────────────── */
.t-body {             /* Standard body text */
  font-family: var(--font-n);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.68;
  color: var(--tx2);
}

.t-body-sm {          /* Small body, captions */
  font-family: var(--font-n);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tx3);
}

.t-intro {            /* Section intro paragraph */
  font-family: var(--font-n);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--tx3);
  max-width: 520px;
}

/* ── Labels / UI text ───────────────────────────────────────── */
.t-label {            /* Form labels, small uppercase labels */
  font-family: var(--font-n);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx4);
}

.t-eyebrow {          /* Section eyebrow text */
  font-family: var(--font-n);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.t-eyebrow--light { color: var(--gold); }
.t-eyebrow--dark  { color: var(--navy); }

.t-price {            /* Prices on cards */
  font-family: var(--font-s);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--navy);
}

.t-price-sm {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

/* ── On dark backgrounds ────────────────────────────────────── */
.on-dark .t-display,
.on-dark .t-heading,
.on-dark .t-hero { color: var(--white); }

.on-dark .t-intro,
.on-dark .t-body  { color: var(--txd); }

.on-dark .t-body-sm { color: var(--txm); }

/* ── Eyebrow component ─────────────────────────────────────── */
.bc-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.bc-eyebrow__line {
  width: 24px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}