_base.scss

// Colors
$white: #fff;
$grey_1: #FAFAFA;
$grey_2: #F5F5F5;
$grey_3: #EEEEEE;
$grey_4: #E0E0E0;
$grey_5: #BDBDBD;
$grey_6: #9E9E9E;
$grey_7: #757575;
$grey_8: #616161;
$grey_9: #424242;
$grey_10: #212121;
$black: #000;

// Brand Colors
// -- normal / darker / lighter
$blue_1: #59BACC;
$blue_2: #39A5B9;
$blue_3: #80CAD8;
$green_1: #58AD69;
$green_2: #458D53;
$green_3: #7ABE88;
$orange_1: #FFBC49;
$orange_2: #FFA916;
$orange_3: #FFCF7C;
$red_1: #E2574C;
$red_2: #D83023;
$red_3: #E98078;

// Gutenberg color options
// -- see editor-color-palette in functions.php
$colors: ( blue, $blue_1 ),
	( green, $green_1 ),
	( orange, $orange_1 ),
	( red, $red_1 );

$base-color: $black;
$highlight: $blue_1;
$border-color: $grey_4;

// Sidr
$sidr_width: 345px;
$sidr_close: 44px;
$sidr_total: $sidr_width + $sidr_close;

// Content
$content-width: 920px;
$block-margin: 20px;

// Grid
$grid-width: 1200px;
$grid-gap: 32px;
$base-margin: 16px;
$wrap_edge: $base-margin;
$margin_2x: $base-margin * 2;
$margin_4x: $base-margin * 4;

// Include Media
$breakpoints: (
  'phone'  : 360px,
  'small'  : 768px,
  'tablet' : 768px, // required for include-media
  'medium' : 992px,
  'large'  : 1200px,
  'desktop': $grid-width + $grid-gap, // required for include-media
);

@import "../vendor/_include-media";
@import "../modules/helpers";
@import "../modules/base-styles";