/* typography.css */
/* All type styles for the Movimiento landing page */
/* No layout. No component styles. Typography only. */

/* ============================================================
   BODY TEXT SCALE — UTILITY CLASSES
   ============================================================ */

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

/* ============================================================
   SPECIFIC TEXT ROLES
   ============================================================ */

.hero__headline {
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

@media (min-width: 1024px) {
  .hero__headline {
    font-size: var(--font-size-6xl);
  }
}

.hero__subheadline {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-loose);
  color: var(--color-text-secondary);
}

.section-heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

.body-text {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.caption-text {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}