// Colors
// -------------------------------------------------------------------
// Grayscale
$gray-base:               #858a91 !default;

$black:                   #000 !default;
$darkest-gray:            darken($gray-base, 36%) !default;
$dark-gray:               darken($gray-base, 18%) !default;
$gray:                    $gray-base !default;
$light-gray:              lighten($gray-base, 18%) !default;
$lightest-gray:           lighten($gray-base, 36%) !default;
$white:                   #fff !default;

// Hues
$blue:                    #428bca !default;
$green:                   #5F9300 !default;
$orange:                  #f0ad4e !default;
$tan:                     #F2EAE1 !default;

// Color scheme
$primary-color:           $green !default;
$secondary-color:         $tan !default;
$tertiary-color:          $white !default;


// Baseline
// -------------------------------------------------------------------
$baseline:                .4rem !default;


// Typography
// -------------------------------------------------------------------
// Font families
$heading:                 "Roboto Condensed", Avenir, "Avenir Next",
                          Trebuchet, Verdana, sans-serif !default;
$sans-serif:              "Open Sans", Georgia, Times, serif !default;
$monospace:               Monaco, Menlo, Consolas, monospace !default;

$font-family--base:       $sans-serif !default;
$font-family--heading:    $heading !default;
$font-family--reading:    $sans-serif !default;
$font-family--ui:         $sans-serif !default;
$font-family--code:       $monospace !default;

// Type scale
// Good tool: http://type-scale.com/
$h1:                      2.5rem !default;
$h2:                      1.9rem !default;
$h3:                      1.4rem !default;
$h4:                      1rem !default;
$h5:                      .677rem !default;
$h6:                      .677rem !default;

// Finer control over type scale after certain breakpoint (off by default)
$responsive-type:         true !default;
$h1--desktop:             3.375rem !default;
$h2--desktop:             2.25rem !default;
$h3--desktop:             1.5rem !default;
$h4--desktop:             1rem !default;
$h5--desktop:             .677rem !default;
$h6--desktop:             .677rem !default;

// Text color
$text-color:              $dark-gray !default;

// Text sizes
$font-size--mobile:       14px !default;
$font-size--desktop:      17px !default;
$font-size--lg:           $h3 !default;
$font-size--sm:           $h5 !default;

// Weights
$font-weight--base:       400 !default;
$font-weight--heading:    700 !default;

// Line heights
$line-height--base:       $baseline*4 !default;
$line-height--heading:    1 !default;


// Layout
// -------------------------------------------------------------------
// Breakpoints
// Mobile Safari has problems with rems being used in media queries
$breakpoint--sm:          600px !default;
$breakpoint--md:          680px !default;
$breakpoint--lg:          950px !default;
$breakpoint--hg:          1050px !default;

// Max container width
$max-container-width:     1200px !default;


// Spaces
// -------------------------------------------------------------------
$space-1:                 $baseline*2 !default;
$space-2:                 $baseline*5 !default;
$space-3:                 $baseline*8 !default;
$space-4:                 $baseline*11 !default;

// Specific margins
$p-mb:                    $space-1 !default;
$heading-mb:              $p-mb !default;


// Links
// -------------------------------------------------------------------
// Link colors
$link-color:              $primary-color !default;
$link-hover-color:        darken($primary-color, 10%) !default;
$active-link-color:       darken($primary-color, 25%) !default;


// Buttons
// -------------------------------------------------------------------
$button-padding:          .45rem 1rem .35rem !default;
$button-padding--sm:      .1rem .6rem 0 !default;


// Forms
// -------------------------------------------------------------------
$form-padding:            .45rem .8rem .35rem !default;


// Borders
// -------------------------------------------------------------------
$border-color:            $light-gray !default;
$border-style:            solid !default;
$border-radius:           3px !default;
$border-width:            1px !default;


// Animations
// -------------------------------------------------------------------
$fade:                    .2s ease-out !default;


// Asepct Ratio
// -------------------------------------------------------------------
@mixin aspect-ratio($width, $height) {
    position: relative;
    &:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: ($height / $width) * 100%;
    }
    > .aspect-ratio__content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}
