@mixin font-sans {
  font-family: "FuturaPT", sans-serif;
  font-weight: 100;
}

@mixin font-sans-bold {
  font-family: "FuturaPT", sans-serif;
  font-weight: 700;
}

@mixin font-number {
  font-family: "FuturaPT", sans-serif;
  font-weight: 100;
}

@mixin text-white {
  color: $color-white;
}

@mixin text-green {
  color: $color-green;
}

@mixin text-green-dark {
  color: $color-green-80;
}

@mixin text-red {
  color: $color-red;
}

@mixin text-yellow {
  color: $brand-primary-fg;
}

@mixin text-gray {
  color: $color-gray-50;
}

@mixin text-gray-hover {
  &:hover {
    @include text-gray;
  }
}

@mixin h1-sans {
  font-size: 34px;
  line-height: 1.17;
  @include font-sans-bold;

  @include medium {
    font-size: 62px;
    line-height: 1;
  }
}

@mixin h2-sans {
  font-size: 27px;
  line-height: 1.15;
  @include font-sans-bold;

  @include medium {
    font-size: 41px;
    line-height: 1.11;
  }
}

@mixin h3-sans {
  font-size: 24px;
  line-height: 22px;
  @include font-sans-bold;

  @include medium {
    font-size: 34px;
    line-height: 1.1;
  }
}

@mixin h4-sans {
  font-size: 20px;
  line-height: 1.06;
  @include font-sans-bold;

  @include medium {
    font-size: 27px;
    line-height: 1.09;
  }
}

@mixin h5-sans {
  font-size: $base-font-size;
  line-height: 1.11;
  @include font-sans-bold;

  @include medium {
    font-size: 20px;
    line-height: 1.11;
  }
}

@mixin h1-sans-normal {
  font-size: 34px;
  line-height: 1.11;
  @include font-sans;

  @include medium {
    font-size: 62px;
    line-height: 1;
  }
}

@mixin h2-sans-normal {
  font-size: 27px;
  line-height: 1.15;
  @include font-sans;

  @include medium {
    font-size: 41px;
    line-height: 1.11;
  }
}

@mixin h3-sans-normal {
  font-size: 24px;
  line-height: 1.1;
  @include font-sans;

  @include medium {
    font-size: 34px;
    line-height: 1.22;
  }
}

@mixin h4-sans-normal {
  font-size: 20px;
  line-height: 1.06;
  @include font-sans;

  @include medium {
    font-size: 27px;
    line-height: 1.09;
  }
}

@mixin h5-sans-normal {
  font-size: $base-font-size;
  line-height: 1.11;
  @include font-sans;

  @include medium {
    font-size: 20px;
    line-height: 1.11;
  }
}

@mixin p1 {
  font-size: $base-font-size;
  line-height: 1.5;
  @include font-sans;

  @include medium {
    font-size: 27px;
  }
}

@mixin p2 {
  font-size: $base-font-size;
  line-height: 1.5;
  @include font-sans;

  @include medium {
    font-size: 20px;
  }
}

@mixin text-metadata {
  color: $color-black-semitransparent-darkest;
  font-size: 14px;
  line-height: 1.63;
  letter-spacing: 4px;
  @include font-sans-bold;

  @include medium {
    letter-spacing: 6px;
    font-size: $secondary-font-size;
    line-height: 1.81;
  }
}

@mixin text-metadata-md {
  @include text-metadata;

  @include medium {
    font-size: 16px;
  }
}

@mixin blockquote {
  @include text-green;
  @include font-sans-bold;
  font-size: 27px;
  line-height: 1.3;

  @include medium {
    font-size: 48px;
    line-height: 1.3;
  }
}

@mixin inline-header-md {
  @include medium {
    margin: 0;
  }
}

@mixin fine-print {
  font-size: 14px;
  line-height: 1.77;
}

@mixin uppercase-sans-bold {
  @include h5-sans;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;

  @include medium {
    font-size: 16px;
    line-height: 1.33;
  }
}

@mixin uppercase-text {
  @include font-sans-bold;
  @include text-gray;
  text-decoration: none;
  text-transform: uppercase;
  &.size-md {
    letter-spacing: 6px;
    font-size: 16px;
  }
  &.size-sm {
    letter-spacing: 4px;
    font-size: 14px;
  }
}

@mixin section-header {
  @include text-gray;
  font-size: $secondary-font-size;
}