$aside-width: 51px;
$aside-submenu-width: 266px;
$header-height: 50px;

$blue-dark: #4e6dee;
$blue-mid: #b9ceff;
$blue-light: #f2f6ff;

$nblue-dark: #3aa1ff;
$nblue-mid: #a1dbff;
$nblue-light: #eaf8ff;

$red-dark: #f6434c;
$red-mid: #ffb1ac;
$red-light: #fff3f2;

$orange-dark: #fb6d3e;
$orange-mid: #ffc5a6;
$orange-light: #fff4eb;

$yellow-dark: #fbb937;
$yellow-mid: #ffe58f;
$yellow-light: #fffcea;

$green-dark: #6ccd3c;
$green-mid: #c2eea0;
$green-light: #f7fff0;

$cyan-dark: #36cbcb;
$cyan-mid: #99ebe3;
$cyan-light: #eafffc;

$pink-dark: #ee4ea6;
$pink-mid: #ffb9d9;
$pink-light: #fff2f7;

$magenta-dark: #874dd8;
$magenta-mid: #dab9f8;
$magenta-light: #faf2ff;

$primary-50: #e9f0ff;
$primary-100: #c8dbff;
$primary-200: #b4ceff;
$primary-300: #598ded;
$primary-400: #2e67d0;
$primary-500: #1e55bb;
$primary-600: #013ba6;
$primary-700: #063a9c;
$primary-800: #023189;
$primary-900: #001e52;

$secondary-50: #fff5d0;
$secondary-100: #ffebc2;
$secondary-200: #ffe5b0;
$secondary-300: #ffd988;
$secondary-400: #ffcd64;
$secondary-500: #ffbe36;
$secondary-600: #ffb312;
$secondary-700: #faa21e;
$secondary-800: #fa961e;
$secondary-900: #ff8c1d;

$neutral-0: #ffffff;
$neutral-50: #f7f7f7;
$neutral-100: #e9ecf6;
$neutral-200: #dee1ec;
$neutral-300: #adb6c5;
$neutral-400: #6d7686;
$neutral-500: #4f596a;
$neutral-600: #303f4e;
$neutral-700: #253543;
$neutral-800: #17212a;
$neutral-900: #101921;

$primary: #013ba6;
$secondary: #ffb312;
$background: #252a43;
$surface: #ffffff;
$overlay: #adb6c5;
$error: $red-dark;
$error-light: $red-light;
$error-middle: $red-mid;
$warning: #ffcd64;
$success: $green-dark;
$success-light: $green-light;
$success-middle: $green-mid;
$light-green: #ebf9eb;
$negative: $red-dark;
$negative-light: $red-light;
$negative-middle: $red-mid;
$positive: $green-dark;
$positive-light: $green-light;
$positive-middle: $green-mid;

$header: #0f132a;

$on-primary: #ffffff;
$on-secondary: #00403a;
$on-background: #ffffff;
$on-surface: #ffffff;

$shadow-color: rgba(0, 0, 0, 0.15);
$shadow: 0 5px 15px $shadow-color;

$green: #00b892;
$red: #ed0063;
$yellow: #ffa800;
$blue: #3699ff;

$black: #000000;
$grayDark: #1a1a1a;
$grayMed: #5b5b5b;
$grayLight: #9c9c9c;
$backgroundDark: #e9ecef;
$backgroundLight: #f3f6f9;
$white: #ffffff;
$navyGrayDark: #7e8299;
$navyGrayMed: #b5b5c3;
$navyGrayLight: #ebedf3;
$dark: #000;

$vDistanceBase: 4px;
$vDistance1x: $vDistanceBase;
$vDistance2x: $vDistanceBase * 2;
$vDistance3x: $vDistanceBase * 3;
$vDistance4x: $vDistanceBase * 4;
$vDistance5x: $vDistanceBase * 5;
$vDistance6x: $vDistanceBase * 6;
$vDistance7x: $vDistanceBase * 7;
$vDistance8x: $vDistanceBase * 8;
$vDistance9x: $vDistanceBase * 9;

$vSideDistance: $vDistance4x;

$vRadiusBase: 2px;
$vRadius1x: $vRadiusBase;
$vRadius2x: $vRadiusBase * 2;
$vRadius3x: $vRadiusBase * 3;

$vFontsize1x: 12px;
$vFontsize2x: 14px;
$vFontsize3x: 16px;
$vFontsize4x: 20px;
$vFontsize5x: 24px;
$vFontsize6x: 30px;
$vFontsize7x: 38px;
$vFontsize8x: 46px;
$vFontsize9x: 56px;

$vBackgrundColor: $neutral-0;
$vSurface: $neutral-50;
$vShadowColor: $shadow-color;
$vBorderColor: $neutral-300;
$vBorderColor--light: $neutral-200;
$vBorderColor--dark: $neutral-400;
$vError: $red-dark;

$vFormElementSize--small: 24px;
$vFormElementSize--normal: 32px;
$vFormElementSize--large: 40px;
$vFormElementBorderRadius--small: $vRadius1x;
$vFormElementBorderRadius--normal: $vRadius1x;
$vFormElementBorderRadius--large: $vRadius2x;
$vFormElementFontSize--small: 12px;
$vFormElementFontSize--normal: 13px;
$vFormElementFontSize--large: 14px;
$vFormElementBackgroundColor: $neutral-0;
$vFormElementBackgroundColor--focus: $neutral-0;
$vFormElementBackgroundColor--readOnly: $neutral-100;
$vFormElementBackgroundColor--disabled: $neutral-100;
$vFormElementBorderColor: $neutral-200;
$vFormElementBorderColor--focus: $primary-500;
$vFormElementBorderColor--readOnly: $neutral-100;
$vFormElementBorderColor--disabled: $neutral-200;
$vFormElementShadow: 0 0 0 transparent;
$vFormElementShadow--focus: 0 0 4px opacify($primary-500, 0.5);
$vFormElementShadow--readOnly: 0 0 0 transparent;
$vFormElementShadow--disabled: 0 0 0 transparent;
$vShadow: $shadow;