body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
  color: var(--color-text);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
  color: var(--color-text);
}

a {
  color: var(--color-link);
  transition: color var(--duration-fast) ease-out;
}

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

a:focus-visible {
  outline: 2px solid var(--color-teal-dark);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

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

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

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

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

.label-sm {
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-sm);
  line-height: var(--line-height-label-sm);
  letter-spacing: var(--letter-spacing-label-sm);
}