// Variables

// Color
$color-primary ?= #ff3b8e
$color-brand ?= $color-primary
$color-brand-light   ?= lighten($color-brand, 25%)
$color-brand-lighter ?= lighten($color-brand, 50%)
$color-brand-dark    ?= darken($color-brand, 25%)
$color-brand-darker  ?= darken($color-brand, 50%)

// Grays
$color-gray   ?= #828c8f
$color-gray-1 ?= lighten($color-gray, 80%)
$color-gray-2 ?= lighten($color-gray, 70%)
$color-gray-3 ?= lighten($color-gray, 60%)
$color-gray-4 ?= lighten($color-gray, 50%)
$color-gray-5 ?= lighten($color-gray, 40%)
$color-gray-6 ?= lighten($color-gray, 30%)
$color-gray-7 ?= lighten($color-gray, 20%)
$color-gray-8 ?= lighten($color-gray, 10%)
$color-gray-9 ?= $color-gray
$color-gray-10 ?= darken($color-gray, 10%)
$color-gray-11 ?= darken($color-gray, 20%)
$color-gray-12 ?= darken($color-gray, 30%)
$color-gray-13 ?= darken($color-gray, 40%)
$color-gray-14 ?= darken($color-gray, 50%)
$color-gray-15 ?= darken($color-gray, 60%)
$color-gray-16 ?= darken($color-gray, 70%)

// Other colors
$color-black   ?= #0a0a0a
$color-white   ?= #fefefe
$color-blue    ?= #00B0E9
$color-red     ?= #f56c6c
$color-yellow  ?= #f5ad58
$color-green   ?= #67C23A
$color-pink    ?= #D3529B

// App
$color-danger  ?= $color-red
$color-warning ?= $color-yellow
$color-success ?= $color-green
$color-info    ?= $color-blue
$color-background ?= $color-white
$color-border     ?= #eaeaea

// Links
$color-link        ?= $color-brand
$color-link-hover  ?= $color-gray-8
$color-link-active ?= $color-gray-5

// Space
$space-base ?= 16px
$space-sm ?= 8px
$space-lg ?= 24px

$global-spaces ?= {
  sm: $space-base * .5,
  md: $space-base,
  lg: $space-base * 1.25,
}

// Typo
$font-helvetica ?= Helvetica neue, Helvetica, Arial, sans-serif
$font-mono      ?= Menlo, Monaco, Consolas, monospace
$font-default   ?= $font-helvetica

$font-base ?= 14px
$font-xs   ?= 10px
$font-sm   ?= 12px
$font-md   ?= $font-base
$font-lg   ?= 16px
$font-xl   ?= 18px

$font-h1 ?= 28px
$font-h2 ?= 24px
$font-h3 ?= 20px
$font-h4 ?= 18px
$font-h5 ?= 16px
$font-h6 ?= 14px

$font-weight-base   ?= 400
$font-weight-light  ?= 300
$font-weight-medium ?= 600
$font-weight-bold   ?= 700
$font-weight-bolder ?= 800

$font-color-base  ?= $color-gray-12
$font-color-light ?= $color-gray-4

$line-height-base    ?= 1.5
$line-height-heading ?= 1.2