// Fonts
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
$font-family-base: 'Roboto', sans-serif, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;

// Colors

$white: #fff !default;
$black: #000 !default;
$red: #e32437 !default;
$blue: #5282DB !default;
$lightblue: #aae1ff !default;
$darkgrey: #37414B !default;
$light-icons-primary: #768A9F;
$light-icons-secondary: #97A6B6 !default;
$light-txt-secondary: #768A9F;

$primary: #4D4E4E !default;
$secondary: #768184 !default;
$accent: #6879EB !default;
$accent-hover: #606FD1 !default;
$accent-active: #4958BC !default;
$error: #E85B46 !default;

$background-primary: #F8FAFB !default;
$background-secondary: #FFFFFF !default;
$background-light-hover: #F9FBFC !default;
$background-light-active: #F3F7FA !default;
$hover: #EFF3F6 !default;
$active: #5D6D7E !default;
$active-transition: #d9dde0 !default;
$active-secondary: #E9EEF2 !default;
$border: #DFE7ED !default;
$border-primary-stateless: #CCD6DE;
$link-active: #92A6BC !default;

$gray-50: #fafafa !default;
$gray-100: #f4f4f4 !default;
$gray-100--highlighted: #f1f3f6 !default;
$gray-200: #eaeaea !default;
$gray-400: #bbb !default;
$gray-500: #939393 !default;
$gray-600: #757575 !default;
$gray-800: #333 !default;
$gray-900: #1f1f1f !default;

$highlight: #eceef2;
$highlight--dark: #02baf2;

$shadow-color: rgba(0, 0, 0, 0.25);

// Z-index

$zIndex-0: 100 !default;
$zIndex-1: 1001 !default;
$zIndex-2: 1002 !default;
$zIndex-3: 1003 !default;
$zIndex-5: 1005 !default;
$zIndex-highest-1: 1199 !default;
$zIndex-highest: 1200 !default;

// Media Queries
$screen-medium: 'only screen and (min-width: 820px)' !default;
$screen-xxl: 'only screen and (min-width: 1601px)' !default;