:root {
    --ON_toggle: initial;
    --OFF_toggle: ;
}

.theme-default,
.theme-light,
body:is(.theme-default, .theme-light) .theme-root {
    --light: var(--ON_toggle);
    --dark: var(--OFF_toggle);
}

.theme-dark,
body.theme-dark .theme-root {
    --light: var(--OFF_toggle);
    --dark: var(--ON_toggle);
}

.theme-default,
.theme-root,
.theme-light,
.theme-dark {
    --basic_text_black: var(--light, #555558) var(--dark, #d1d1d7);
    --secondary: var(--light, #8D8D8D) var(--dark, #A1A1A7);
    --white_text_black: var(--light, #0b0d10) var(--dark, #fff);
    --white_text_black_reverse: var(--light, #fff) var(--dark, #0b0d10);
    --secondary-black-dark-light-bg: var(--light, #EFF0F2) var(--dark, #38383F);
    --lite_basic_text_black: var(--light, #090808) var(--dark, #d1d1d7);
    --grey_bg: var(--light, #F3F4F7) var(--dark, #313137);
    --black_bg_black: var(--light, #fff) var(--dark, #000000);
    --darkerblack_bg_black: var(--light, #F8F8FC) var(--dark, #2A2A31);
    --darkgrey_bg_black: var(--light, #f4f4f4) var(--dark, #343434);
    --stroke_black: var(--light, #EBECEF) var(--dark, #3F3F45);
    --stroke_black_hover: var(--light, #fff) var(--dark, #3F3F45);
    --card_bg_black: var(--light, #fff) var(--dark, #2A2A31);
    --card_bg_hover: var(--light, #F8F8FC) var(--dark, #313137);
    --card_bg_active: var(--light, #F3F4F7) var(--dark, #38383F);
    --card_bg_hover_black: var(--light, #fff) var(--dark, #2b2b2b);
    --card_bg_hover_grey: var(--light, #fff) var(--dark, #F4F4F4);
    --arrows_bg_black: var(--light, #fff) var(--dark, #444);
    --lite_bg_black: var(--light, #F8F8FC) var(--dark, #0b0d10);
    --light2_bg_black: var(--light, #fafafa) var(--dark, #232323);
    --gray_bg_black: var(--light, #B8B8B9) var(--dark, #8D8D8D);
    --white_bg_ccc: var(--light, #fff) var(--dark, #ccc);
    --fill_dark_light: var(--light, #0b0d10) var(--dark, #fff);
    --fill_dark_lite_ccc: var(--light, #0b0d10) var(--dark, #ccc);
    --fill_dark_lite_hover: var(--secondary);
    --fill_dark_lite_white_hover: var(--light, #0b0d10) var(--dark, #fff);
    --fill_theme_hover: var(--light, var(--theme-base-color)) var(--dark, rgba(255, 255, 255, .7));
    --dark_light-wtheme-hue: var(--light, var(--theme-base-color-hue)) var(--dark, 0);
    --dark_light-wtheme-saturation: var(--light, var(--theme-base-color-saturation)) var(--dark, 0%);
    --dark_light-wtheme-lightness: var(--light, var(--theme-base-color-lightness)) var(--dark, 100%);
    --dark_light-hue: var(--light, 0) var(--dark, 0);
    --dark_light-saturation: var(--light, 0%) var(--dark, 0%);
    --dark_light-lightness: var(--light, 97%) var(--dark, 7%);
    --checkbox_dark_light: var(--light, #afafaf) var(--dark, #3a3a3a);
    --opacity_dark_lite_hover: var(--light, var(--theme-base-opacity-color)) var(--dark, #3a3a3a);
    --dff_dark_light: var(--light, #fff) var(--dark, #121212);
    --stroke_input: var(--light, #d7d8da) var(--dark, #505056);
    --icon_on_card: var(--light, #B8B8B9) var(--dark, #696B70);
    --tag_hover: var(--light, #E8E9ED) var(--dark, #4B4B51);
    --input_color: var(--white_text_black);
    --input_bg_color: var(--black_bg_black);
    --input_bg_color-hover: var(--black_bg_black);
    --input_bg_color-focus: var(--black_bg_black);
    --input_border_color: var(--stroke_input);
    --input_border_color-hover: var(--icon_on_card);
    --input_border_color-focus: var(--secondary);
    --button_color_text: var(--theme-button-color-light, #fff) var(--theme-button-color-dark, #0b0d10);
}

@media (prefers-color-scheme:dark) {

    .theme-default,
    body.theme-default .theme-root {
        --light: var(--OFF_toggle);
        --dark: var(--ON_toggle)
    }
}