@import "variables";
@import "functions";
@import "mixins";

* {
  font-size: $base-font-size;
  font-weight: $font-weight-regular;
  color: $color-charcoal-dark;
}

h1, h2, h3, h4, h5 {
  font-family: $sans-serif-font-family;
  font-weight: 600;
  color: $header-color
}

p, a, li {
  font-family: $serif-font-family;
  font-size: toRem(18px);
  font-weight: 300;
}

p {
  line-height: 1.5;
  margin-top: -0.25rem; // to offset the 1.5 line height, it leaves a padding on top
}

a {
  font-size: toRem(18px);
  box-sizing: border-box;
}

h1 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 21px;

  @include desktop {
    font-size: 4rem; // 64px
    line-height: 4.5rem;
    margin-bottom: 20px;
  }
}

h2 {
  font-size: 2.75rem; // 44px
  margin-bottom: $large-spacing;
}

h3 {
  font-size: 2.125rem; // 34px
  margin-bottom: $large-spacing;
}

h4 {
  font-size: 1.5rem; // 24px
  margin-bottom: $large-spacing;
}

h5 {
  font-size: 1.125rem; // 18px
  margin-bottom: $large-spacing;
}

input, textarea, select, button {
  font-family: $sans-serif-font-family;
  font-weight: $font-weight-regular;
  box-sizing: border-box;
}

.small-emph {
  font-size: toRem($base-font-size-pixels);
  margin-bottom: 7.5px;
  font-weight: 600;
}

.inline-title {
  @include inline-title;
}

.hep-link {
  font-family: $sans-serif-font-family;
  color: $color-brand-dark;
}