body[theme='light'], body[theme='slack']{
    --color-error:#d50000;
    --color-on-error:#FFFFFF;
    --color-warning:#FFAB00;
    --color-on-warning:#FFFFFF;
    --color-hover:#dddddd;
    --color-hover-red: #fd7676;

    --color-background:#cfcfcf;
    --color-on-background:rgb(51,51,51);
    --color-background-error: rgba(224, 202, 202, 0.32);
    --color-surface:#e8e8e8;
    --color-surface-light:rgb(220, 218, 218);
    --color-surface-dark:#c9c9c9;
    --color-on-surface:#777777;
    --color-on-surface-light:rgba(0, 0, 0, 0.20); 
    --color-on-surface-dark:#313131;
    --color-font-on-warning:#313131;

    --color-icon:#656565;
    --color-divider: #d1d1d1;
    --color-tooltip: #6d6d6d;
    --color-on-tooltip: #ffffff;

    --color-disabled: #AFAFAF;

    --color-scroll-back:#bbbbbb;
    --color-scroll-thumb:#888;
    --color-scroll-thumb-hover:#555;

    --color-textarea-variable: rgb(220, 220, 170);
    --color-textarea-db-variable: rgb(103, 205, 254);
    --color-textarea-function: rgb(160, 161, 226);

    --color-green:#298337;
    --color-on-green:#c9c9c9;
    --color-green-dark:#247430;
    --color-blue:#0d47a1;
    --color-blue-dark:#0f1667;
    --color-black:rgb(44, 44, 44);
    --color-red:#d50000;
    --color-on-red: #c9c9c9;
    --color-red-button: #da3636;
    --color-red-dark:#af2525;
    --color-yellow:#FFAB00;
    --color-yellow-fire:#ffea00;
    --color-yellow-stronger: #de9500;
    --color-on-yellow: rgb(44, 44, 44);
    --color-pink: #f8bbd0;
    --color-pink-strong: #f06292;
    --color-border:#bbbbbb; 
    --color-orange: #db6001;
    --color-gray: #344E5C;

    --color-chat-link: var(--color-blue)
}

body[theme='light']{
    --color-primary:#298337;
    --color-on-primary:#FFFFFF;
    --color-primary-dark:#00550b;
    --color-on-primary-dark:#FFFFFF;
    --color-primary-light:#5db363;
    --color-on-primary-light: rgb(51,51,51);
    --color-on-primary-lighter: rgb(147,221,159);
    --color-on-tooltip-highlight: #48d45d;
}

body[theme='slack']{
    --color-primary: #341f32;
    --color-on-primary: #FFFFFF;
    --color-primary-dark: #261c25;
    --color-on-primary-dark: #FFFFFF;
    --color-primary-light: #4b3949;
    --color-on-primary-light: #FFFFFF;
    --color-on-primary-lighter: #6f566c;
    --color-on-tooltip-highlight: #e9afe2;
}

body[theme='dark']{
    --color-error:#ff4a4a;
    --color-on-error:#FFFFFF;
    --color-warning:#f3ab11;
    --color-on-warning:#FFFFFF;
    --color-hover:#5e5d5d;
    --color-hover-red: #fd7676;

    --color-background:rgb(44, 44, 44);
    --color-on-background:#dddddd;
    --color-background-error: rgb(74, 66, 66);
    --color-surface:#3d3d3d;
    --color-surface-light:#4e4e4e;
    --color-surface-dark:#333333;
    --color-on-surface:#adadad;
    --color-on-surface-light:#c5c5c5;
    --color-on-surface-dark:#dddddd;
    --color-font-on-warning:#313131;

    --color-icon:#dddddd;
    --color-divider:rgba(214, 214, 214, 0.20);
    --color-tooltip:#ffffff;
    --color-on-tooltip:#6d6d6d;

    --color-disabled: #848484;

    --color-scroll-back:#464646;
    --color-scroll-thumb:#6d6d6d;
    --color-scroll-thumb-hover:#888;

    --color-textarea-variable: #807f1f;
    --color-textarea-db-variable: #1e688c;
    --color-textarea-function: #660c9e;

    --color-green:#48d45d;
    --color-green-dark:#3bb94e;
    --color-on-green :#FFFFFF;
    --color-blue:#039BE5;
    --color-blue-dark:#0f1667;
    --color-black:rgb(44, 44, 44);
    --color-red:#ff4a4a;
    --color-on-red: #ffffff;
    --color-red-button: #da3636;
    --color-red-dark:#af2525;
    --color-yellow:#f3ab11;
    --color-yellow-fire:#ffea00; 
    --color-yellow-stronger: #f3ab11;
    --color-on-yellow: rgb(44, 44, 44);
    --color-pink: #f06292; 
    --color-pink-strong: #f06292;
    --color-border:#3d3d3d;
    --color-orange: #db6001;

    --color-chat-link: #DFF02B
}

body[theme='dark']{
    --color-primary:#d68112;
    --color-on-primary:#FFFFFF;
    --color-primary-dark:#b86d0c;
    --color-on-primary-dark:#FFFFFF;
    --color-primary-light:#f09620;
    --color-on-primary-light:rgb(51,51,51);
    --color-on-primary-lighter: rgb(246,201,143);
    --color-on-tooltip-highlight: #d68112;
}

body[theme='night-blue']{
    --color-primary:#2093fc;
    --color-on-primary:#FFFFFF;
    --color-primary-dark:#1574ce;
    --color-on-primary-dark:#FFFFFF;
    --color-primary-light:#46a5ff;
    --color-on-primary-light:rgb(51,51,51);
    --color-on-primary-lighter: #5faef8;
    --color-on-tooltip-highlight: #2093fc;
}

body[theme='night-blue']{
    --color-error:#fa3e32;
    --color-on-error:#FFFFFF;
    --color-warning:#ffcc00;
    --color-on-warning:#FFFFFF;
    --color-hover:#2f465e;
    --color-hover-red: #fd7676;

    --color-background:#18222c;
    --color-on-background:#dddddd;
    --color-background-error: rgb(74, 66, 66);
    --color-surface:#203040;
    --color-surface-light:#26394d;
    --color-surface-dark:#17222e;
    --color-on-surface:#adadad;
    --color-on-surface-light:#c5c5c5;
    --color-on-surface-dark:#dddddd;
    --color-font-on-warning:#313131;

    --color-icon:#dddddd;
    --color-divider:rgba(214, 214, 214, 0.20);
    --color-tooltip:#ffffff;
    --color-on-tooltip:#6d6d6d;

    --color-disabled: #848484;

    --color-scroll-back:#233950;
    --color-scroll-thumb:#2566a3;
    --color-scroll-thumb-hover:#2a73b8;

    --color-textarea-variable: #807f1f;
    --color-textarea-db-variable: #1e688c;
    --color-textarea-function: #660c9e;

    --color-green:#4fd661;
    --color-green-dark:#45bd55;
    --color-on-green: #ffffff;
    --color-blue:#35abdd;
    --color-blue-dark:#1f2892;
    --color-black:rgb(44, 44, 44);
    --color-red:#fa3e32;
    --color-on-red: #ffffff;
    --color-red-button: #da3636;
    --color-red-dark:#af2525;
    --color-yellow:#ffcc00;
    --color-yellow-fire:#ffea00; 
    --color-yellow-stronger: #ffcc00;
    --color-on-yellow: rgb(44, 44, 44);
    --color-pink: #d174e7; 
    --color-pink-strong: #c740e6;
    --color-border:#3d3d3d;
    --color-orange: #fe9601;

    --color-chat-link: #DFF02B
}

body[theme='cyberpunk-umbra']{
    --color-primary:#00fe9c;
    --color-on-primary:#1e1d45;
    --color-primary-dark:#056e4d;
    --color-on-primary-dark:#FFFFFF;
    --color-primary-light:#79fcca;
    --color-on-primary-light:rgb(51,51,51);
    --color-on-primary-lighter: #79fcca;
    --color-on-tooltip-highlight: #056e4d;
}

body[theme='cyberpunk-umbra']{
    --color-error:#a22929;
    --color-on-error:#FFFFFF;
    --color-warning:#ffcc00;
    --color-on-warning:#FFFFFF;
    --color-hover:#29297f;
    --color-hover-red: #fd7676;

    --color-background:#080713;
    --color-on-background:#dddddd;
    --color-background-error: rgb(74, 66, 66);
    --color-surface:#1e1d45;
    --color-surface-light:#131341;
    --color-surface-dark:#100d23;
    --color-on-surface:#adadad;
    --color-on-surface-light:#c5c5c5;
    --color-on-surface-dark:#dddddd;
    --color-font-on-warning:#313131;

    --color-icon:#dddddd;
    --color-divider:rgba(214, 214, 214, 0.20);
    --color-tooltip:#ffffff;
    --color-on-tooltip:#6d6d6d;

    --color-disabled: #848484;

    --color-scroll-back:#233950;
    --color-scroll-thumb:#168158;
    --color-scroll-thumb-hover:#14d48b;

    --color-textarea-variable: #807f1f;
    --color-textarea-db-variable: #1e688c;
    --color-textarea-function: #660c9e;

    --color-green:#4fd661;
    --color-green-dark:#3fb44f;
    --color-on-green: rgb(44, 44, 44);
    --color-blue:#00c3ff;
    --color-blue-dark:#1f2892;
    --color-black:rgb(44, 44, 44);
    --color-red:#ff0000;
    --color-on-red: rgb(44, 44, 44);
    --color-red-button: #ff0000;
    --color-red-dark:#ff0000;
    --color-yellow:#ffcc00;
    --color-yellow-fire:#ffea00; 
    --color-yellow-stronger: #ffcc00;
    --color-on-yellow: rgb(44, 44, 44);
    --color-pink: #b841fd; 
    --color-pink-strong: #b700ff;
    --color-border:#3d3d3d;
    --color-orange: #fe9601;

    --color-chat-link: var(--color-blue)
}

:root{

    /*LIGHT THEME*/
    --light-theme-primary: #298337;
    --light-theme-background: #cfcfcf;

    /*DARK THEME*/
    --dark-theme-primary: #d68112;
    --dark-theme-background: rgb(44, 44, 44);

    /*SLACK THEME*/
    --slack-theme-primary: #4b3949;
    --slack-theme-background: #cfcfcf;

    /*NIGHT BLUE THEME*/
    --night-blue-theme-primary: #2093fc;
    --night-blue-theme-background: #18222c;

    /*CYBERPUNK UMBRA THEME*/
    --cyberpunk-umbra-theme-primary: #00fe9c;
    --cyberpunk-umbra-theme-background: #080713;

    /*ANIMATION============================================================ANIMATION*/
    --animation-time-short: .1s;
    --animation-time: .2s;
    --animation-time-long: .5s;
}