:root {
    /* Base Colors */
    --base-white: #fafafa;
    --base-black: #0a0a0b;

    /* Primary Colors */
    --primary: #42aaff;
    --primary100: #d9eeff;
    --primary200: #b3ddff;
    --primary300: #8eccff;
    --primary400: #68bbff;
    --primary500: #1d99ff;
    --primary600: #0088f7;
    --primary700: #0074d2;
    --primary800: #005fad;
    --primary900: #004b88;
    --primary1000: #003763;

    /* Secondary Colors */
    --secondary: #ffd133;
    --secondary100: #fff7dd;
    --secondary200: #fff0bb;
    --secondary300: #ffe899;
    --secondary400: #ffe077;
    --secondary500: #ffd955;
    --secondary600: #ffc80b;
    --secondary700: #e2af00;
    --secondary800: #ba9000;
    --secondary900: #927100;
    --secondary1000: #6a5200;

    /* Neutrals */
    --neutrals-base-white: #fafafa;
    --neutrals100: #e3e3e3;
    --neutrals200: #cccbcb;
    --neutrals300: #b5b3b3;
    --neutrals400: #9f9c9c;
    --neutrals500: #898384;
    --neutrals600: #726c6c;
    --neutrals700: #5a5555;
    --neutrals800: #433e3f;
    --neutrals900: #2b2829;
    --neutrals1000: #151314;
    --neutrals-base-black: #0a0a0b;

    /* Success Colors */
    --success: #7ce203;
    --success100: #d4fea3;
    --success200: #a9fd46;
    --success300: #579f02;

    /* Warning Colors */
    --warning: #fb7031;
    --warning100: #fecfba;
    --warning200: #fca076;
    --warning300: #cd4304;

    /* Error Colors */
    --error: #f50d0c;
    --error100: #fcaeae;
    --error200: #f85e5d;
    --error300: #ad0807;
}

.bg-linear-gradient-primary {
    background: linear-gradient(263deg, #0169BF 12.63%, #63B8FF 80.63%);
    color: #fff;
    /* border: none; */
    /* padding: 10px 20px; */
    /* text-align: center;
    text-decoration: none;
    display: inline-block; */
}

.bg-linear-gradient-danger {
    background: linear-gradient(263deg, #da260e 12.63%, #FF6363 80.63%);
    color: #fff;
    /* border: none; */
    /* padding: 10px 20px; */
    /* text-align: center;
    text-decoration: none;
    display: inline-block; */
}

/* Base Colors */
.gk-bg-base-white {
    background-color: var(--base-white);
}

.gk-bg-base-black {
    background-color: var(--base-black);
}

.gk-text-base-white {
    color: var(--base-white);
}

.gk-text-base-black {
    color: var(--base-black);
}

/* Primary Colors */
.gk-bg-primary {
    background-color: var(--primary);
}

.gk-bg-primary100 {
    background-color: var(--primary100);
}

.gk-bg-primary200 {
    background-color: var(--primary200);
}

.gk-bg-primary300 {
    background-color: var(--primary300);
}

.gk-bg-primary400 {
    background-color: var(--primary400);
}

.gk-bg-primary500 {
    background-color: var(--primary500);
}

.gk-bg-primary600 {
    background-color: var(--primary600);
}

.gk-bg-primary700 {
    background-color: var(--primary700);
}

.gk-bg-primary800 {
    background-color: var(--primary800);
}

.gk-bg-primary900 {
    background-color: var(--primary900);
}

.gk-bg-primary1000 {
    background-color: var(--primary1000);
}

.gk-text-primary {
    color: var(--primary);
}

.gk-text-primary100 {
    color: var(--primary100);
}

.gk-text-primary200 {
    color: var(--primary200);
}

.gk-text-primary300 {
    color: var(--primary300);
}

.gk-text-primary400 {
    color: var(--primary400);
}

.gk-text-primary500 {
    color: var(--primary500);
}

.gk-text-primary600 {
    color: var(--primary600);
}

.gk-text-primary700 {
    color: var(--primary700);
}

.gk-text-primary800 {
    color: var(--primary800);
}

.gk-text-primary900 {
    color: var(--primary900);
}

.gk-text-primary1000 {
    color: var(--primary1000);
}

/* Secondary Colors */
.gk-bg-secondary {
    background-color: var(--secondary);
}

.gk-bg-secondary100 {
    background-color: var(--secondary100);
}

.gk-bg-secondary200 {
    background-color: var(--secondary200);
}

.gk-bg-secondary300 {
    background-color: var(--secondary300);
}

.gk-bg-secondary400 {
    background-color: var(--secondary400);
}

.gk-bg-secondary500 {
    background-color: var(--secondary500);
}

.gk-bg-secondary600 {
    background-color: var(--secondary600);
}

.gk-bg-secondary700 {
    background-color: var(--secondary700);
}

.gk-bg-secondary800 {
    background-color: var(--secondary800);
}

.gk-bg-secondary900 {
    background-color: var(--secondary900);
}

.gk-bg-secondary1000 {
    background-color: var(--secondary1000);
}

.gk-text-secondary {
    color: var(--secondary);
}

.gk-text-secondary100 {
    color: var(--secondary100);
}

.gk-text-secondary200 {
    color: var(--secondary200);
}

.gk-text-secondary300 {
    color: var(--secondary300);
}

.gk-text-secondary400 {
    color: var(--secondary400);
}

.gk-text-secondary500 {
    color: var(--secondary500);
}

.gk-text-secondary600 {
    color: var(--secondary600);
}

.gk-text-secondary700 {
    color: var(--secondary700);
}

.gk-text-secondary800 {
    color: var(--secondary800);
}

.gk-text-secondary900 {
    color: var(--secondary900);
}

.gk-text-secondary1000 {
    color: var(--secondary1000);
}

/* Neutrals */
.gk-bg-neutrals-base-white {
    background-color: var(--neutrals-base-white);
}

.gk-bg-neutrals100 {
    background-color: var(--neutrals100);
}

.gk-bg-neutrals200 {
    background-color: var(--neutrals200);
}

.gk-bg-neutrals300 {
    background-color: var(--neutrals300);
}

.gk-bg-neutrals400 {
    background-color: var(--neutrals400);
}

.gk-bg-neutrals500 {
    background-color: var(--neutrals500);
}

.gk-bg-neutrals600 {
    background-color: var(--neutrals600);
}

.gk-bg-neutrals700 {
    background-color: var(--neutrals700);
}

.gk-bg-neutrals800 {
    background-color: var(--neutrals800);
}

.gk-bg-neutrals900 {
    background-color: var(--neutrals900);
}

.gk-bg-neutrals1000 {
    background-color: var(--neutrals1000);
}

.gk-bg-neutrals-base-black {
    background-color: var(--neutrals-base-black);
}

.gk-text-neutrals-base-white {
    color: var(--neutrals-base-white);
}

.gk-text-neutrals100 {
    color: var(--neutrals100);
}

.gk-text-neutrals200 {
    color: var(--neutrals200);
}

.gk-text-neutrals300 {
    color: var(--neutrals300);
}

.gk-text-neutrals400 {
    color: var(--neutrals400);
}

.gk-text-neutrals500 {
    color: var(--neutrals500);
}

.gk-text-neutrals600 {
    color: var(--neutrals600);
}

.gk-text-neutrals700 {
    color: var(--neutrals700);
}

.gk-text-neutrals800 {
    color: var(--neutrals800);
}

.gk-text-neutrals900 {
    color: var(--neutrals900);
}

.gk-text-neutrals1000 {
    color: var(--neutrals1000);
}

.gk-text-neutrals-base-black {
    color: var(--neutrals-base-black);
}

/* Success Colors */
.gk-bg-success {
    background-color: var(--success);
}

.gk-bg-success100 {
    background-color: var(--success100);
}

.gk-bg-success200 {
    background-color: var(--success200);
}

.gk-bg-success300 {
    background-color: var(--success300);
}

.gk-text-success {
    color: var(--success);
}

.gk-text-success100 {
    color: var(--success100);
}

.gk-text-success200 {
    color: var(--success200);
}

.gk-text-success300 {
    color: var(--success300);
}

/* Warning Colors */
.gk-bg-warning {
    background-color: var(--warning);
}

.gk-bg-warning100 {
    background-color: var(--warning100);
}

.gk-bg-warning200 {
    background-color: var(--warning200);
}

.gk-bg-warning300 {
    background-color: var(--warning300);
}

.gk-text-warning {
    color: var(--warning);
}

.gk-text-warning100 {
    color: var(--warning100);
}

.gk-text-warning200 {
    color: var(--warning200);
}

.gk-text-warning300 {
    color: var(--warning300);
}

/* Error Colors */
.gk-bg-error {
    background-color: var(--error);
}

.gk-bg-error100 {
    background-color: var(--error100);
}

.gk-bg-error200 {
    background-color: var(--error200);
}

.gk-bg-error300 {
    background-color: var(--error300);
}

.gk-text-error {
    color: var(--error);
}

.gk-text-error100 {
    color: var(--error100);
}

.gk-text-error200 {
    color: var(--error200);
}

.gk-text-error300 {
    color: var(--error300);
}



.border-neutrals100 {
    border-width: 1px;
    border-style: solid;
    border-color: var(--neutrals100);
}

.border-neutrals200 {
    border-width: 1px;
    border-style: solid;
    border-color: var(--neutrals200);
}

.border-neutrals300 {
    border-width: 1px;
    border-style: solid;
    border-color: var(--neutrals300);
}

.border-neutrals400 {
    border-width: 1px;
    border-style: solid;
    border-color: var(--neutrals400);
}

.border-neutrals500 {
    border-width: 1px;
    border-style: solid;
    border-color: var(--neutrals500);
}