/**
 * @file
 * Defines typography styles for the theme.
 *
 * This file contains CSS rules for setting font families, font sizes,
 * line heights, and font weights for various elements, including
 * headings (h1-h6), body text, and custom font size classes.
 *
 * It uses CSS variables for maintainability and consistency.
 */

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* Heading and large font classes share the secondary font family. */
h1,
h2,
h3,
h4,
h5,
h6,
.font-size-stats,
.font-size-h1-homepage,
.font-size-h1,
.font-size-h2,
.font-size-teaser,
.font-size-x-large,
.font-size-lg {

  font-family: var(--font-family-secondary);
}

/* Extremely large font class. */
.font-size-stats {
  font-size: var(--font-size-stats-responsive);
  line-height: var(--line-height-h1-homepage);
}

/* H1 and corresponding large font class. */
h1 {
  font-size: var(--font-size-h1-responsive);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h1);
  margin-bottom: var(--spacing-3xl);
}

.font-size-h1-homepage {
  font-size: var(--font-size-h1-homepage);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h1-homepage);
  margin-bottom: var(--spacing-3xl);
}

/* H2 and corresponding large font class. */
h2 {
  font-size: var(--font-size-h2-responsive);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h2);
  margin-bottom: var(--spacing-lg);
}

.font-size-h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h1);
  margin-bottom: var(--spacing-lg);
}

/* H3 and corresponding large font class. */
h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h5);
  margin-bottom: var(--spacing-xl);
}

.font-size-h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h2);
  margin-bottom: var(--spacing-xl);
}

/* H4 and corresponding large font class. */
h4 {
  font-size: var(--font-size-teaser-responsive);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h4);
}

.font-size-teaser {
  font-size: var(--font-size-teaser);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h4);
}

/* H5 and corresponding large font class. */
h5 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h5);
}

.font-size-x-large {
  font-size: var(--font-size-x-large);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h5);
}

/* H6 and corresponding large font class. */
h6 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-large-text);
}

.font-size-lg {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-large-text);
}

/* Small font classes. */
.font-size-sm {
  font-size: var(--font-size-sm);
}

.font-size-xs {
  font-size: var(--font-size-xs);
}

/* Bold text style. */
strong {
  font-weight: var(--font-weight-bold);
}