@use 'theme/spacing.tokens' as spacing;
@use 'theme/typography.tokens' as typography;

.overline {
  @include typography.overline();
}
.body-xs {
  @include typography.body-xs();
}
.body-s {
  @include typography.body-s();
}
.body-m {
  @include typography.body-m();
}

h6,
.title-xxs {
  @include typography.title-xxs();
}

h5,
.title-xs {
  @include typography.title-xs();
}

h4,
.title-s,
.title-s-mobile {
  @include typography.title-s-mobile();
}

h3,
.title-m,
.title-m-mobile {
  @include typography.title-m-mobile();
}

h2,
.title-l,
.title-l-mobile {
  @include typography.title-l-mobile();
}

h1,
.display-s,
.display-s-mobile {
  @include typography.display-s-mobile();
}

.display-m,
.display-m-mobile {
  @include typography.display-m-mobile();
}

@media (min-width: spacing.$size-viewport-medium-min) {
  h4,
  .title-s {
    @include typography.title-s();
  }

  h3,
  .title-m {
    @include typography.title-m();
  }

  h2,
  .title-l {
    @include typography.title-l();
  }

  h1,
  .display-s {
    @include typography.display-s();
  }

  .display-m {
    @include typography.display-m();
  }
}