// Colors
// -------------------------------------------------------------------
// Grayscale
$gray-base:               #6e7784 !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
$red:                     #c03b2b !default;
$tan:                     #f5f4f0 !default;
$blue:                    #428bca !default;

// Color scheme
$primary-color:           $red !default;
$secondary-color:         $tan !default;
$tertiary-color:          $blue !default;


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


// Typography
// -------------------------------------------------------------------
// Font families
$sans-serif:              Cabin, Avenir, "Avenir Next", Trebuchet,
                          Verdana, sans-serif !default;
$serif:                   "Playfair Display", Times, serif !default;

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

// Type scale
// Good tool: http://type-scale.com/
$h1:                      2.3rem !default;
$h2:                      2.3rem !default;
$h3:                      1.333rem !default;
$h4:                      1rem !default;
$h5:                      .75rem !default;
$h6:                      .75rem !default;

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

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

// Text sizes
$font-size--mobile:       18px !default;
$font-size--desktop:      22px !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--ty:          500px !default;
$breakpoint--sm:          1200px !default;
$breakpoint--lg:          1500px !default;

// Max container width
$max-container-width:     1000px !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-color:              $primary-color !default;
$link-hover-color:        darken($primary-color, 9%) !default;
$active-link-color:       darken($primary-color, 15%) !default;


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


// Forms
// -------------------------------------------------------------------
$form-padding:            .35rem .8rem .25rem !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;


// Sections
// -------------------------------------------------------------------
$header-width:            3.5rem !default;
$hero-width:              calc(55%) !default;
