/* ==========================================================================
   core/typography.css - Centralized Typography System
   Requires: variables.css (load first)
   Responsive: 1280x720 to 5120x2880 (5K)
   ========================================================================== */

/* ==========================================================================
   DISPLAY TEXT - Hero/Banner Headlines
   ========================================================================== */

.text-display-1 {
  font-size: var(--font-display-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

.text-display-2 {
  font-size: var(--font-display-2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   HEADINGS - Section & Component Titles
   ========================================================================== */

.text-h1,
h1.text-responsive {
  font-size: var(--font-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.text-h2,
h2.text-responsive {
  font-size: var(--font-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.text-h3,
h3.text-responsive {
  font-size: var(--font-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.text-h4,
h4.text-responsive {
  font-size: var(--font-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.text-h5,
h5.text-responsive {
  font-size: var(--font-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.text-h6,
h6.text-responsive {
  font-size: var(--font-h6);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* ==========================================================================
   BODY TEXT - Paragraphs & Content
   ========================================================================== */

.text-body-lg,
.text-lead {
  font-size: var(--font-body-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

.text-body,
p.text-responsive {
  font-size: var(--font-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

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

/* ==========================================================================
   SMALL/UTILITY TEXT - Captions, Labels, Meta
   ========================================================================== */

.text-small,
small.text-responsive {
  font-size: var(--font-small);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.text-xs {
  font-size: var(--font-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.text-caption {
  font-size: var(--font-small);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

.text-label {
  font-size: var(--font-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   FONT WEIGHTS - Utility classes
   ========================================================================== */

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ==========================================================================
   TEXT COLORS - Using variables
   ========================================================================== */

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }
.text-inverse { color: var(--color-text-inverse); }
.text-link { color: var(--color-link); }

/* ==========================================================================
   TEXT ALIGNMENT
   ========================================================================== */

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

/* ==========================================================================
   LINE HEIGHTS - Utility classes
   ========================================================================== */

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* ==========================================================================
   SPECIAL TEXT STYLES
   ========================================================================== */

/* Hero caption/subtitle */
.text-hero-caption {
  font-size: clamp(14px, 1vw, 28px);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Section subtitle (above section title) */
.text-section-label {
  font-size: var(--font-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

/* Section description (below section title) */
.text-section-desc {
  font-size: var(--font-body-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  max-width: 800px;
}

/* Card title */
.text-card-title {
  font-size: var(--font-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

/* Card description */
.text-card-desc {
  font-size: var(--font-body-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* Breadcrumb text */
.text-breadcrumb {
  font-size: var(--font-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* Stats/numbers */
.text-stat {
  font-size: clamp(32px, 3vw, 80px);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.text-stat-label {
  font-size: var(--font-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* CTA text */
.text-cta-title {
  font-size: var(--font-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.text-cta-desc {
  font-size: var(--font-body-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

/* Quote text */
.text-quote {
  font-size: var(--font-body-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  font-style: italic;
}

.text-quote-author {
  font-size: var(--font-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Mobile - tighter spacing for smaller screens */
@media (max-width: 767px) {
  .text-display-1 {
    font-size: clamp(32px, 8vw, 48px);
  }

  .text-display-2 {
    font-size: clamp(24px, 6vw, 40px);
  }

  .text-h1 {
    font-size: clamp(28px, 7vw, 36px);
  }

  .text-h2 {
    font-size: clamp(24px, 6vw, 28px);
  }

  .text-section-desc {
    max-width: 100%;
  }
}

/* Very Small Mobile (max-width: 375px) - iPhone SE, mini */
@media (max-width: 375px) {
  .text-display-1 {
    font-size: clamp(26px, 7vw, 36px);
  }

  .text-display-2 {
    font-size: clamp(20px, 5.5vw, 30px);
  }

  .text-h1 {
    font-size: clamp(24px, 6.5vw, 32px);
  }

  .text-h2 {
    font-size: clamp(20px, 5.5vw, 26px);
  }

  .text-h3 {
    font-size: clamp(18px, 4.8vw, 22px);
  }

  .text-body-lg,
  .text-lead {
    font-size: clamp(15px, 4vw, 18px);
  }

  .text-stat {
    font-size: clamp(28px, 8vw, 48px);
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .text-display-1 {
    font-size: clamp(40px, 5vw, 56px);
  }

  .text-display-2 {
    font-size: clamp(32px, 4vw, 44px);
  }
}

/* ==========================================================================
   PROSE - For long-form content (blog, legal pages)
   ========================================================================== */

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

.prose h1 {
  font-size: var(--font-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
}

.prose h2 {
  font-size: var(--font-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.prose h3 {
  font-size: var(--font-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.prose h4 {
  font-size: var(--font-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.prose p {
  margin-bottom: var(--space-md);
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

.prose li {
  margin-bottom: var(--space-xs);
}

.prose blockquote {
  font-size: var(--font-body-lg);
  font-style: italic;
  border-left: 4px solid var(--color-gray-300);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--color-text-secondary);
}

.prose a {
  color: var(--color-link);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.prose a:hover {
  color: var(--color-link-hover);
}

.prose strong {
  font-weight: var(--font-weight-semibold);
}

.prose code {
  font-size: 0.9em;
  background: var(--color-gray-100);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   4K/5K DISPLAY SCALING - Generic element scaling for high-resolution displays
   Applied automatically to standard HTML elements across all pages
   ========================================================================== */

/* 4K Displays (3840px - 5119px) */
@media (min-width: 3840px) and (max-width: 5119px) {
  /* Headings - ensure proportional scaling */
  h1, .h1 {
    font-size: clamp(48px, 2.8vw, 90px);
  }

  h2, .h2 {
    font-size: clamp(36px, 2.2vw, 72px);
  }

  h3, .h3 {
    font-size: clamp(28px, 1.6vw, 56px);
  }

  h4, .h4 {
    font-size: clamp(22px, 1.3vw, 44px);
  }

  h5, .h5 {
    font-size: clamp(18px, 1.1vw, 36px);
  }

  h6, .h6 {
    font-size: clamp(16px, 1vw, 32px);
  }

  /* Body text */
  p, li, td, th {
    font-size: clamp(18px, 1.1vw, 32px);
  }

  /* Small text */
  small, .small, caption, figcaption {
    font-size: clamp(16px, 0.9vw, 28px);
  }

  /* Breadcrumb */
  .text-breadcrumb, nav[aria-label="breadcrumb"] {
    font-size: clamp(17px, 1vw, 28px);
  }

  /* Buttons and links */
  button, .btn, a.btn {
    font-size: clamp(18px, 1.1vw, 32px);
  }

  /* Form elements */
  input, textarea, select {
    font-size: clamp(18px, 1.1vw, 32px);
  }

  label {
    font-size: clamp(16px, 1vw, 28px);
  }

  /* Prose content */
  .prose p, .prose li {
    font-size: clamp(20px, 1.1vw, 36px);
  }

  .prose h2 {
    font-size: clamp(32px, 2vw, 56px);
  }

  .prose h3 {
    font-size: clamp(26px, 1.6vw, 48px);
  }

  .prose h4 {
    font-size: clamp(22px, 1.3vw, 40px);
  }

  /* Display text */
  .text-display-1 {
    font-size: clamp(64px, 4vw, 140px);
  }

  .text-display-2 {
    font-size: clamp(52px, 3.2vw, 112px);
  }

  /* Stats/metrics */
  .text-stat {
    font-size: clamp(44px, 3vw, 100px);
  }

  /* CTA text */
  .text-cta-title {
    font-size: clamp(36px, 2.2vw, 72px);
  }

  .text-cta-desc {
    font-size: clamp(22px, 1.3vw, 44px);
  }
}

/* 5K+ Displays (5120px+) */
@media (min-width: 5120px) {
  /* Headings - further scale for 5K */
  h1, .h1 {
    font-size: clamp(56px, 2.8vw, 120px);
  }

  h2, .h2 {
    font-size: clamp(44px, 2.2vw, 96px);
  }

  h3, .h3 {
    font-size: clamp(34px, 1.6vw, 72px);
  }

  h4, .h4 {
    font-size: clamp(28px, 1.3vw, 56px);
  }

  h5, .h5 {
    font-size: clamp(22px, 1.1vw, 44px);
  }

  h6, .h6 {
    font-size: clamp(20px, 1vw, 40px);
  }

  /* Body text */
  p, li, td, th {
    font-size: clamp(22px, 1.1vw, 40px);
  }

  /* Small text */
  small, .small, caption, figcaption {
    font-size: clamp(20px, 0.9vw, 36px);
  }

  /* Breadcrumb */
  .text-breadcrumb, nav[aria-label="breadcrumb"] {
    font-size: clamp(20px, 1vw, 36px);
  }

  /* Buttons and links */
  button, .btn, a.btn {
    font-size: clamp(22px, 1.1vw, 40px);
  }

  /* Form elements */
  input, textarea, select {
    font-size: clamp(22px, 1.1vw, 40px);
  }

  label {
    font-size: clamp(20px, 1vw, 36px);
  }

  /* Prose content */
  .prose p, .prose li {
    font-size: clamp(24px, 1.1vw, 44px);
  }

  .prose h2 {
    font-size: clamp(40px, 2vw, 72px);
  }

  .prose h3 {
    font-size: clamp(32px, 1.6vw, 60px);
  }

  .prose h4 {
    font-size: clamp(28px, 1.3vw, 52px);
  }

  /* Display text */
  .text-display-1 {
    font-size: clamp(80px, 4vw, 180px);
  }

  .text-display-2 {
    font-size: clamp(64px, 3.2vw, 144px);
  }

  /* Stats/metrics */
  .text-stat {
    font-size: clamp(56px, 3vw, 128px);
  }

  /* CTA text */
  .text-cta-title {
    font-size: clamp(44px, 2.2vw, 96px);
  }

  .text-cta-desc {
    font-size: clamp(28px, 1.3vw, 56px);
  }
}