/*
 * base theme
 *
 * todo: make per-client themes, this can be stored in localStorage
 */

:root {
    --text-color-light: rgb(20% 20% 20%);
    --text-color-60-light: rgb(60% 66% 60% / 1);
    --text-color-bright-light: rgb(100% 100% 100% / 1);
    --text-color-brighter-light: rgb(30% 30% 30% / 1);
    --text-color-medium-light: rgb(45% 45% 45% / 1);
    --text-color-demur-light: rgb(90% 90% 90% / 1);
    --icon-color-light: rgb(93% 93% 93%);
    --base-background-color-light: rgb(100% 100% 100% / 1);
    --base-background-color-demur-light: rgb(96% 99% 96% / 1);
    --inset-background-color-light: rgb(93% 93% 93% / .7);
    --article-background-color-light: rgb(90% 90% 90% / .95);
    --section-background-color-light: rgb(100% 100% 100% / .9);
    --section-border-light: 1px solid rgb(70% 70% 70% / 1);
    --section-box-shadow-light: 0 0 3px 2px rgb(85% 85% 85% / 1);
    --section-title-background-color-light: rgb(39% 55% 60% / 1);
    --section-title-darker-background-color-light: rgb(20% 40% 50% / 1);
    --section-title-vdark-background-color-light: rgb(17% 37% 47% / 1);
    --section-title-box-shadow-light: rgb(60% 65% 60% / 1);
    --section-fieldset-background-color-light: rgb(92% 94% 92% / 1);
    --border-color-bright-white-light: rgb(93% 93% 93% / 1);
    --div-fieldwrapper-light: rgb(92% 94% 92% / 1);
    --div-fieldwrapper-box-shadow-light: 0 0 2px 0.25px rgb(88% 88% 88% / 1);
    --text-color-strong-light: rgb(0% 0% 0% / 1);
    --item-border-light: 1px solid rgb(78% 78% 78% / .8);
    --grid-background-hilite-light: rgb(80% 82% 80% / 1);
    --button-green-color-light: rgb(100% 100% 100% / 1);
    --button-green-background-color-light: rgb(0% 69% 23% / 1);
    --button-background-color-light: rgb(39% 65% 66% / 1);
    --button-dangerous-background-color-light: rgb(100% 0% 0% / 1);
    --button-dangerous-border-color-light: rgb(50% 0% 0% / 1);
    --button-dangerous-shadow-light: rgb(60% 0% 0% / 1);
    --button-shadow-light: rgb(19% 45% 46% / 1);
    --button-border-light: 1px solid rgb(19% 39% 36% / 1);
    --input-box-shadow-light: 0 0 2px 2px rgb(0% 0% 0% / .9);
    --input-box-border-light: 1px solid rgb(100% 100% 100% / .9);
    --help-box-color-light: rgb(60% 79% 100% / 1);
    --help-box-background-color-light: rgb(21% 35% 50% / 1);
    --input-needed-box-shadow-light: 0 0 9px 3px rgb(60% 30% 0% / 1);
    --fieldset-legend-background-color-light: rgb(66% 70% 62% / 1);
    --fieldset-border-light: 1px solid rgb(78% 78% 78% / .8);
    --footer-background-color-light: rgb(21% 35% 50% / .3);

    /* dark mode */
    --text-color-dark: rgb(90% 90% 90%);
    --text-color-60-dark: rgb(60% 66% 60% / 1);
    --text-color-bright-dark: rgb(85% 85% 85% / 1);
    --text-color-brighter-dark: rgb(80% 80% 80% / 1);
    --text-color-medium-dark: rgb(55% 55% 55% / 1);
    --text-color-demur-dark: rgb(30% 30% 30% / 1);
    --icon-color-dark: rgb(69% 69% 69%);
    --base-background-color-dark: rgb(20% 20% 20%);
    --base-background-color-demur-dark: rgb(25% 25% 25%);
    --inset-background-color-dark: rgb(60% 60% 60% / .8);
    --article-background-color-dark: rgb(40% 40% 40% / .95);
    --section-background-color-dark: rgb(50% 50% 50% / .9);
    --section-border-dark: 1px solid rgb(30% 30% 30% / 1);
    --section-box-shadow-dark: 0 0 3px 2px rgb(35% 35% 35% / 1);
    --section-title-background-color-dark: rgb(19% 35% 36% / 1);
    --section-title-darker-background-color-dark: rgb(10% 20% 25% / 1);
    --section-title-vdark-background-color-dark: rgb(8% 18% 23% / 1);
    --section-title-box-shadow-dark: rgb(40% 45% 40% / 1);
    --section-fieldset-background-color-dark: rgb(45% 48% 45% / 1);
    --border-color-bright-white-dark: rgb(63% 63% 63% / 1);
    --div-fieldwrapper-dark: rgb(35% 38% 35% / 1);
    --div-fieldwrapper-box-shadow-dark: 0 0 2px 0.25px rgb(48% 48% 48% / 1);
    --text-color-strong-dark: rgb(100% 100% 100% / 1);
    --item-border-dark: 1px solid rgb(38% 38% 38% / .8);
    --grid-background-hilite-dark: rgb(35% 38% 35% / 1);
    --button-green-color-dark: rgb(100% 100% 100% / 1);
    --button-green-background-color-dark: rgb(0% 69% 23% / 1);
    --button-background-color-dark: rgb(40% 60% 50% / 1);
    --button-dangerous-background-color-dark: rgb(50% 0% 0% / 1);
    --button-dangerous-border-color-dark: rgb(25% 0% 0% / 1);
    --button-dangerous-shadow-dark: rgb(65% 0% 0% / 1);
    --button-border-dark: 1px solid rgb(46% 50% 42% / 1);
    --button-shadow-dark: rgb(50% 70% 60% / 1);
    --input-box-shadow-dark: 0 0 2px 2px rgb(90% 90% 90% / .9);
    --input-box-border-dark: 1px solid rgb(100% 100% 100% / .9);
    --input-needed-box-shadow-dark: 0 0 6px 2px rgb(90% 90% 90% / 1);
    --help-box-color-dark: rgb(100% 100% 100% / 1);
    --help-box-background-color-dark: rgb(21% 35% 50% / 1);
    --fieldset-legend-background-color-dark: rgb(36% 40% 32% / 1);
    --fieldset-border-dark: 1px solid rgb(28% 28% 28% / .8);
    --footer-background-color-dark: rgb(21% 35% 50% / .3);
}

[data-theme='light'] {
    --text-color: var(--text-color-light);
    --text-color-60: var(--text-color-60-light);
    --text-color-bright: var(--text-color-bright-light);
    --text-color-brighter: var(--text-color-brighter-light);
    --text-color-medium: var(--text-color-medium-light);
    --text-color-demur: var(--text-color-demur-light);
    --icon-color: var(--icon-color-light);
    --background-color: var(--base-background-color-light);
    --background-color-demur: var(--base-background-color-demur-light);
    --inset-background-color: var(--inset-background-color-light);
    --article-background-color: var(--article-background-color-light);
    --section-background-color: var(--section-background-color-light);
    --section-border: var(--section-border-light);
    --section-box-shadow: var(--section-box-shadow-light);
    --section-title-background-color: var(--section-title-background-color-light);
    --section-title-darker-background-color: var(--section-title-darker-background-color-light);
    --section-title-vdark-background-color: var(--section-title-vdark-background-color-light);
    --section-title-box-shadow: var(--section-title-box-shadow-light);
    --section-fieldset-background-color: var(--section-fieldset-background-color-light);
    --border-color-bright-white: var(--border-color-bright-white-light);

    --div-fieldwrapper: var(--div-fieldwrapper-light);
    --div-fieldwrapper-box-shadow: var(--div-fieldwrapper-box-shadow-light);
    --text-color-strong: var(--text-color-strong-light);
    --item-border: var(--item-border-light);
    --grid-background-hilite: var(--grid-background-hilite-light);
    --button-green-color: var(--button-green-color-light);
    --button-green-background-color: var(--button-green-background-color-light);
    --button-background-color: var(--button-background-color-light);
    --button-dangerous-background-color: var(--button-dangerous-background-color-light);
    --button-dangerous-border-color: var(--button-dangerous-border-color-light);
    --button-dangerous-shadow: var(--button-dangerous-shadow-light);
    --button-border: var(--button-border-light);
    --button-shadow: var(--button-shadow-light);
    --input-box-shadow: var(--input-box-shadow-light);
    --input-box-border: var(--input-box-border-light);
    --input-needed-box-shadow: var(--input-needed-box-shadow-light);
    --help-box-color: var(--help-box-color-light);
    --help-box-background-color: var(--help-box-background-color-light);
    --fieldset-legend-background-color: var(--fieldset-legend-background-color-light);
    --fieldset-border: var(--fieldset-border-light);
    --footer-background-color: var(--footer-background-color-light);
}

[data-theme='dark'] {
    --text-color: var(--text-color-dark);
    --text-color-60: var(--text-color-60-dark);
    --text-color-bright: var(--text-color-bright-dark);
    --text-color-brighter: var(--text-color-brighter-dark);
    --text-color-medium: var(--text-color-medium-dark);
    --text-color-demur: var(--text-color-demur-dark);
    --icon-color: var(--icon-color-dark);
    --background-color: var(--base-background-color-dark);
    --background-color-demur: var(--base-background-color-demur-dark);
    --inset-background-color: var(--inset-background-color-dark);
    --article-background-color: var(--article-background-color-dark);
    --section-background-color: var(--section-background-color-dark);
    --section-border: var(--section-border-dark);
    --section-box-shadow: var(--section-box-shadow-dark);
    --section-title-background-color: var(--section-title-background-color-dark);
    --section-title-darker-background-color: var(--section-title-darker-background-color-dark);
    --section-title-vdark-background-color: var(--section-title-vdark-background-color-dark);
    --section-title-box-shadow: var(--section-title-box-shadow-dark);
    --section-fieldset-background-color: var(--section-fieldset-background-color-dark);
    --border-color-bright-white: var(--border-color-bright-white-dark);
    --div-fieldwrapper: var(--div-fieldwrapper-dark);
    --div-fieldwrapper-box-shadow: var(--div-fieldwrapper-box-shadow-dark);
    --text-color-strong: var(--text-color-strong-dark);
    --item-border: var(--item-border-dark);
    --grid-background-hilite: var(--grid-background-hilite-dark);
    --button-green-color: var(--button-green-color-dark);
    --button-green-background-color: var(--button-green-background-color-dark);
    --button-background-color: var(--button-background-color-dark);
    --button-dangerous-background-color: var(--button-dangerous-background-color-dark);
    --button-dangerous-border-color: var(--button-dangerous-border-color-dark);
    --button-dangerous-shadow: var(--button-dangerous-shadow-dark);
    --button-border: var(--button-border-dark);
    --button-shadow: var(--button-shadow-dark);
    --input-box-shadow: var(--input-box-shadow-dark);
    --input-box-border: var(--input-box-border-dark);
    --input-needed-box-shadow: var(--input-needed-box-shadow-dark);
    --help-box-color: var(--help-box-color-dark);
    --help-box-background-color: var(--help-box-background-color-dark);
    --fieldset-legend-background-color: var(--fieldset-legend-background-color-dark);
    --fieldset-border: var(--fieldset-border-dark);
    --footer-background-color: var(--footer-background-color-dark);
    filter: brightness(60%);
}