_settings.scss

// Brand Colors
$brand-primary: #50b5a7;
$brand-secondary: #e4e7e2;
$brand-third: #004e49;

// Gray Colors
$white: #ffffff;
$black: #000000;
$gray-1: #f3f3f3;
$gray-2: #e6e6e6;
$gray-3: #dfe3e6;
$gray-4: #b2b3b6;
$gray-5: #666666;
$gray: #A7A7A7;
$light-gray: $gray-4;
$lightes-gray: $gray-3;

$box-shadow: 0px 2px 5px rgba(166, 166, 166, 0.5);
$box-shadow-menu: 2px 4px 6px #676c6f;
$border: 1px solid #c7c9c8;
$bg-gray: rgba(228, 231, 226, 0.5);

//== Layout
$max-width: 1440px;
$max-body-width: 1626px;
$screen-xxsmall: 375px;
$screen-xsmall: 480px;
$screen-xsmall-up: 481px;
$screen-small: 768px;
$screen-small-up: 769px;
$screen-medium: 1024px;
$screen-large: 1440px;
$screen-xlarge: $max-body-width;

//== Scaffolding
//
//## Settings for some of the most global styles.
$body-bg: $white;
$text-color: $black;
$accent-color: #009fb8;
$link-color: $accent-color;
$cta-color: #d05c50;
$link-hover-color: #b34035;
$border-menu-color: #dfe3e6;
$button-color: $black;
$button-hover-color: $link-color;
$btn-highlight-color: #d05c50;
$btn-highlight-hover-color: #b34035;

//== Transitions
$transition: 180ms all ease-in-out;

$font-size-base: 10px; // => 1rem = 10px