/* ============================================================================
   Typography System
   Heading styles, body text, link styles with WCAG AA color contrast
   ============================================================================ */

/* Headings */
h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

h5 {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body Text */
p {
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

/* Small text (metadata, captions) */
small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
  color: var(--color-text-light);
}

/* Lead paragraph */
.lead {
  font-size: var(--font-size-large);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
}

/* Emphasized text */
em,
i {
  font-style: italic;
}

strong,
b {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Utility Classes for Typography */
.text-center {
  text-align: center;
}

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

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

.text-justify {
  text-align: justify;
}

.text-muted {
  color: var(--color-text-light);
}

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.font-light {
  font-weight: var(--font-weight-light);
}

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

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

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

/* Responsive Typography (mobile-first) */

/* Tablet and up (768px) */
@media (min-width: 768px) {
  h1 {
    font-size: calc(var(--font-size-4xl) * 1.1);
  }

  h2 {
    font-size: calc(var(--font-size-3xl) * 1.1);
  }

  h3 {
    font-size: calc(var(--font-size-2xl) * 1.05);
  }

  body {
    font-size: 16px;
  }
}

/* Desktop and up (1024px) */
@media (min-width: 1024px) {
  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
  }
}

/* Word break handling */
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

p,
li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}