/**
 * BAY MIGRATION GLOBAL TYPOGRAPHY SYSTEM
 * Strict Light-First Typography Classes
 */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
.display {
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

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

h1, .h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

h3, .h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

h4, .h4 {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

p, .body-md {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-brand-primary);
}

/* Font Family Utility Modifiers */
.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-brand { color: var(--color-brand-primary); }
.text-accent { color: var(--color-accent-gold); }
.text-inverse { color: var(--color-text-inverse); }
.text-inverse-muted { color: var(--color-text-inverse-muted); }

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