// *************************************
//
//   Config
//   -> Fonts, Variables
//
// *************************************

// -------------------------------------
//   @font-face
// -------------------------------------

// ----- Open Sans ----- //

// +font-face('OpenSans', 'OpenSans')
// +font-face('OpenSans', 'OpenSansBold', bold)
// +font-face('OpenSans', 'OpenSansItalic', normal, italic)

// -------------------------------------
//   Colors
// -------------------------------------

// ----- Palette ----- //

$blue: #12a9d5
$black: #131518
$dark: #171b1f

// ----- Base ----- //

$c-background-invert: #F7F9FA
$c-background: $dark
$c-border: lighten($dark, 5%)
$c-highlight: #0F6A85
$c-subdue: lighten($dark, 5%)
$c-text-invert: #fff
$c-text: #919191

// -------------------------------------
//   Base
// -------------------------------------

// ----- Borders & Box Shadow ----- //

$b-borderRadius: 3px
$b-borderStyle: solid
$b-borderWidth: 2px
$b-border: $b-borderWidth $b-borderStyle $c-border
$b-boxShadow: 0 2px 0 rgba($c-text, 0.25)

// ----- Typography ----- //

$b-fontFamily-heading: sans-serif
$b-fontFamily: sans-serif
$b-fontSize: 16px
$b-fontSize-xs: 60%
$b-fontSize-s: 75%
$b-fontSize-m: 90%
$b-fontSize-l: 115%
$b-fontSize-xl: 150%
$b-fontSize-xxl: 360%
$b-lineHeight: 1.5

// ----- Sizing ----- //

$b-maxWidth: em(1024px)
$b-maxWidth-m: em(900px)
$b-maxWidth-s: em(700px)
$b-space: em(20px)
$b-space-xs: 0.25 * $b-space
$b-space-s: 0.5 * $b-space
$b-space-m: 0.75 * $b-space
$b-space-l: 2 * $b-space
$b-space-xl: 4 * $b-space

// ----- Button Sizing ----- //

$btn-space: em(10px)

// -------------------------------------
//   Components
// -------------------------------------

// ----- Grid ----- //

// Breakpoints

$g-s: em(480px)
$g-m: em(800px)
$g-l: em(1024px)

// Settings

$g-columns: 12
$g-defaults: 's' $g-s, 'm' $g-m, 'l' $g-l
$g-gutter: 40px
$g-silent: true

// Selector

$g-selector: if($g-silent, unquote("%"), unquote("."))

// -------------------------------------
//   Structures
// -------------------------------------

// ----- Hero ----- //

$hero-background: #000000
$hero-minHeight: 320px