/*need to delete this*/
.temp{
    --confirmative-100: #05df9f; //normal
    --confirmative-200: #60b28f; //hover
    --confirmative-300: #60b28f; //active
    --destructive-100: #eb5a5a; //normal
    --destructive-200: #d45151; //hover
    --destructive-300: #d45151; //active
    --neutral-0: #ffffff;
    --neutral-100: #0f1113;
    --neutral-200: #181a1e;
    --neutral-300: #212327;
    --neutral-300-active: #212327;
    --neutral-400: #2a2c2f;
    --neutral-400-active: #2a2c2f;
    --neutral-500: #3b3c44;
    --neutral-600: #5d616c;
    --neutral-700: #767b89;
    --neutral-800: #a2a7b0;
    --neutral-900: #e5e6e8;
    --neutral-1000: #f2f2f2;
    --menu-color: #1d1f22;
    --badge-bg: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.03)
        ),
        #191a23;
    --badge-bg-color: #272830;
    --badge-color: #9199af;
    --table-row-color: #1b1d20;
}

/*Set I - Mainly used for primary buttons*/
$primary-100: var(--primary-100); //normal
$primary-200: var(--primary-200); //hover
$primary-300: var(--primary-300); //active
/*Set II - Mainly used for secondary buttons*/
$confirmative-100: var(--confirmative-100); //normal
$confirmative-200: var(--confirmative-200); //hover
$confirmative-300: var(--confirmative-300); //active
/*Set III - Mainly used for Ternary buttons*/
$destructive-100: var(--destructive-100); //normal
$destructive-200: var(--destructive-200); //hover
$destructive-300: var(--destructive-300); //active
/*Mainly used for Text,bg,badges,tooltip*/
/*Set IV -  Neutral Colors*/
/*Set IV A*/
$neutral-0: var(--neutral-0);
$neutral-100: var(--neutral-100);
$neutral-200: var(--neutral-200);
/*Set IV B*/
$neutral-300: var(--neutral-300);
$neutral-300-active: var(--neutral-300-active);
$neutral-400: var(--neutral-400);
$neutral-400-active: var(--neutral-400-active);
$neutral-500: var(--neutral-500);
/*Set IV C*/
$neutral-600: var(--neutral-600);
$neutral-700: var(--neutral-700);
$neutral-800: var(--neutral-800);
$neutral-900: var(--neutral-900);
$neutral-1000: var(--neutral-1000);
/*Neutral Colors*/
/*fixed badge color*/
$badge-bg: var(--badge-bg);
$badge-bg-color: var(--badge-bg-color);
$badge-color: var(--badge-color);
/*fixed badge color*/

.dark {
    /*Set IV A*/
    $primary-100: #ff6565;
    $neutral-0: #f70a0a;
    $neutral-100: #181a1e;
    $neutral-200: #1a1c1f;
    /*Set IV B*/
    $neutral-300: #212327;
    $neutral-400: #2a2c2f;
    $neutral-500: #3b3c44;
    /*Set IV C*/
    $neutral-600: #5d616c;
    $neutral-700: #767b89;
    $neutral-800: #a2a7b0;
    /*Neutral Colors*/
}
/*Neutral Colors*/
/*Menu Colors*/
$menu-color: var(--menu-color);
/*Menu Colors*/
/*need to delete this*/