/* 
 * Consistent Typography System
 * Standardized font sizes across all pages
 */

/* Typography Variables */
:root {
  /* Main Titles */
  --font-size-hero: 60px;
  --font-size-section-title: 36px;
  --font-size-card-title: 18px;
  --font-size-medium: 18px;
  --font-size-small-title: 18px;
  
  /* Body Text */
  --font-size-description: 18px;
  --font-size-body: 16px;
  --font-size-small: 16px;
  --font-size-tiny: 12px;
  
  /* Special Sizes */
  --font-size-price: 60px; /* 4rem equivalent */
  --font-size-plan-name: 30px;
  --font-size-feature-title: 18px;
  --font-size-badge: 12px;
  --font-size-title: 36px;
  
  /* Mobile Breakpoints */
  --mobile-hero: 48px;
  --mobile-section-title: 28px;
  --mobile-card-title: 18px;
  --mobile-description: 16px;
  --mobile-body: 15px;
  --mobile-small: 13px;
  --mobile-price: 48px;
  --mobile-plan-name: 24px;
}

/* Base Typography Classes */
.text-hero {
  font-size: var(--font-size-hero);
  line-height: 1.2;
  font-weight: 600;
}

.text-section-title {
  font-size: var(--font-size-section-title);
  line-height: 1.3;
  font-weight: 600;
}

.text-card-title {
  font-size: var(--font-size-card-title);
  line-height: 1.4;
  font-weight: 600;
}

.text-description {
  font-size: var(--font-size-description);
  line-height: 1.5;
  font-weight: 400;
}

.text-body {
  font-size: var(--font-size-body);
  line-height: 1.6;
  font-weight: 400;
}

.text-small {
  font-size: var(--font-size-small);
  line-height: 1.5;
  font-weight: 400;
}

.text-price {
  font-size: var(--font-size-price);
  line-height: 1.1;
  font-weight: 700;
}

.text-plan-name {
  font-size: var(--font-size-plan-name);
  line-height: 1.3;
  font-weight: 500;
}

/* Responsive Typography */
@media (max-width: 767px) {
  :root {
    --font-size-hero: var(--mobile-hero);
    --font-size-section-title: var(--mobile-section-title);
    --font-size-card-title: var(--mobile-card-title);
    --font-size-description: var(--mobile-description);
    --font-size-body: var(--mobile-body);
    --font-size-small: var(--mobile-small);
    --font-size-price: var(--mobile-price);
    --font-size-plan-name: var(--mobile-plan-name);
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-hero: 40px;
    --font-size-section-title: 24px;
    --font-size-price: 40px;
    --font-size-plan-name: 22px;
  }
}

/* Tablet Adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --font-size-hero: 52px;
    --font-size-section-title: 32px;
    --font-size-price: 56px;
  }
}