:root, :root[data-theme="auto"], root[data-theme="auto"] {
    color-scheme: light;
    --dca-light-mode: 1;
    --dca-dark-mode: 0;
    --dca-white: #FFFFFF;
    --dca-black: #000000;
    --dca-primary: #00bbff;
    --dca-gray: #666;
    --dca-gray-lightest: #f2f2f2;
    --dca-gray-lighter: #ddd;
    --dca-gray-light: #999;
    --dca-gray-darker: #454545;
    --dca-gray-darkest: #333;
    --dca-gray-super-lightest: #f7f7f7;
    --active-brightness: 1;
    --focus-brightness: 1;
}

@media (prefers-color-scheme: light) {
    :root:not([data-color-scheme]):not([data-theme]), :root[data-theme="auto"] {
        color-scheme: light;
        --dca-light-mode: 1;
        --dca-dark-mode: 0;
        --dca-white: #FFFFFF;
        --dca-black: #000000;
        --dca-primary: #00bbff;
        --dca-gray: #666;
        --dca-gray-lightest: #f2f2f2;
        --dca-gray-lighter: #ddd;
        --dca-gray-light: #999;
        --dca-gray-darker: #454545;
        --dca-gray-darkest: #333;
        --dca-gray-super-lightest: #f7f7f7;
        --active-brightness: 1;
        --focus-brightness: 1;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme]):not([data-theme]), :root[data-theme="auto"] {
        color-scheme: light;
        --dca-light-mode: 1;
        --dca-dark-mode: 0;
        --dca-white: #FFFFFF;
        --dca-black: #000000;
        --dca-primary: #00bbff;
        --dca-gray: #666;
        --dca-gray-lightest: #f2f2f2;
        --dca-gray-lighter: #ddd;
        --dca-gray-light: #999;
        --dca-gray-darker: #454545;
        --dca-gray-darkest: #333;
        --dca-gray-super-lightest: #f7f7f7;
        --active-brightness: 0.9;
        --focus-brightness: 0.9;
    }
}