@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;
}

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

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: 24px;
}

h3 {
  font-size: 2.125rem; // 34px
  margin-bottom: 52px;
}

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

h5 {
  font-size: 1.125rem; // 18px
  margin-bottom: 24px;
}

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

}

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

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