$primary-font: Roboto, sans-serif;
$font-weight-bold: 500;
$font-weight-normal: 400;
$font-weight-light: 300;
$font-weight-very-light: 200;
$font-size-caption: 12px;
$font-size-input: 14px;
$font-size-paragraph: 16px;
$font-size-subtitle: 18px;
$font-size-secondary: 24px;
$font-size-header: 32px;
$font-size-default: 14px;

@mixin font-main {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-weight: $font-weight-bold;
  font-size: $font-size-header;
  letter-spacing: -1px;
  line-height: 52px;
}

@mixin font-title {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-weight: $font-weight-bold;
  font-size: $font-size-secondary;
  letter-spacing: -0.2px;
  line-height: 32px;
}

@mixin font-title-secondary {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-weight: $font-weight-light;
  font-size: $font-size-secondary;
  letter-spacing: -0.2px;
  line-height: 32px;
}

@mixin font-subtitle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-weight: $font-weight-normal;
  font-size: $font-size-subtitle;
  line-height: 24px;
}

@mixin font-paragraph {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-weight: $font-weight-normal;
  font-size: $font-size-paragraph;
  line-height: 24px;
}

@mixin font-paragraph-bold {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-size: $font-size-paragraph;
  font-weight: $font-weight-bold;
  line-height: 24px;
}

@mixin font-input {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-size: $font-size-input;
  font-weight: $font-weight-normal;
  line-height: 22px;
}

@mixin font-link {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-size: $font-weight-normal;
  font-weight: $font-weight-light;
  line-height: 24px;
  text-decoration: none;
  @include theme-prop(color, link-color);
}

@mixin font-caption {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-size: $font-size-caption;
  font-weight: $font-weight-normal;
  @include theme-prop(color, secondary-text-color);
  line-height: 18px;
}

@mixin font-default {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $primary-font;
  font-size: $font-size-input;
  font-weight: $font-weight-normal;
  line-height: 22px;
}