/* ============================================================
   SOLITUDE LABS — Typography
   ============================================================ */

/* Display — Instrument Serif */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.display-3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
}

.display-4 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* Italic accent */
.italic {
  font-style: italic;
  color: var(--gold);
}

/* Eyebrow / Label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-deep); /* AA contrast on light surfaces (5.46:1) */
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.eyebrow.center {
  justify-content: center;
}

/* Body text */
.body-lg {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 300;
}

.body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.body-sm {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Mono labels */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mute);
}

.mono-sm {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--mute);
  text-transform: uppercase;
}

/* Text colors */
.text-gold { color: var(--gold-deep); }
.text-mute { color: var(--mute); }
.text-ink { color: var(--ink); }
.text-paper { color: var(--paper); }
.text-green { color: var(--green); }