@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/NotoSansSC-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

.text-display,
.text-title-lg,
.text-title-sm,
.text-paragraph,
.text-paragraph-medium,
.text-paragraph-sm,
.text-paragraph-mini {
  margin: 0;
  letter-spacing: var(--letter-spacing-normal);
}

.text-display {
  font-family: var(--font-display);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-18);
}

.text-title-lg {
  font-family: var(--font-sans);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-9);
}

.text-title-sm {
  font-family: var(--font-sans);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-7);
}

.text-paragraph,
.text-paragraph-medium {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-6);
}

.text-paragraph {
  font-weight: var(--font-weight-normal);
}

.text-paragraph-medium {
  font-weight: var(--font-weight-medium);
}

.text-paragraph-sm {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-5);
}

.text-paragraph-mini {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-4);
}