/* =========================================================
   NORTHSTAR SELECTED — Typography
   ========================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-charcoal);
  background-color: var(--color-white);
}

/* ── Display / Hero Headings ────────────────────────────── */
.display-xxl {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 8vw, var(--fs-5xl));
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-3xl));
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
}

/* ── Section Headings ───────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl));
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-2xl));
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
}

/* ── Body Text ──────────────────────────────────────────── */
.text-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

.text-base {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.text-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.text-xs {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

/* ── Labels & Eyebrows ──────────────────────────────────── */
.label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ── Colour Utilities ───────────────────────────────────── */
.text-white   { color: var(--color-white); }
.text-cream   { color: var(--color-cream); }
.text-gold    { color: var(--color-gold); }
.text-mid     { color: var(--color-mid); }
.text-light   { color: var(--color-light); }
.text-black   { color: var(--color-black); }

/* ── Alignment ──────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

/* ── Italic display ─────────────────────────────────────── */
.display-italic {
  font-style: italic;
}