html {
  font-size: $base-font-size;
}

body {
  -webkit-font-smoothing: antialiased;
  color: $foreground;
  font-family: $font-family;
  font-size: $font-size--medium;
  font-weight: 400;
  line-height: 1.25;
  text-rendering: optimizeLegibility;
}

input,
.input,
button,
.button {
  font-size: $font-size--small;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: $dark-grey;

  .inverse & {
    color: $white;
  }
}

h1,
.h1 {
  font-size: $font-size--xx-large;
  font-weight: 700;
  margin: $spacing--x-large 0;
}

h2,
.h2 {
  font-size: $font-size--x-large;
  font-weight: 500;
  margin: $spacing--large 0;
}

h3,
.h3 {
  font-size: $font-size--large;
  font-weight: 400;
  margin: $spacing--medium 0;
}

h4,
.h4 {
  font-size: $font-size--small;
  font-weight: 500;
  margin: $spacing 0;
}

h5,
.h5 {
  font-size: $font-size--x-small;
  font-weight: 400;
  margin: $spacing--small 0;
}

h6,
.h6 {
  font-size: $font-size--xx-small;
  font-weight: 400;
  margin: $spacing--x-small 0;
}

a {
  color: inherit;
}

.unit {
  display: inline-block;
  font-size: 0.8em;
  font-style: normal;
  margin-bottom: 0.1em;
  opacity: 0.8;
}

.text-overflow {
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
}

p {
  margin-bottom: $spacing--medium;
}

.copy {
  &--lead {
    font-size: $font-size--medium;
    line-height: 1.5rem;
    font-weight: 300;
  }
}
