.controlfeed-color-theme {
    --viewport-background-color: white;
    --primary-background-color: lightblue;
    --secondary-background-color: wheat;
    --good-color: lightgreen;
    --bad-color: lightcoral;
    --list-color: wheat;
    --accent-color: black;
    --alt-accent-color: whitesmoke;
    --font-color: black;
    --bad-font-color: red;
    --selected-color: lightblue;
    --unselected-color: lightgray;
    --menu-primary-background-color: lightblue;
    --menu-alternate-background-color: wheat;
    --menu-primary-text-color: white;
    --menu-alternate-text-color: black;
    /* offset the luminance of colors using a 'perceptually uniform' color space*/
    @supports (color: oklch(0 0 0)) {
        --menu-primary-background-color: oklch(from lightblue calc(l * 50%) c h);
        --menu-alternate-background-color: oklch(from gainsboro calc(l * 100%) c h);
        --list-color: oklch(from wheat calc(l * 100%) c h);
        --primary-background-color: oklch(from lightblue calc(l * 100%) c h);
        --secondary-background-color: oklch(from wheat calc(l * 100%) c h);
        --bad-color: oklch(from lightcoral calc(l * 120%) c h);
        --selected-color: lightblue;
    }

    --menu-gradient-color-start: var(--menu-primary-background-color);
    --menu-gradient-color-end: var(--menu-primary-background-color);
}

.clock-color-theme {
    /* color names from marketing color guide*/
    --logo-blue: rgb(from #1C9AD6 r g b);
    --light-green: rgb(from #AECD40 r g b);
    --clock-grey: rgb(from #A9A9A9 r g b);
    --dark-green: rgb(from #31713A r g b);
    --dark-blue: rgb(from #012B3E r g b);
    /* ui variables*/
    --viewport-background-color: white;
    --primary-background-color: var(--logo-blue);
    --secondary-background-color: var(--dark-green);
    --good-color: var(--light-green);
    --bad-color: var(--clock-grey);
    --list-color: var(--light-green);
    --accent-color: var(--dark-blue);
    --alt-accent-color: var(--dark-blue);
    --font-color: black;
    --bad-font-color: red;
    --selected-color: var(--logo-blue);
    --unselected-color: var(--clock-grey);
    --menu-primary-background-color: var(--dark-blue);
    --menu-alternate-background-color: var(--light-green);
    /* offset the luminance of colors using a 'perceptually uniform' color space*/
    @supports (color: oklch(0 0 0)) {
        --menu-primary-background-color: oklch(from var(--dark-blue) calc(l * 100%) c h);
        --menu-alternate-background-color: oklch(from var(--dark-green) calc(l * 100%) c h);
        --list-color: oklch(from var(--dark-green) calc(l * 180%) c h);
        --primary-background-color: oklch(from var(--logo-blue) calc(l * 110%) c h);
        --secondary-background-color: oklch(from var(--dark-green) calc(l * 120%) c h);
        --bad-color: oklch(from var(--clock-grey) calc(l * 120%) c h);
        --selected-color: var(--primary-background-color);
    }
    --menu-gradient-color-start: var(--menu-primary-background-color);
    --menu-gradient-color-end: var(--menu-alternate-background-color);
}

.dark-color-theme {
    /* convenience names describing the colors */
    --color-one: rgb(from #4862A5 r g b);
    --color-two: rgb(from #C34B00 r g b);
    --color-three: rgb(from #34276D r g b);
    --color-four: rgb(from #8C1951 r g b);
    --color-five: rgb(from #BF8400 r g b);
    /* ui variables */
    --viewport-background-color: white;
    --primary-background-color: var(--color-one);
    --secondary-background-color: var(--color-two);
    --good-color: var(--color-three);
    --bad-color: var(--color-four);
    --list-color: var(--secondary-background-color);
    --accent-color: var(--color-five);
    --alt-accent-color: var(--accent-color);
    --font-color: black;
    --bad-font-color: red;
    --selected-color: var(--primary-background-color);
    --unselected-color: var(--bad-color);
    --menu-primary-background-color: var(--primary-background-color);
    --menu-alternate-background-color: var(--secondary-background-color);
    --menu-gradient-color-start: var(--menu-primary-background-color);
    --menu-gradient-color-end: var(--menu-alternate-background-color);
}

.contrast-color-theme {
    /* convenience names describing the colors */
    --light-blue: rgb(from #648FFF r g b);
    --orange: rgb(from #FE6100 r g b);
    --light-purple: rgb(from #785EF0 r g b);
    --magenta-like: rgb(from #DC267F r g b);
    --bright-orange: rgb(from #FFB000 r g b);
    --gray-neutral: rgb(from #A9A9A9 r g b);
    --brown-neutral: rgb(from #714423 r g b);
    /* ui variables */
    --viewport-background-color: white;
    --primary-background-color: var(--light-blue);
    --secondary-background-color: var(--orange);
    --good-color: var(--bright-orange);
    --bad-color: var(--magenta-like);
    --list-color: var(--bright-orange);
    --accent-color: var(--light-purple);
    --alt-accent-color: var(--accent-color);
    --font-color: black;
    --bad-font-color: red;
    --selected-color: var(--primary-background-color);
    --unselected-color: var(--bad-color);
    --menu-primary-background-color: var(--light-purple);
    --menu-alternate-background-color: var(--magenta-like);
    --menu-primary-text-color: white;
    --menu-alternate-text-color: white;
    /* offset the luminance of colors using a 'perceptually uniform' color space*/
    @supports (color: oklch(0 0 0)) {
        --menu-primary-background-color: oklch(from var(--light-purple) calc(l * 100%) c h);
        --menu-alternate-background-color: oklch(from var(--magenta-like) calc(l * 100%) c h);
        --list-color: oklch(from var(--bright-orange) calc(l * 120%) c h);
        --primary-background-color: oklch(from var(--light-blue) calc(l * 110%) c h);
        --secondary-background-color: oklch(from var(--orange) calc(l * 120%) c h);
        --bad-color: oklch(from var(--magenta-like) calc(l * 120%) c h);
        --selected-color: var(--primary-background-color);
    }
    --menu-gradient-color-start: var(--menu-primary-background-color);
    --menu-gradient-color-end: var(--menu-primary-background-color);
}