//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif:  "Arial", Arial, Helvetica, sans-serif;
$font-family-base:        $font-family-sans-serif;

// Font Sizes
//
// Font sizes are paired with their standard and bold font weight
// Define mixins for font sizes
$font-size-xsmall: 11px;
$font-size-base:   12px;
$font-size-base-weight: 500;
$font-size-base-weight-bold: 700;
$font-size-base-weight-light: 300;
$font-size-normal: $font-size-base;

@mixin font-size-base() {
    font-size: $font-size-base;
    font-weight: $font-size-base-weight;
}

@mixin font-size-base-bold() {
    font-size: $font-size-base;
    font-weight: $font-size-base-weight-bold;
}

@mixin font-size-base-light() {
    font-size: $font-size-base;
    font-weight: $font-size-base-weight-light;
}

$font-size-medium:  14px;
$font-size-medium-weight: 500;
$font-size-medium-weight-bold: 700;

@mixin font-size-medium() {
    font-size: $font-size-medium;
    font-weight: $font-size-medium-weight;
}

@mixin font-size-medium-bold() {
    font-size: $font-size-medium;
    font-weight: $font-size-medium-weight-bold;
}

$font-weight-base: $font-family-base;
$font-size-large: 14px;
$font-size-large-weight: 300;
$font-size-large-weight-bold: 500;

@mixin font-size-large() {
    font-size: $font-size-large;
    font-weight: $font-size-large-weight;
}

@mixin font-size-large-bold() {
    font-size: $font-size-large;
    font-weight: $font-size-large-weight-bold;
}

$font-size-larger: 16px;
$font-size-larger-weight: 300;
$font-size-larger-weight-bold: 500;

@mixin font-size-larger() {
    font-size: $font-size-larger;
    font-weight: $font-size-larger-weight;
}

@mixin font-size-larger-bold() {
    font-size: $font-size-larger;
    font-weight: $font-size-larger-weight-bold;
}

$font-size-xlarge: 21px;
$font-size-xlarge-weight: 300;
$font-size-xlarge-weight-bold: 500;

@mixin font-size-xlarge() {
    font-size: $font-size-xlarge;
    font-weight: $font-size-xlarge-weight;
}

@mixin font-size-xlarge-bold() {
    font-size: $font-size-xlarge;
    font-weight: $font-size-xlarge-weight-bold;
}

$font-size-xlarger: 28px;
$font-size-xlarger-weight: 300;
$font-size-xlarger-weight-bold: 500;

@mixin font-size-xlarger() {
    font-size: $font-size-xlarger;
    font-weight: $font-size-xlarger-weight;
}

@mixin font-size-xlarger-bold() {
    font-size: $font-size-xlarger;
    font-weight: $font-size-xlarger-weight-bold;
}