@import '../tools/colors';

%header {
    font-weight: bold;
    color: $slate700;
}

h1 {
    @extend %header;
    @extend .font-40;
}

h2 {
    @extend %header;
    @extend .font-30;
}

h3 {
    @extend %header;
    @extend .font-26;
}

h4 {
    @extend %header;
    @extend .font-20;
}

h5 {
    @extend %header;
    @extend .font-18;
}

h6 {
    @extend %header;
    @extend .font-16;
}

@for $i from 1 through 9 {
    .font-weight-#{$i} {
        font-weight: $i * 100;
    }
}


@for $i from 8 through 22 {
    .font-#{$i} {
        font-size: #{$i}px;
    }
}

$fontSizes: 24, 26, 30, 36, 38, 40, 55, 72, 75, 90;
@each $i in $fontSizes {
   .font-#{$i} {
        font-size: #{$i}px;
    }
}

.text {
    &-white {
        color: $grey900;
    }
}