// Colors

$black        ?= hsl(0, 0%, 4%)
$black-bis    ?= hsl(0, 0%, 7%)
$black-ter    ?= hsl(0, 0%, 14%)

$grey-darker  ?= hsl(0, 0%, 21%)
$grey-dark    ?= hsl(0, 0%, 29%)
$grey         ?= hsl(0, 0%, 48%)
$grey-light   ?= hsl(0, 0%, 71%)
$grey-lighter ?= hsl(0, 0%, 86%)

$white-ter    ?= hsl(0, 0%, 96%)
$white-bis    ?= hsl(0, 0%, 98%)
$white        ?= hsl(0, 0%, 100%)

$orange       ?= hsl(14,  100%, 53%)
$yellow       ?= hsl(48,  100%, 67%)
$green        ?= hsl(141, 71%,  48%)
$turquoise    ?= hsl(171, 100%, 41%)
$cyan         ?= hsl(204, 86%,  53%)
$blue         ?= hsl(217, 71%,  53%)
$purple       ?= hsl(271, 100%, 71%)
$red          ?= hsl(348, 100%, 61%)

// Typography

$family-sans-serif ?= BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace ?= monospace
$render-mode ?= optimizeLegibility

$size-1 ?= 3rem
$size-2 ?= 2.5rem
$size-3 ?= 2rem
$size-4 ?= 1.5rem
$size-5 ?= 1.25rem
$size-6 ?= 1rem
$size-7 ?= 0.75rem

$weight-light ?= 300
$weight-normal ?= 400
$weight-medium ?= 500
$weight-semibold ?= 600
$weight-bold ?= 700

// Body

$body-background ?= #fff
$body-size ?= 16px

// Responsiveness

// The container gap, which acts as the offset for breakpoints
$gap ?= 32px
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet ?= 769px
// 960px container + 3rem
$desktop ?= 960px + (2 * $gap)
// 1152px container + 3rem
$widescreen ?= 1152px + (2 * $gap)
// 1344px container + 3rem
$fullhd ?= 1344px + (2 * $gap)

// Miscellaneous

$easing ?= ease-out
$radius-small ?= 2px
$radius ?= 3px
$radius-large ?= 5px
$speed ?= 86ms
$icon-selector ?= fa