/* ==========================================================================
   TYPOGRAPHY STYLES & HIERARCHY
   ========================================================================== */

/* Serif expressive styles (Instrument Serif) */
.font-serif,
.serif-statement,
.serif-display,
.serif-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  text-wrap: balance;
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
}

/* Sans clean styles (Space Grotesk) */
.font-sans,
.sans-body,
.sans-ui {
  font-family: var(--font-sans);
  font-weight: 400;
}

.sans-medium {
  font-weight: 500;
}

.sans-semibold {
  font-weight: 600;
}

/* Display & Statement sizes */
.text-statement {
  font-family: var(--font-serif);
  font-size: var(--text-statement);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-light);
  text-transform: uppercase;
}

.text-statement-sans {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-light-pure);
}

.text-display-lg {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
}

/* Editorial Section Titles & Numbers */
.section-index {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-deep-dark);
  background: var(--color-surface-light);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-xs);
  display: inline-block;
  margin-bottom: var(--space-sm);
  width: fit-content;
}

.section-title-large {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-light-pure);
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-light);
  font-weight: 400;
  max-width: 62ch;
}

/* Body and Paragraph Styles */
.narrative-p {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-light);
  max-width: 60ch;
  margin-bottom: var(--space-md);
}

.narrative-p-strong {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-light-pure);
  margin-bottom: var(--space-md);
}

.body-lead {
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--color-light);
}

.body-regular {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-light);
}

.body-small {
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--color-light);
}

/* Small UI & Functional typography (using deepest contrast) */
.ui-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
}

.ui-price {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-light-pure);
  line-height: 1;
}

.ui-price-sub {
  font-size: var(--text-sm);
  color: var(--color-deep-dark);
  font-weight: 500;
}

/* High-contrast and tonal helpers */
.text-deep {
  color: var(--color-deep-dark) !important;
}

.text-light {
  color: var(--color-light) !important;
}

.text-pure {
  color: var(--color-light-pure) !important;
}

.text-center {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
}