/* colors*/
$color-primary: #F05023; /* Primary color*/
$color-secondary: #231F20; /* Secondary color*/
$color-success: #21C68B; /* Accent color*/
$color-secondary-light: #403C3D; /* Secondary color light*/
$color-secondary-lighter: #74706F; /* Secondary Lighter color*/
$color-bonus: #C72AAE; /* Bonus color*/
$color-background-grey: #F4F6F8; /* Background Regular color*/
$color-background-grey-light: #F9FAFB; /* Background Light color*/
$color-background-grey-dark: #E1ECEF; /* Background Dark color*/
$color-highlight: #FFF8E6; /* Highlight color*/
$color-rating: #F2C94C; /* Rating color*/
$color-primary-light: #FF6433; /* Primary color light*/
$color-icon-light: #BEDCE3; /* Icon color light*/
$color-icon-dark: #91B1B8; /* Icon color dark*/
$color-disabled: #C6C6C6; /* Disabled color*/
$color-disabled-text: #B0B0B0; /* Disabled Text*/
$color-disabled-light: #E3E3E3; /* Disabled Light*/
$color-text: #212121; /* Text color*/
$color-text-grey: #727272; /* Secondary text color*/
$color-caption-text: #9B9B9B; /* Caption text color*/
$color-link: #0986E2; /* Links color*/
$color-error: #FF1817; /* Error color*/
$color-danger: #FF6F6F; /* Notification color*/
$color-white: #FFFFFF; /* White color*/
$color-white-hover: #FDFDFE;
$color-dark-grey: #494D59;
$color-black: #000000; /**/
$color-info: #E6F9FF; /* Note blue*/
$color-note-success: #E4F8F1; /* Note green*/
$color-note-error: #FFE8E8; /* Note error*/

$color-primary-hover: #f3734f;
$color-primary-active: #d8481f;

$color-success-hover: #4dd1a2;
$color-success-active: #1eb27d;

$color-bonus-hover: #d255bd;
$color-bonus-active: #b3269d;

$color-link-hover: #3A9EE8;
$color-link-active: #0879CB;

$color-error-hover: #ff4645;
$color-error-active: #E51715;

$color-grey-hover: #F6F8F9;
$color-grey-active: #DCDDDF;

$color-icon-dark-hover: #a7c1c6;
$color-icon-dark-active: #829fa6;

$color-cool-gray: #001D26;
$color-cool-gray-04: rgba($color-cool-gray, 0.04);

$color-graph-1: #EB5365;
$color-graph-2: #9474C9;
$color-graph-3: #41B2E5;
$color-graph-4: #3CCFCF;
$color-graph-5: #B7CE2C;
$color-graph-6: #F4D221;
$color-graph-7: #F0A042;
$color-graph-8: #F87550;
$color-graph-9: #847474;
$color-graph-10: #7A96A5;

/* deprecated*/
$color-dark: $color-text; /* deprecated, use $color-text */
$color-background-dark: $color-secondary; /* deprecated, use $color-secondary */
$color-secondary-2: $color-icon-dark; /* deprecated, use $color-icon-dark */
$color-text-subscription: $color-caption-text; /* deprecated, use $color-caption-text */
$color-background-50: $color-background-grey-light; /* deprecated, use $color-background-grey-light */
$color-grey: $color-background-grey; /* deprecated, use $color-background-grey */

/* shadows*/
/* ------------------------------------------------------------*/
$shadow-1dp: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.14);
$shadow-2dp: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
$shadow-4dp: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
$shadow-8dp: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12);
$shadow-16dp: 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14);
$shadow-soft: 0px 16px 48px rgba(0, 0, 0, 0.02), 0px 12px 32px rgba(0, 0, 0, 0.04), 0px 8px 24px rgba(0, 0, 0, 0.08);
$shadow-soft-small: 0px 16px 24px rgba(0, 0, 0, 0.02), 0px 6px 16px rgba(0, 0, 0, 0.04), 0px 4px 12px rgba(0, 0, 0, 0.08);

/* fonts*/
/* ------------------------------------------------------------*/
$font-fallback: "Helvetica Neue", Arial, sans-serif;
$font: "Noto Sans", "Open Sans", $font-fallback;
$font-secondary: "Ubuntu", $font-fallback;

$font-size: 14px;
$line-height: 22px;

/* media variables*/
/* ------------------------------------------------------------*/
$media-mobile: 500px;
$media-tablet: 768px;
$media-desktop-s: 992px;
$media-desktop-m: 1200px;
$media-desktop-l: 1680px;
$media-desktop-xl: 2500px;

/* layout sizes*/
/* ------------------------------------------------------------*/
$header-height: 80px;
$smartappbanner-height: 80px;

/* offsets*/
/* ------------------------------------------------------------*/
$distance-large: 40px;
$distance-medium: 30px;
$distance-small: 20px;
$distance-micro: 10px;

/* grid settings*/
/* ------------------------------------------------------------*/
$grid-container-max-width-mobile: 100%;
$grid-container-max-width-tablet: 750px;
$grid-container-max-width-desktop-s: 970px;
$grid-container-max-width-desktop-m: 1170px;
$grid-container-max-width-desktop-l: 1220px;
$grid-container-max-width-desktop-xl: 1600px;

$grid-container-hor-gap-mobile: 15px;
$grid-container-hor-gap-tablet: 15px;
$grid-container-hor-gap-desktop-s: 15px;
$grid-container-hor-gap-desktop-m: 15px;
$grid-container-hor-gap-desktop-l: 40px;
$grid-container-hor-gap-desktop-xl: 40px;

/* applications*/
/* ------------------------------------------------------------*/
$app-card-width: 190px;
$app-card-height: 358px;
$app-card-hor-gap: 30px;
$app-card-ver-gap: 20px;
$app-card-border-radius: 6px;

$app-card-bundle-width: 300px;

$app-card-portrait-width: 290px;
$app-card-portrait-height: 140px;
