/* ==========================================================================
   04-UTILITIES: Typography
   ========================================================================== */

.u-font-serif {
  font-family: var(--font-serif) !important;
}

.u-font-sans {
  font-family: var(--font-sans) !important;
}

.u-font-mono {
  font-family: var(--font-mono) !important;
}

.u-text-clay {
  color: var(--color-muted-clay) !important;
}

.u-text-clay-accessible {
  color: var(--color-muted-clay-text) !important;
}

.u-text-black {
  color: var(--color-coffee-black) !important;
}

.u-text-white {
  color: var(--color-on-primary) !important;
}

.u-text-muted {
  color: var(--color-outline-dark) !important;
}

.u-text-uppercase {
  text-transform: uppercase !important;
}

.u-tracking-widest {
  letter-spacing: 0.12em !important;
}

.u-leading-tight {
  line-height: 1.1 !important;
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}