$sizes: 10;

// Sizes
@mixin size($size) {
  font-size: var(--font-size-#{$size});
}
@mixin size_classes {
  @for $i from 1 through $sizes {
    &.text-#{$i} { 
      @include size($i);
    }
  }
}

// Align
@mixin align_classes {
  &.text-align-start {
    text-align: start;
  }
  &.text-align-center {
    text-align: center;
  }
  &.text-align-end {
    text-align: end;
  }
}

// Fonts
@mixin font-heading {
  font-family: var(--font-heading);
}
@mixin font-subheading {
  font-family: var(--font-subheading);
}
@mixin font-text {
  font-family: var(--font-text);
}