$carbon: #222222;
$white: #ffffff;
$epicea: #5d7b84;

$gray-secondary: #666666;
$gray-light-1: #f5f5f5;
$gray-light-2: #f0f0f0;
$gray-light-3: #d8d8d8;
$gray-secondary: #656565;

$primary-color: $epicea;

$space-xsmall: 0.25em;
$space-small: 0.5em;
$space-medium: 1em;
$space-large: 2em;
$space-xlarge: 3em;

// typo
$font-color: $carbon;
$font-family: Montserrat, Arial, sans-serif;
$font-size: 18px;
$font-line-height: 3.1em;
$base-font: 16;
$fz-1: 30em / $base-font;
$fz-2: 24em / $base-font;
$fz-3: 21em / $base-font;
$fz-4: 18em / $base-font;
$fz-small: 14em / $base-font;
$fz-xsmall: 12em / $base-font;;
$fz-xxsmall: 11em / $base-font;;

$width: 1400px;
$link-color: $carbon;
$link-decoration: none;
$link-hover-decoration: none;

$header-logo-size: 59px 37px;
$responsive-menu: left-to-right;
$nav-color: $carbon;
$nav-background: transparent;
$nav-button-background: $white;
$nav-button-color: $carbon;

$nav-mobile-menu-background: $white;

$nav-item-background: transparent;
$nav-item-selected-background: $white;
$nav-item-selected-color: $carbon;

$nav-item-hover-background: transparent;
$nav-item-hover-color: $nav-color;
$nav-item-hover-border: 2px solid $carbon;

$nav-submenu-background: $gray-light-1;
$nav-submenu-color: $gray-secondary;

$toplinks-border-radius: 0;
$toplinks-background: $gray-light-2;
$toplinks-box-shadow: none;
$toplinks-padding: $space-medium;
$toplinks-border: none;

$cell-border: none;
$cell-background: $gray-light-1;
$cell-entry-hover-background: $epicea;
$cell-entry-hover-color: $white;

$title-color: $carbon;
$title-transform: uppercase;
$title-font-size: $fz-2;
$title-weight: 700;
$title-background: transparent;
$title-padding: $space-medium;

$button-background: $epicea;
$button-border-radius: 2px;
$button-border: none;
$button-hover-background: darken($button-background, 20%);
$button-focus-outline: 2px solid $carbon;
$button-focus-outline-offset: 2px;
$cancel-button-style: '%inverted-button';
$buttons-order: previous, cancel (grow), submit;

$form-sidebar-width: 30%;
$form-sidebar-position: left;

$widget-background: lighten($gray-light-1, 2%);
$widget-focus-border: 1px solid $primary-color;
$widget-focus-outline: 1px solid $primary-color;

$wcs-step-color: $carbon;
$wcs-step-border-bottom: 1px solid $gray-light-3;

$footer-background: $epicea;
$footer-color: $white;
$footer-link-color: $white;
