@import "variables.scss";

h1,
.text-display1 {
  font-size: $font-size-display1;
  letter-spacing: $letter-spacing-condensed;
}
h2,
.text-display2 {
  font-size: $font-size-display2;
  letter-spacing: $letter-spacing-condensed;
}
h3,
.text-display3 {
  font-size: $font-size-display3;
}
h4,
.text-display4 {
  font-size: $font-size-display4;
}
h5,
.text-display5 {
  font-size: $font-size-display5;
}
h6,
.text-display6 {
  font-size: $font-size-display6;
}

h1,
h2,
h3,
h4,
h5,
h6,
[class^="text-display"] {
  font-weight: $font-weight-bold;
  small {
    font-weight: normal;
    font-size: inherit;
  }
  line-height: $line-height-m;
  margin: 0;
  padding: 0;
  color: $color-text;
}

h4,
h5,
h6 {
  line-height: $line-height-default;
}

a,
a:hover {
  color: $color-primary;
  text-decoration: none;

  &.faded {
    color: $color-text-light;
  }
}

.text-overline {
  font-size: $font-size-overline;
  font-weight: $font-weight-bold;
  line-height: $line-height-default;
  letter-spacing: $letter-spacing-expanded;
  text-transform: uppercase;
}

.text-footer {
  font-size: $font-size-overline;
  font-weight: $font-weight-bold;
  line-height: $line-height-default;
  letter-spacing: $letter-spacing-expanded;
  text-transform: uppercase;
  color: $color-gray-opaque;
}

header,
.text-header {
  line-height: $line-height-default;
  font-weight: $font-weight-header;
}

.text-default {
  font-size: $font-size-default;
}

.color-default {
  color: $color-text !important;
}
.color-primary {
  color: $color-primary !important;
}
.color-secondary {
  color: $color-text-light !important;
}
.color-dark {
  color: $color-dark-blue !important;
}
.color-light {
  color: $color-gray-opaque !important;
}
.color-danger {
  color: $color-error !important;
}

.font-weight-light {
  font-weight: $font-weight-light;
}
