/* Typography Utility Classes */

/* Display Font (Playfair Display) */
.font-display {
  font-family: var(--font-display);
}

/* Body Font (Inter) */
.font-body {
  font-family: var(--font-body);
}

/* Heading Styles */
.heading-1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.heading-2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.heading-3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.heading-4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

/* Body Text Styles */
.body-large {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.body-default {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.body-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* Special Styles */
.price {
  font-family: var(--font-body);
  font-weight: var(--font-bold);
  color: var(--accent-primary);
}

.price-large {
  font-size: var(--text-xl);
}

.price-default {
  font-size: var(--text-lg);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Responsive Typography */
@media (max-width: 640px) {
  .heading-1 {
    font-size: var(--text-4xl);
  }

  .heading-2 {
    font-size: var(--text-2xl);
  }

  .heading-3 {
    font-size: var(--text-xl);
  }
}