/* Typography System */

/* Heading Hierarchy */
.hero__title {
  font-family: var(--font-family-secondary);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--spacing-4);
}

.section__title {
  font-family: var(--font-family-secondary);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--spacing-6);
  text-align: center;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.section__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--spacing-8);
  line-height: var(--line-height-relaxed);
}

.subsection__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-4);
}

.card__title {
  font-family: var(--font-family-primary);
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-3);
}

/* Body Text */
.lead-text {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

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

/* Pull Quotes */
.pull-quote {
  font-family: var(--font-family-secondary);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-style: italic;
  color: var(--color-primary-dark);
  padding: var(--spacing-6);
  margin: var(--spacing-8) 0;
  border-left: 4px solid var(--color-primary);
  background: var(--gradient-surface-primary);
  border-radius: var(--radius-lg);
}

.pull-quote__attribution {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--spacing-3);
}

/* Text Utilities */
.text-center {
  text-align: center;
}

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

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

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

/* Mobile Typography Adjustments */
@media (max-width: 768px) {
  :root {
    --font-size-base: 17px; /* Increased from 16px for better mobile readability */
  }

  .section__title {
    margin-bottom: var(--spacing-5);
  }

  .section__subtitle {
    margin-bottom: var(--spacing-6);
  }

  .pull-quote {
    padding: var(--spacing-4);
    margin: var(--spacing-6) 0;
  }
}