// define your color variables here

$primary-700: #271fe0;
$primary-600: #4945ff;
$primary-500: #7b79ff;
$primary-200: #d9d8ff;
$primary-100: #f0f0f0;

$success-700: #2f6846;
$success-600: #328048;
$success-500: #5cb176;
$success-200: #c6f0c2;
$success-100: #eafbe7;

$danger-700: #b72b1a;
$danger-600: #d02b20; //error border & text
$danger-500: #ee5e52;
$danger-200: #f5c0b8;
$danger-100: #fcecea;

$warning-700: #be5d01;
$warning-600: #d9822f;
$warning-500: #f29d41;
$warning-200: #fae7b9;
$warning-100: #fdf4dc;

$alternative-700: #271fe0;
$alternative-600: #4945ff;
$alternative-500: #7b79ff;
$alternative-200: #d9d8ff;
$alternative-100: #f0f0f0;

$neutral-900: #212134;
$neutral-800: #32324d;
$neutral-700: #4a4a6a;
$neutral-600: #666687;
$neutral-500: #8e8ea9;
$neutral-400: #a5a5ba; //light colo
$neutral-300: #c0c0cf;
$neutral-200: #dcdce4; // BOX SHADOW {primarily}
$neutral-150: #eaeaef; // border color
$neutral-100: #f6f6f6;
$neutral-0: #fff;

$backdrop: rgba(0, 0, 0, 0.4);