/* as we will be moving away from SCSS and towards tailwind, here's a middle step: using classes for typography instead
* of always using individual classes together with mixins */
.main-title {
  font-family: var(--sans-serif-font-family);
  font-weight: var(--bold-font-weight);
  font-size: var(--largest-font-size);
}

.heading-1 {
  font-family: var(--sans-serif-font-family);
  font-weight: var(--semibold-font-weight);
  font-size: var(--larger-font-size);
}

.heading-2 {
  font-family: var(--sans-serif-font-family);
  font-weight: var(--semibold-font-weight);
  font-size: var(--large-font-size);
}

.heading-3 {
  font-family: var(--sans-serif-font-family);
  font-weight: var(--semibold-font-weight);
  font-size: var(--slightly-large-font-size);
}

.heading-4 {
  font-family: var(--sans-serif-font-family);
  font-weight: var(--semibold-font-weight);
  font-size: var(--regular-font-size);
}

.regular-text {
  font-family: var(--sans-serif-font-family);
  font-weight: var(--regular-font-weight);
  font-size: var(--regular-font-size);
}

.paragraph {
  font-family: var(--serif-font-family);
  font-size: var(--regular-font-size);
  font-weight: var(--regular-font-weight);
  line-height: var(--paragraph-line-height);
}

.inline-title {
  @reuse .regular-text;
  color: var(--color-silver-dark);
}

.text-link {
  text-decoration: underline;
}

.default-link {
  font-size: var(--slightly-small-font-size);
  font-family: var(--sans-serif-font-family);
  font-weight: var(--regular-font-weight);
  cursor: pointer;
  color: var(--color-brand);
}
