/**
 * Typography utility classes.
 * Apply to semantic HTML. One class per typography role.
 */

.typography-display {
  font-size: var(--typography-display-font-size);
  font-weight: var(--typography-display-font-weight);
  line-height: var(--typography-display-line-height);
  font-family: var(--typography-display-font-family);
  letter-spacing: var(--typography-display-letter-spacing);
}

.typography-large-heading {
  font-size: var(--typography-large-heading-font-size);
  font-weight: var(--typography-large-heading-font-weight);
  line-height: var(--typography-large-heading-line-height);
  font-family: var(--typography-large-heading-font-family);
  letter-spacing: var(--typography-large-heading-letter-spacing);
}

.typography-subheading {
  font-size: var(--typography-subheading-font-size);
  font-weight: var(--typography-subheading-font-weight);
  line-height: var(--typography-subheading-line-height);
  font-family: var(--typography-subheading-font-family);
}

.typography-medium-heading {
  font-size: var(--typography-medium-heading-font-size);
  font-weight: var(--typography-medium-heading-font-weight);
  line-height: var(--typography-medium-heading-line-height);
  font-family: var(--typography-medium-heading-font-family);
}

.typography-small-heading {
  font-size: var(--typography-small-heading-font-size);
  font-weight: var(--typography-small-heading-font-weight);
  line-height: var(--typography-small-heading-line-height);
  font-family: var(--typography-small-heading-font-family);
}

.typography-body {
  font-size: var(--typography-body-font-size);
  font-weight: var(--typography-body-font-weight);
  line-height: var(--typography-body-line-height);
  font-family: var(--typography-body-font-family);
}

.typography-body-small {
  font-size: var(--typography-body-small-font-size);
  font-weight: var(--typography-body-small-font-weight);
  line-height: var(--typography-body-small-line-height);
  font-family: var(--typography-body-small-font-family);
}

/* Default for meta text: labels, nav links, eyebrows, meta-value, etc. */
.typography-meta {
  font-size: var(--typography-meta-font-size);
  font-weight: var(--typography-meta-font-weight);
  line-height: var(--typography-meta-line-height);
  font-family: var(--typography-meta-font-family);
  letter-spacing: var(--typography-meta-letter-spacing);
}

/* Reserved for chart/graph axis labels, data point labels, and similar data-viz contexts only */
.typography-meta-small {
  font-size: var(--typography-meta-small-font-size);
  font-weight: var(--typography-meta-small-font-weight);
  line-height: var(--typography-meta-small-line-height);
  font-family: var(--typography-meta-small-font-family);
  letter-spacing: var(--typography-meta-small-letter-spacing);
}