// STYLE GUIDE // --------------------------------------------------
// Variables
// Syntax: <property>-<value>[--componentName]
// Ex: @color-grayLight--highlightMenu: rgb(51, 51, 50);

$font-size-base: 15px !default;
$fontFamily-sansSerif: "Apres RE", "Helvetica Neue", Helvetica, Arial, sans-serif !default;

// Spacing // --------------------------------------------------
$spacing-default: 15px !default;

// Shadows // --------------------------------------------------
$shadow-1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
$shadow-3: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
$shadow-4: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
$shadow-5: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0  6px 30px 5px rgba(0, 0, 0, 0.12), 0  8px 10px -5px rgba(0, 0, 0, 0.4);

// Breakpoints // --------------------------------------------------
$bp-sm: 30em;
$bp-md: 43.75em;
$bp-lg: 64em;

// Colors // --------------------------------------------------
$color-amount--light: 11%;
$color-amount--lighter: 22%;
$color-amount--lightest: 33%;
$color-amount--dark: 11%;
$color-amount--darker: 22%;
$color-amount--darkest: 33%;

$color-grey: #9C9C9C !default;
$color-grey--light: lighten($color-grey, $color-amount--light);
$color-grey--lighter: lighten($color-grey, $color-amount--lighter);
$color-grey--lightest: lighten($color-grey, $color-amount--lightest);
$color-grey--dark: darken($color-grey, $color-amount--dark);
$color-grey--darker: darken($color-grey, $color-amount--darker);
$color-grey--darkest: darken($color-grey, $color-amount--darkest);