/* ============================================
   Typography System
   Context-aware text styling
   ============================================ */

/* Page headings */
.page-heading {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.page-subheading {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

/* Section headings */
.section-title {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.section-description {
  font-size: var(--font-lg);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
}

/* Card headings */
.card-title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.card-subtitle {
  font-size: var(--font-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.card-description {
  font-size: var(--font-md);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Display text for hero sections */
.display-heading {
  font-size: var(--font-3xl);
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.display-subheading {
  font-size: var(--font-xl);
  font-weight: var(--font-light);
  line-height: 1.4;
  color: var(--color-text-secondary);
  opacity: 0.95;
}

/* Form labels and help text */
.form-label {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  display: block;
}

.form-help-text {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* Navigation text */
.nav-link {
  font-size: var(--font-md);
  font-weight: var(--font-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link.active {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

/* Badge and label text */
.badge-text {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.label-text {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

/* Body text variations */
.body-text {
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--color-text);
}

.body-text-large {
  font-size: var(--font-lg);
  line-height: 1.6;
  color: var(--color-text);
}

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

/* Price text */
.price-amount {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.price-currency {
  font-size: var(--font-lg);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.price-period {
  font-size: var(--font-md);
  color: var(--color-text-muted);
}

/* Footer text */
.footer-heading {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.footer-link {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover {
  color: var(--color-primary);
}

.footer-copyright {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* Responsive typography */
@media (max-width: 768px) {
  .display-heading {
    font-size: var(--font-2xl);
  }
  
  .display-subheading {
    font-size: var(--font-lg);
  }
  
  .page-heading {
    font-size: var(--font-xl);
  }
  
  .section-title {
    font-size: var(--font-lg);
  }
}