// Type scale configuration

:root {
  --base-size: 1rem;
  --type-scale: 1.125;
  --header-font-family: var(--primary-font);
  --paragraph-primary-font-family: var(--primary-font);
  --paragraph-secondary-font-family: var(--secondary-font);
  --header-font-color: var(--primary-color);

  // Calculate and create H1-H6 custom properties
  @for $i from 1 through 5 {
    @if $i == 1 { --h5: calc(var(--base-size) * var(--type-scale)); }
    @else { --h#{6 - $i}: calc(var(--h#{7 - $i}) * var(--type-scale)); }

    h#{$i} { font-size: var(--h#{$i}); }
  }

  // Allow for responsive behavior
  // Custom properties don't work
  // must use Sass variables instead
  @media (min-width: $small-phone) {
    --type-scale: 1.1;
  }

  @media (min-width: $phone) {
    --type-scale: 1.125;
  }

  @media (min-width: $tablet) {
    --type-scale: 1.15;
  }

  @media (min-width: $desktop) {
    --type-scale: 1.175;
  }

  @media (min-width: $large-desktop) {
    --type-scale: 1.2;
  }
}

// Setting type scale
body {
  font-family: var(--primary-font);

  // Left out of type scale loop to prevent
  // repeating declarations of all properties
  // for each header
  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight);
    font-family: var(--header-font-family);
    color: var(--header-font-color);
    margin-top: 1rem;

    // Type scale when page is being printed
    @media print {
      font-size: 1rem;
      --header-font-family: Arial, Helvetica, Serif;
      --paragraph-primary-font-family: Arial, Helvetica, Serif;
      --paragraph-secondary-font-family: Arial, Helvetica, Serif;
      --header-font-color: black;
    }
  }

  // Type scale for common elements
  p {
    font-family: var(--paragraph-secondary-font-family);
    font-size: calc(var(--base-size) * var(--type-scale));
    margin-bottom: 1.25rem;
  }

  a {
    color: var(--primary-color);

    &:hover {
      color: var(--primary-color-hover);
    }

    &:active, &:focus {
      color: var(--primary-color-focus);
    }
  }
}