/* Universal Typography System
   This file provides consistent typography classes that can be applied across all pages
   to maintain a unified visual hierarchy and design language.
*/

/* Page Headings - Use for main page titles */
.page-heading {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 500; /* medium instead of bold */
  color: var(--color-gray-900, #111827);
  margin-bottom: 1.5rem;
}

/* Section Headings - Use for major content sections */
.section-heading {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 500; /* medium instead of bold */
  color: var(--color-gray-900, #111827);
  margin-bottom: 1rem;
}

/* Subsection Headings - Use for content subsections */
.subsection-heading {
  font-size: 1.25rem; /* text-xl */
  font-weight: 500; /* medium instead of bold */
  color: var(--color-gray-900, #111827);
  margin-bottom: 0.75rem;
}

/* Card Headings - Use for card titles */
.card-heading {
  font-size: 1.125rem; /* text-lg */
  font-weight: 500; /* medium instead of bold */
  color: var(--color-gray-900, #111827);
  margin-bottom: 0.5rem;
}

/* Feature Headings - Use for feature titles within cards */
.feature-heading {
  font-size: 1rem; /* text-base */
  font-weight: 500; /* medium instead of bold */
  color: var(--color-gray-900, #111827);
  margin-bottom: 0.25rem;
}

/* Body Text - Standard text for content */
.body-text {
  font-size: 0.875rem; /* text-sm (14px) */
  font-weight: 400; /* normal weight */
  line-height: 1.6;
  color: var(--color-gray-700, #374151);
}

/* Small Text - Use for secondary information */
.small-text {
  font-size: 0.75rem; /* text-xs (12px) */
  font-weight: 400; /* normal weight */
  line-height: 1.5;
  color: var(--color-gray-600, #4B5563);
}

/* Footer Text - Use for footer content */
.footer-text {
  font-size: 0.75rem; /* text-xs (12px) */
  font-weight: 400; /* normal weight */
  line-height: 1.5;
  color: var(--color-gray-400, #9CA3AF);
}

/* Description Text - Use for section descriptions */
.description-text {
  font-size: 0.875rem; /* text-sm (14px) */
  font-weight: 400; /* normal weight */
  line-height: 1.6;
  color: var(--color-gray-600, #4B5563);
  margin-bottom: 1.5rem;
}

/* Quote Text - Use for testimonials and blockquotes */
.quote-text {
  font-size: 0.875rem; /* text-sm (14px) */
  font-style: italic;
  line-height: 1.6;
  color: var(--color-gray-700, #374151);
}

/* Label Text - Use for form labels and small headers */
.label-text {
  font-size: 0.75rem; /* text-xs (12px) */
  font-weight: 500; /* medium weight */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500, #6B7280);
}

/* Button Text - Use for buttons */
.button-text {
  font-size: 0.875rem; /* text-sm (14px) */
  font-weight: 500; /* medium weight */
}

/* Link Text - Use for links */
.link-text {
  font-size: 0.875rem; /* text-sm (14px) */
  font-weight: 400; /* normal weight */
  color: var(--color-blue-600, #2563EB);
  text-decoration: none;
}

/* Hero Title - Use for hero section titles */
.hero-title {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 500; /* medium instead of bold */
  line-height: 1.2;
  color: var(--color-gray-900, #111827);
}

/* Hero Subtitle - Use for hero section subtitles */
.hero-subtitle {
  font-size: 0.875rem; /* text-sm (14px) */
  font-weight: 400; /* normal weight */
  line-height: 1.6;
  color: var(--color-gray-600, #4B5563);
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .page-heading {
    font-size: 2.25rem; /* text-4xl */
  }
  
  .section-heading {
    font-size: 1.875rem; /* text-3xl */
  }
  
  .hero-title {
    font-size: 2.25rem; /* text-4xl */
  }
}