// screens
$screen-xxs-max: 400px;
$screen-xs-max: 576px;
$screen-sm-max: 768px;
$screen-md-max: 992px;
$screen-lg-max: 1200px;
$screen-xl-up: 1400px;

// z-index
$z-index-modalBackdrop: 999;
$z-index-header: 1000;
$z-index-sidebar: 1001;
$z-index-modalPopup: 1002;

// colors
$white: #fff;
$black: #000;

$neutral-100: #fafafb;
$neutral-150: #f8f9fa;
$neutral-200: #f3f4f6;
$neutral-300: #dee1e6;
$neutral-400: #bcc1ca;
$neutral-500: #9095a0;
$neutral-550: #6e7787;
$neutral-600: #565e6c;
$neutral-650: #424955;
$neutral-700: #323842;
$neutral-800: #1d2128;
$neutral-900: #171a1f;

$primary-100: #ebfdff;
$primary-150: #c8f9ff;
$primary-200: #a6f5ff;
$primary-250: #83f1ff;
$primary-300: #61edff;
$primary-350: #3ee9ff;
$primary-400: #1ce5ff;
$primary-450: #00dcf9;
$primary-500: #00bdd6;
$primary-550: #00a9c0;
$primary-600: #0095a9;
$primary-650: #008192;
$primary-700: #006d7c;
$primary-750: #005965;
$primary-800: #00454f;
$primary-850: #003138;
$primary-900: #001d21;

$secondary-100: #f5f2fd;
$secondary-150: #e7def9;
$secondary-200: #d9cbf6;
$secondary-250: #cbb7f3;
$secondary-300: #bda3ef;
$secondary-350: #af90ec;
$secondary-400: #a07ce9;
$secondary-450: #9269e5;
$secondary-500: #8353e2;
$secondary-550: #723cde;
$secondary-600: #6025d8;
$secondary-650: #5520bf;
$secondary-700: #4a1ca6;
$secondary-750: #3f188d;
$secondary-800: #341473;
$secondary-850: #280f5a;
$secondary-900: #1d0b41;

$info-100: #f0f8fe;
$info-150: #d4ebfd;
$info-200: #b8defc;
$info-250: #9cd2fa;
$info-300: #80c5f9;
$info-350: #64b8f8;
$info-400: #48abf6;
$info-450: #2c9ef5;
$info-500: #1091f4;
$info-550: #0b83df;
$info-600: #0974c6;
$info-650: #0865ad;
$info-700: #075794;
$info-750: #06487a;
$info-800: #053961;
$info-850: #032a48;
$info-900: #021b2f;

$warning-100: #fef8f1;
$warning-150: #fcecd9;
$warning-200: #fae0c2;
$warning-250: #f8d4aa;
$warning-300: #f6c892;
$warning-350: #f4bc7b;
$warning-400: #f2b063;
$warning-450: #f0a44c;
$warning-500: #ef9834;
$warning-550: #ec8917;
$warning-600: #d37911;
$warning-650: #b7680f;
$warning-700: #9a580c;
$warning-750: #7d470a;
$warning-800: #603708;
$warning-850: #432605;
$warning-900: #271603;

$danger-100: #fef0f1;
$danger-150: #fdd7d8;
$danger-200: #fbbdbf;
$danger-250: #faa3a6;
$danger-300: #f8898d;
$danger-350: #f76f73;
$danger-400: #f5555a;
$danger-450: #f43b41;
$danger-500: #f22128;
$danger-550: #eb0e15;
$danger-600: #d20c13;
$danger-650: #b90b11;
$danger-700: #9f090e;
$danger-750: #86080c;
$danger-800: #6d060a;
$danger-850: #540508;
$danger-900: #3b0305;

$success-100: #eefdf3;
$success-150: #d3f9e0;
$success-200: #b8f5cd;
$success-250: #9df2b9;
$success-300: #82eea6;
$success-350: #67ea93;
$success-400: #4ce77f;
$success-450: #31e36c;
$success-500: #1dd75b;
$success-550: #1ac052;
$success-600: #17a948;
$success-650: #14923e;
$success-700: #117b34;
$success-750: #0e642a;
$success-800: #0a4d20;
$success-850: #073517;
$success-900: #041e0d;

$color3-100: #f1f4fd;
$color3-150: #dbe3fa;
$color3-200: #c5d1f7;
$color3-250: #aec0f4;
$color3-300: #98aef1;
$color3-350: #819cee;
$color3-400: #6b8beb;
$color3-450: #5479e8;
$color3-500: #4069e5;
$color3-550: #2655e1;
$color3-600: #1c49d0;
$color3-650: #1941b8;
$color3-700: #1638a0;
$color3-750: #133088;
$color3-800: #0f2770;
$color3-850: #0c1f58;
$color3-900: #091640;

$color4-100: #fef6f1;
$color4-150: #fce7d8;
$color4-200: #f9d8c0;
$color4-250: #f7c8a7;
$color4-300: #f5b98e;
$color4-350: #f3aa76;
$color4-400: #f19b5d;
$color4-450: #ef8b44;
$color4-500: #ed7d2d;
$color4-550: #e76c14;
$color4-600: #cc5f12;
$color4-650: #b1530f;
$color4-700: #96460d;
$color4-750: #7b390b;
$color4-800: #602d08;
$color4-850: #452006;
$color4-900: #2a1304;

$color5-100: #fdf2f2;
$color5-150: #f9dfdf;
$color5-200: #f5cbcb;
$color5-250: #f2b8b8;
$color5-300: #eea4a4;
$color5-350: #eb9191;
$color5-400: #e77e7e;
$color5-450: #e46a6a;
$color5-500: #e05858;
$color5-550: #db3d3d;
$color5-600: #d32727;
$color5-650: #b82222;
$color5-700: #9e1d1d;
$color5-750: #841818;
$color5-800: #6a1313;
$color5-850: #500f0f;
$color5-900: #350a0a;

// shadow
$shadow-xs: 0px 0px 1px rgba(23, 26, 31, 0.07),
  0px 0px 2px rgba(23, 26, 31, 0.12);
$shadow-s: 0px 2px 5px rgba(23, 26, 31, 0.09),
  0px 0px 2px rgba(23, 26, 31, 0.12);
$shadow-m: 0px 4px 9px rgba(23, 26, 31, 0.11),
  0px 0px 2px rgba(23, 26, 31, 0.12);
$shadow-l: 0px 8px 17px rgba(23, 26, 31, 0.15),
  0px 0px 2px rgba(23, 26, 31, 0.12);
$shadow-xl: 0px 17px 35px rgba(23, 26, 31, 0.24),
  0px 0px 2px rgba(23, 26, 31, 0.12);

// borderRadius
$radius-xs: 0.125rem;
$radius-s: 0.1875rem;
$radius-m: 0.25rem;
$radius-l: 0.375rem;
$radius-xl: 0.5rem;
$radius-100: 100%;