@mixin font($type, $weight) {
  
  font-size: var(--fs-#{$type});
  font-weight: $weight;
  letter-spacing: var(--ls-#{$type});
  line-height: var(--lh-#{$type});
}

%text {
  margin: 0;
  padding: 0;
  color: var(--tc-surface-high);
}

.text-h1 {
  @extend %text;
  @include font(h1, 500);
}
.text-h2 {
  @extend %text;
  @include font(h2, 500);
}
.text-s1 {
  @extend %text;
  @include font(s1, 400);
}
.text-b1 {
  @extend %text;
  @include font(b1, 400);
  color: var(--tc-surface-normal);
}
.text-b2 {
  @extend %text;
  @include font(b2, 400);
  color: var(--tc-surface-normal);
}
.text-b3 {
  @extend %text;
  @include font(b3, 400);
  color: var(--tc-surface-low);
}