// typo suites --------------------------
$font-family: Barlow, Ubuntu Sans, Noto Sans, Calibri, Arial, sans-serif;
// gradient --------------------------
$degrade: #0069B4;
$degrade-hover: #0069B4;

// colors --------------------------
$main-color: #009ff5;
$main-color-100: #96BEE4;
$main-color-200: #619DD6;
$main-color-300: #337DC3;
$main-color-400: #255B8E;
$main-color-500: #153451;
$main-color-alpha-10: rgba($main-color-400, 0.1);
$main-color-alpha-50: rgba($main-color-400, 0.5);
$primary-color: $main-color;


$secondary-color-100: #BCE0DE;
$secondary-color-200: #7AC0BE;
$secondary-color-300: #459390;
$secondary-color-400: #367370;
$secondary-color-500: #275250;
$secondary-color-alpha-10: rgba($secondary-color-400, 0.1);
$secondary-color-alpha-50: rgba($secondary-color-400, 0.5);
$secondary-color: $secondary-color-400;

$ia-color-100: #DCCDFF;
$ia-color-200: #C2A9FD;
$ia-color-300: #A86CFC;
$ia-color-400: #7B42F6;
$ia-color-500: #4A1FAF;
$ia-color-alpha-10: rgba($ia-color-400, 0.1);
$ia-color-alpha-50: rgba($ia-color-400, 0.5);
$ia-color: $ia-color-400;

$neutral-color-100: #aaa;
$neutral-color-200: #808080;
$neutral-color-300: #555;
$neutral-color-400: #2a2a2a;
$neutral-color-500: #000;
$neutral-color-alpha-10: rgba($neutral-color-400, 0.1);
$neutral-color-alpha-50: rgba($neutral-color-400, 0.5);
$neutral-color: $neutral-color-400;


$neutral-blue: #1b1d27;
$neutral-white: #fff;
$white: #fff;


$error-color-100: #f4a7a7;
$error-color-200: #e84f4f;
$error-color-300: #e11d1d;
$error-color-400: #ae1717;
$error-color-500: #7c1010;
$error-color-alpha-10: rgba($error-color-400, 0.1);
$error-color-alpha-50: rgba($error-color-400, 0.5);
$error-color: $error-color-400;

$danger-color: $error-color-500;
$danger-color-light: $error-color-alpha-10;

$success-color-100: #bbf2cf;
$success-color-200: #76d6a0;
$success-color-300: #32d970;
$success-color-400: #20ae55;
$success-color-500: #177b3c;
$success-color-alpha-10: rgba($success-color-400, 0.1);
$success-color-alpha-50: rgba($success-color-400, 0.5);
$success-color: $success-color-400;

$warning-color-100: #f3c1a8;
$warning-color-200: #e68250;
$warning-color-300: #dd5f20;
$warning-color-400: #ac4a19;
$warning-color-500: #7a3411;
$warning-color-alpha-10: rgba($warning-color-400, 0.1);
$warning-color-alpha-50: rgba($warning-color-400, 0.5);
$warning-color: $warning-color-400;
$warning-color-text: $warning-color-500;

$info-color-100: #bed7ee;
$info-color-200: #7cafdd;
$info-color-300: #3b87cc;
$info-color-400: #2a69a2;
$info-color-500: #1e4a72;
$info-color-alpha-10: rgba($info-color-400, 0.1);
$info-color-alpha-50: rgba($info-color-400, 0.5);
$info-color: $info-color-400;

$gradient-light: #2a69a2;
$gradient-intense: #1e4a72;

// CSC project variables

$csc-light-yellow-color: #FFF3D8;
$csc-magic-color: #a86FCD;
$csc-copy-color: $ia-color-200;

$csc-bg-color: #F5F5F5;
$csc-title-color: #000;
$csc-text-color: #1B1D27;
$csc-light-text-color: #525668;

$csc-nav-color: $main-color-400;
$csc-chips-bg-color: $main-color-400;

$csc-textarea-color: #1B1D27;
$csc-textarea-placeholder-color: #7B7B7B;
$csc-file-selector-bg-color: #e3eaf1;
$csc-filters-box-color: #e3eaf1;
$csc-light-blue: #BED7EE;
$csc-light-grey: #dedede;

$bot-bubble: $csc-light-yellow-color;

// -------- other custom colors
$main-bg-color: #b7b7ff;
$main-text-color: $neutral-blue;

$main-color-active: #323270;
$main-bg-color-active: #6565ff;


$event-blue: #2D559F;
$notification-green: #315E5D;

$bg-color-button: #f4f6fc;
$bg-color-nav: #1B1D27;
$bg-color-chat: #f5f5f5;
$shadow-color: #dedede;

// sizes

$large-column-panel: 332px;
$small-column-panel: 50px;
// spacing --------------------------

$spacing-0: 2px;
$spacing-1: 4px;
$spacing-2: 8px;
$spacing-3: 12px;
$spacing-4: 16px;
$spacing-5: 20px;
$spacing-6: 24px;
$spacing-7: 32px;
$spacing-8: 40px;
$spacing-9: 48px;
$spacing-10: 56px;

$spacing-main: $spacing-1;
// radius --------------------------
$radius-1: 2px;
$radius-2: 4px;
$radius-3: 6px;
$radius-4: 8px;
$radius-5: 10px;
$radius-6: 12px;
$radius-7: 16px;
$radius-full: 999px;

$radius-main: $radius-4;
$radius-mid: $radius-6;
$radius-big: $radius-full;

// stroke --------------------------
$stroke-0: 1px;
$stroke-1: 2px;
$stroke-2: 4px;
$stroke-3: 6px;
$stroke-4: 8px;
$stroke-5: 10px;
