/**********************
Breakpoints 
***********************/

$bp-xl: 1824px;
$bp-large: 1300px;
$bp-laptop: 1024px;
$bp-tablet: 800px;
$bp-mobile: 568px;
$bp-small: 480px;
$bp-xs: 320px;

/**********************
Colors
***********************/

$red: #e32526;
$lighter-grey: #f7f7f7;
$light-grey: #e3e3e3;
$grey: #d0d0d0;
$medium-grey: #B4B4B4;
$dark-grey: #7b7b7b;
$bg-grey: #f9f9f9;


/**********************
Color Usage
***********************/

$color-accent: $red;
$color-background: $light-grey;
$color-primary: $dark-grey;
$color-secondary: #363636;
$color-disabled: $grey;
$color-disabled-nav: $medium-grey;

/**********************
Font Family
***********************/

$font-family: 'Montserrat', sans-serif;

/**********************
Font Weights
***********************/

$font-regular: 400;
$font-bold: 700;

/**********************
Font Size
***********************/

$browser-context: 16; 
$font-micro: em(11);
$font-xs: em(12);
$font-small: em(13);
$font-base: em(16);
$font-medium: em(20);
$font-large: em(24);
$font-xl: em(32);

/**********************
Borders
***********************/

$border-default: solid 1px $color-background;
$border-alternate: solid 1px white;