/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        /* color: 2e2e2e */
        --bg-h: 0;
        --bg-s: 0%;
        --bg-l: 18%;
        --bg-hsl: var(--bg-h), var(--bg-s), var(--bg-l);
        --bg: hsl(var(--bg-hsl));
        --bg-overlay: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .8));
        --bg-2:  hsl(var(--bg-h), var(--bg-s), 23.07692308%);
        --bg-5:  hsl(var(--bg-h), var(--bg-s), 24%);
        --bg-10: hsl(var(--bg-h), var(--bg-s), 25.7142857%);
        --bg-15: hsl(var(--bg-h), var(--bg-s), 27.6923077%);
        --bg-20: hsl(var(--bg-h), var(--bg-s), 30%);
        --bg-25: hsl(var(--bg-h), var(--bg-s), 32.7272727%);
        --bg-30: hsl(var(--bg-h), var(--bg-s), 36%);
        --bg-35: hsl(var(--bg-h), var(--bg-s), 40%);
        --bg-40: hsl(var(--bg-h), var(--bg-s), 45%);
        --bg-45: hsl(var(--bg-h), var(--bg-s), 51.4285714%);
        --bg-50: hsl(var(--bg-h), var(--bg-s), 60%);
        --bg-55: hsl(var(--bg-h), var(--bg-s), 72%);
        --bg-60: hsl(var(--bg-h), var(--bg-s), 90%);
        --bg-65: hsl(var(--bg-h), var(--bg-s), 100%);
        --bg-70: hsl(var(--bg-h), var(--bg-s), 100%);
        --bg-75: hsl(var(--bg-h), var(--bg-s), 100%);
        --bg-80: hsl(var(--bg-h), var(--bg-s), 100%);
        --bg-85: hsl(var(--bg-h), var(--bg-s), 100%);
        --bg-90: hsl(var(--bg-h), var(--bg-s), 100%);
        --bg-95: hsl(var(--bg-h), var(--bg-s), 100%);
        --bg-100: hsl(var(--bg-h), var(--bg-s), 100%);
        --table-input-bg: var(--bg);
        --table-input-border: var(--bg-15);
        --table-checkbox-border: var(--bg-25);
    }
}

/* Light theme */

@media (prefers-color-scheme: light) {
    :root {
        /* color: #ffffff */
        --bg-h: 0;
        --bg-s: 0%;
        --bg-l: 100%;
        --bg-hsl: var(--bg-h), var(--bg-s), var(--bg-l);

        --bg: hsl(var(--bg-hsl));
        --bg-overlay: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) / .9));
        --bg-2: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .98));
        --bg-5: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .95));
        --bg-10: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .90));
        --bg-15: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .85));
        --bg-20: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .8));
        --bg-25: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .75));
        --bg-30: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .7));
        --bg-35: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .65));
        --bg-40: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .60));
        --bg-45: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .55));
        --bg-50: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .5));
        --bg-55: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .45));
        --bg-60: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .4));
        --bg-65: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .35));
        --bg-70: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .3));
        --bg-75: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .25));
        --bg-80: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .2));
        --bg-85: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .15));
        --bg-90: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .1));
        --bg-95: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .05));
        --bg-100: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) * .01));
        --table-input-bg: var(--bg-2);
        --table-input-border: var(--bg-10);
        --table-checkbox-border: var(--bg-15);
    }
}