:root {
  --font-family-sans: "Roboto Flex", sans-serif;
  --font-size: 1rem;

  --font-family-condensed: "Roboto Condensed", sans-serif;
  --font-size-condensed: 1rem;

  --font-family-serif: "EB Garamond", serif;
  --font-size-serif: 1.2rem;

  --font-family-mono: "Roboto Mono", Courier, monospace;
  --font-size-mono: 1rem;

  --font-family-title: "Montserrat", sans-serif;
  --font-size-title: 1rem;
  --font-weight-title: 700;
  --font-text-transform-title: none;
  --font-letter-spacing-title: 0;

  --font-family-button: "Montserrat", sans-serif;
  --font-size-button: 0.8rem;

  --font-family-note: "Montserrat", sans-serif;
  --font-size-note: 0.8rem;

  --font-family-caption: "Roboto Condensed", sans-serif;
  --font-size-caption: 0.8rem;
}

/* ============================================================================ */

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

.font-title {
  font-family: var(--font-family-title) !important;
  font-size: var(--font-size-title) !important;
}

.font-condensed {
  font-family: var(--font-family-condensed) !important;
  font-size: var(--font-size-condensed) !important;
}

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

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

.note {
  border-left: 1px solid var(--darker-20) !important;
  padding: 1rem !important;
  font-family: var(--font-family-note) !important;
  font-size: var(--font-size-note) !important;
  line-height: calc(var(--font-size-note) * 1.3) !important;
  width: calc(100% - 2rem) !important;
}

.caption {
  font-family: var(--font-family-caption) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 700 !important;
  line-height: calc(var(--font-size-caption) * 1.3);
}