html {
  font-size: 10px; // For easier rem calculations
}

body {
  color: var(--paragraph-color);
  line-height: var(--text-line-height, 1.5);
  background-color: var(--body-background-color);
  font: {
    size: var(--text-size);
    family: var(--main-font), $backup-fonts;
  }

  @each $heading, $size, $mobileSize, $lineHeight, $mobileLineHeight, $fontWeight, $mobileFontWeight in $heading-sizes {
    #{$heading},
    .#{$heading} {
      font-weight: #{$mobileFontWeight};
      color: var(--heading-base-color);
      font-size: #{$mobileSize};
      line-height: #{$mobileLineHeight};

      @include min(tablet) {
        font-weight: #{$fontWeight};
        font-size: #{$size};
        line-height: #{$lineHeight};
      }
    }
  }
}