// colors
$alert-1: #FFE9E9;
$alert-2: #C60C0C;
$black: #0C0C12;
$blue-1: #E9FBFF;
$blue-4: #007C94;
$blue-5: #005A6B;
$gray-10: #27283B;
$gray-1: #FAFAFC;
$gray-2: #E2E1E6;
$gray-3: #C0C0CA;
$gray-5: #9696A1;
$gray-6: #80808C;
$gray-7: #6B6B78;
$gray-8: #525364;
$gray-9: #3f3f4f;
$green-1: #EEFFF0;
$green-4: #008910;
$information-1: #E9FFFE;
$information-2: #006AC4;
$pink-1: #FFEAF7;
$pink-4: #C10680;
$success-1: #EEFFF0;
$success-2: #03880F;
$warning-1: #FFF2EB;
$warning-2: #E86826;
$yellow-1: #fffae5;
$yellow-2: #ffeb99;
$yellow-3: #ffdc4c;
$yellow-4: #ffcd00;
$yellow-5: #e5b900;

$shadow-1: 0px 4px 8px rgba(39, 40, 59, 0.16);
$shadow-8: 0px 0px 10px rgba(12, 12, 18, 0.4);

// typo
$base-font: 10 / 16;

$font-size-0: 1.4rem * $base-font;
$font-size-1: 1.6rem * $base-font;
$font-size-2: 1.8rem * $base-font;
$font-size-3: 2rem * $base-font;
$font-size-4: 2.4rem * $base-font;
$font-size-5: 2.8rem * $base-font;
$font-size-6: 3.6rem * $base-font;
$font-size-7: 4.5rem * $base-font;
$font-size-8: 5.7rem * $base-font;
$font-size-9: 7.2rem * $base-font;

$font-weight-4: 400;
$font-weight-5: 500;
$font-weight-6: 600;
$font-weight-7: 700;
$font-weight-8: 800;

$lineheight-0: 100%;
$lineheight-1: 125%;
$lineheight-2: 137.5%;
$lineheight-3: 150%;

$letterspacing-0: 0;
$letterspacing-1: 0.025rem;

// borders & layout
$border-width-0: 1px;
$border-width-1: 2px;
$border-width-2: 3px;
$border-width-3: 4px;

$border-radius-0: 0.5rem * $base-font;
$border-radius-1: 1rem * $base-font;
$border-radius-2: 1.5rem * $base-font;
$border-radius-3: 3.2rem * $base-font;
$border-radius-4: 4rem * $base-font;

$space-xsmall: 0.5rem * $base-font;
$space-small: 1rem * $base-font;
$space-medium: 1.5rem * $base-font;
$space-large: 2rem * $base-font;
$space-xlarge: 3rem * $base-font;


// fonts
$primary-color: $yellow-4;
$font-family: Raleway, Arial, sans-serif;
$font-size: $font-size-1;

$font-color: $gray-9;

$title-background: transparent;
$title-color: $gray-9;
$title-weight: $font-weight-7;
$title-font-size: $font-size-4;

// layout & general
$width: 1100px;
$header-width: 1600px;
$border-radius: 10px;
$form-sidebar-width: 25%;

// header & nav
$header-mobile-padding-v: $space-small;
$header-mobile-padding-h: $space-medium;
$header-desktop-padding-v: $space-medium;
$header-desktop-padding-h: $space-xlarge;
$header-background-color: black;
$header-logo-height: 50px;
$header-logo-size: 217px $header-logo-height;
$toplinks-style: none;

// nav
$nav-background: black;
$nav-color: white;
$nav-active-color: white;

$nav-border-radius: 0;
$nav-border-color: transparent;
$nav-menu-side: 24px;
$nav-menu-color: white !default;
$nav-button-background: black;
$nav-button-color: white;
$nav-submenu-background: white;
$nav-submenu-color: $gray-9;

$nav-item-selected-border: 0 0 2px 0 solid $yellow-4;
$nav-item-selected-background: transparent !default;
$nav-item-selected-color: white;
$nav-item-hover-background: transparent; // we handle that on the menu--link, not on menu--item
$nav-item-hover-color: $gray-9;

$nav-mobile-menu-background: white;
$nav-mobile-menu-item-color: $gray-9;
$nav-item-spacing: 0px !default;

$nav-after-image: false;

// footer
$footer-background: black;
$footer-link-color: white;
$back-top-display: block;
$back-top-icon-size: 64px;
$back-top-layout-direction: vertical !default; // horizontal || vertical
$back-top-layout-position: static (right: 0, top: 0);


// widgets
$widget-color: $gray-8;
$form-accent-color: $yellow-4;
$widget-border-radius: $border-radius-1;
$widget-padding: $space-large;
$widget-unique-checkbox-position: left !default;

// we handle it with outline, as it grows on focus & hover, to avoid inputs
// being resized because of box-sizing: border-box
$widget-border: 0;
$widget-focus-border: 0;
$widget-focus-outline: $border-width-3 solid $gray-8;

$button-background: $primary-color;
$button-color: $black;
$button-border-radius: $border-radius-3;
$button-border: $border-width-3 solid transparent;
$button-hover-background: $yellow-5;
$button-focus-outline: 0px;
$cancel-button-style: ".cd28-button-secondary";

// Notifications
$notification-icon-size: 20px;
$notification-style: border-bar;
$notification_error_color: $alert-2;
$notification_info_color: $information-2;
$notification_success_color: $success-2;
$notification_warning_color: $warning-2;

// cells
$cell-background: white !default;
$cell-border: none;

$cell-entry-color: $black;
$cell-entry-font-weight: 500;
$cell-entry-border-color: $gray-5;
$cell-entry-border: 0; //we handle bottom border in %cell-links-list
$cell-entry-hover-background: $yellow-4;

// wcs
$wcs-steps-background: transparent !default;
$wcs-steps-spacing: 0.35rem !default; // half of default 0.7rem used in publik

// Step
$wcs-step-color: $gray-9; // color for default marker & label
$wcs-step-current-color: $gray-9;
$wcs-step-background: transparent !default;
$wcs-step-current-background: $yellow-1;
$wcs-step-border-bottom: $gray-5;
$wcs-step-current-border-bottom: none;
$buttons-order: previous, cancel (grow), submit;
