/* ==========================================================================
   02. Typographie
   ========================================================================== */

.text-brand {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.text-display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.text-h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.text-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.text-h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.text-h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.text-body-xl {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-regular);
}

.text-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}

.text-small {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}

.text-caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-grey-700);
}

.text-link {
  color: var(--color-primary-500);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}

.text-link:hover {
  border-color: currentColor;
}

.text-muted {
  color: var(--color-grey-700);
}

.text-primary {
  color: var(--color-primary-900);
}

.font-regular { font-weight: var(--fw-regular); }
.font-medium { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold { font-weight: var(--fw-bold); }