:root{
    /* region branded colors: cem-color-[hue]-[variant] */

    --cem-color-blue-xl : #e0e8ff ;        /* Lightest blue ; Trust palette (light scene surface) */
    --cem-color-blue-l : #d7e3ff ;        /* Light blue ; Trust palette, attention semantic */
    --cem-color-blue-d : #002f65 ;        /* Dark blue ; Trust palette (dark theme) */
    --cem-color-blue-xd : #001b3f ;        /* Darkest blue ; Trust palette (dark scene surface) */
    --cem-color-brown-xl : #d7ccc8 ;        /* Extra light brown ; Conservative palette (light theme) */
    --cem-color-brown-l : #a1887f ;        /* Light brown ; Conservative emotion, brand-3 */
    --cem-color-brown-d : #4e342e ;        /* Dark brown ; Conservative palette (dark theme) */
    --cem-color-brown-xd : #3e2723 ;        /* Extra dark brown ; Conservative palette (dark theme, extreme) */
    --cem-color-cyan-xl : #f1fefe ;        /* Extra light cyan ; Used for comfort palette (light scenes) */
    --cem-color-cyan-l : #00fbfb ;        /* Light cyan ; Calm palette, creativity accent */
    --cem-color-cyan-d : #006a6a ;        /* Dark cyan ; Calm palette (dark theme) */
    --cem-color-cyan-xd : #001010 ;        /* Extra dark cyan ; Used for comfort palette (dark scenes) */
    --cem-color-grey-l : #f1f1eb ;        /* Light grey ; Conservative palette, neutral backgrounds */
    --cem-color-grey-d : #1a1c18 ;        /* Dark grey ; Conservative palette (dark theme) */
    --cem-color-orange-xl : #f0f070 ;        /* Extra light yellow ; Enthusiasm palette (light theme) */
    --cem-color-orange-l : #ffe082 ;        /* Light orange ; Enthusiasm emotion, brand-2 */
    --cem-color-orange-d : #723600 ;        /* Dark orange ; Enthusiasm hype (dark theme) */
    --cem-color-orange-xd : #502400 ;        /* Extra dark orange ; Enthusiasm palette (dark theme, extreme) */
    --cem-color-purple-xl : #f3e5f5 ;        /* Extra light purple ; Creativity palette (light theme) */
    --cem-color-purple-l : #e1bee7 ;        /* Light purple ; Creativity emotion, brand-1 */
    --cem-color-purple-d : #6a1b9a ;        /* Dark purple ; Creativity palette (dark theme) */
    --cem-color-purple-xd : #4a148c ;        /* Extra dark purple ; Creativity palette (dark theme, extreme) */
    --cem-color-red-xl : #ffb4ab ;        /* Extra light red ; Danger palette (light theme) */
    --cem-color-red-l : #ba1a1a ;        /* Light red ; Danger emotion, alert semantic */
    --cem-color-red-d : #690005 ;        /* Dark red ; Danger palette (dark theme) */
    --cem-color-red-xd : #410002 ;        /* Extra dark red ; Danger palette (dark theme, extreme) */
    --cem-color-visitedtext-30-black : color-mix(in srgb, VisitedText 30%, black) ;        /* light trust-x ; Native palette Trust extreme variant */
    --cem-color-visitedtext-30-white : color-mix(in srgb, VisitedText 30%, white) ;        /* dark trust-x ; Native palette Trust extreme variant */
    --cem-color-mark-30-black : color-mix(in srgb, Mark 30%, black) ;        /* light enthusiasm-x ; Native palette Enthusiasm extreme variant */
    --cem-color-mark-30-white : color-mix(in srgb, Mark 30%, white) ;        /* dark enthusiasm-x ; Native palette Enthusiasm extreme variant */
    --cem-color-canvastext-30-purple : color-mix(in srgb, CanvasText 30%,  purple  ) ;        /* light creativity-x ; Native palette Creativity extreme variant */
    --cem-color-canvastext-30-lightpink : color-mix(in srgb, CanvasText 30%, lightpink) ;        /* dark creativity-x ; Native palette Creativity extreme variant */
    --cem-color-red-30-black : color-mix(in srgb, red 30%, black) ;        /* light danger-x ; Native palette Danger extreme variant */
    --cem-color-red-30-white : color-mix(in srgb, red 30%, white) ;        /* dark danger-x ; Native palette Danger extreme variant */
    --cem-color-white : white ;        /* dark trust text ; Trust and Extreme palette dark mode text */
    
    /* endregion branded colors */

    /* emotion palette: cem-palette-[emotion]-[shift] */
    /* region light/dark */
    --cem-palette-comfort: light-dark(var( --cem-color-cyan-xl ), var( --cem-color-cyan-xd ) );
            --cem-palette-comfort-x: light-dark(var( --cem-color-cyan-xd ), var( --cem-color-cyan-xl ) );
            --cem-palette-comfort-text: light-dark(var( --cem-color-cyan-xd ), var( --cem-color-cyan-xl ) );
            --cem-palette-comfort-text-x: light-dark(var( --cem-color-cyan-xl ), var( --cem-color-cyan-xd ) );
            --cem-palette-calm: light-dark(var( --cem-color-cyan-l ), var( --cem-color-cyan-d ) );
            --cem-palette-calm-x: light-dark(var( --cem-color-cyan-d ), var( --cem-color-cyan-l ) );
            --cem-palette-calm-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-palette-comfort-text ) );
            --cem-palette-calm-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
            --cem-palette-trust: light-dark(var( --cem-color-blue-l ), var( --cem-color-blue-d ) );
            --cem-palette-trust-x: light-dark(var( --cem-color-blue-d ), var( --cem-color-blue-l ) );
            --cem-palette-trust-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-color-white ) );
            --cem-palette-trust-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
            --cem-palette-enthusiasm: light-dark(var( --cem-color-orange-l ), var( --cem-color-orange-d ) );
            --cem-palette-enthusiasm-x: light-dark(var( --cem-color-orange-xd ), var( --cem-color-orange-xl ) );
            --cem-palette-enthusiasm-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-color-white ) );
            --cem-palette-enthusiasm-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
            --cem-palette-creativity: light-dark(var( --cem-color-purple-l ), var( --cem-color-purple-d ) );
            --cem-palette-creativity-x: light-dark(var( --cem-color-purple-d ), var( --cem-color-purple-l ) );
            --cem-palette-creativity-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-palette-comfort-text ) );
            --cem-palette-creativity-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
            --cem-palette-danger: light-dark(var( --cem-color-red-l ), var( --cem-color-red-d ) );
            --cem-palette-danger-x: light-dark(var( --cem-color-red-d ), var( --cem-color-red-l ) );
            --cem-palette-danger-text: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text ) );
            --cem-palette-danger-text-x: light-dark(var( --cem-color-orange-xl ), var( --cem-color-orange-xl ) );
            --cem-palette-conservative: light-dark(var( --cem-color-grey-l ), var( --cem-color-grey-d ) );
            --cem-palette-conservative-x: light-dark(var( --cem-color-grey-d ), var( --cem-color-grey-l ) );
            --cem-palette-conservative-text: light-dark(var( --cem-palette-comfort-text ), var( --cem-palette-comfort-text ) );
            --cem-palette-conservative-text-x: light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text-x ) );
            
    /* endregion light/dark */

    /* region zebra outline colors for focus/selected/target (§8) */
    --cem-zebra-color-0: var(--cem-palette-comfort);
    --cem-zebra-color-1: var(--cem-palette-comfort);
    --cem-zebra-color-2: var(--cem-palette-comfort);
    --cem-zebra-color-3: var(--cem-palette-comfort);
    --cem-zebra-strip-size: 2px;

    /* :root state defaults match native theme so zebra is functional without an explicit theme class */
    [focus], :focus, :focus-visible, :focus-within, .focus {
        --cem-zebra-color-1: CanvasText;
    }
    [target], :target, .target {
        --cem-zebra-color-2: Mark;
    }
    [selected], .selected {
        --cem-zebra-color-3: SelectedItem;
    }
    /* endregion zebra */

    /*  region common for cem themes */
    [data-theme*="cem-theme-"],
    .cem-theme-native,
    .cem-theme-contrast-light,
    .cem-theme-contrast-dark,
    .cem-theme-light,
    .cem-theme-dark {

        /* action intent tokens: cem-action-[intent]-[state]-[background|text] */
        

            /*  region explicit (creativity) */

            
                --cem-action-explicit-disabled-background: color-mix(in srgb, var(--cem-palette-creativity) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 30%, var(--cem-palette-conservative-x)) */
                --cem-action-explicit-disabled-text:       var(--cem-palette-conservative-text-x);
            
                --cem-action-explicit-readonly-background: color-mix(in srgb, var(--cem-palette-creativity) 80%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 80%, var(--cem-palette-creativity-x)) */
                --cem-action-explicit-readonly-text:       var(--cem-palette-creativity-text);
            
                --cem-action-explicit-editable-background: color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x)) */
                --cem-action-explicit-editable-text:       var(--cem-palette-creativity-text);
            
                --cem-action-explicit-default-background: var(--cem-palette-creativity);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-creativity) ~ var(--cem-palette-creativity) */
                --cem-action-explicit-default-text:       var(--cem-palette-creativity-text);
            
                --cem-action-explicit-indeterminate-background: color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x)) */
                --cem-action-explicit-indeterminate-text:       var(--cem-palette-creativity-text);
            
                --cem-action-explicit-hover-background: color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x)) */
                --cem-action-explicit-hover-text:       var(--cem-palette-creativity-text);
            
                --cem-action-explicit-active-background: color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) */
                --cem-action-explicit-active-text:       var(--cem-palette-creativity-text-x);
            
                --cem-action-explicit-pending-background: color-mix(in srgb, var(--cem-palette-creativity)  5%, var(--cem-palette-creativity-x));/* color-mix(in srgb, var(--cem-palette-[emotion])  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity)  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-creativity)  5%, var(--cem-palette-creativity-x)) */
                --cem-action-explicit-pending-text:       var(--cem-palette-creativity-text-x);
            
            /* endregion explicit (creativity) */
        

            /*  region primary (trust) */

            
                --cem-action-primary-disabled-background: color-mix(in srgb, var(--cem-palette-trust) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 30%, var(--cem-palette-conservative-x)) */
                --cem-action-primary-disabled-text:       var(--cem-palette-conservative-text-x);
            
                --cem-action-primary-readonly-background: color-mix(in srgb, var(--cem-palette-trust) 80%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 80%, var(--cem-palette-trust-x)) */
                --cem-action-primary-readonly-text:       var(--cem-palette-trust-text);
            
                --cem-action-primary-editable-background: color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x)) */
                --cem-action-primary-editable-text:       var(--cem-palette-trust-text);
            
                --cem-action-primary-default-background: var(--cem-palette-trust);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-trust) ~ var(--cem-palette-trust) */
                --cem-action-primary-default-text:       var(--cem-palette-trust-text);
            
                --cem-action-primary-indeterminate-background: color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x)) */
                --cem-action-primary-indeterminate-text:       var(--cem-palette-trust-text);
            
                --cem-action-primary-hover-background: color-mix(in srgb, var(--cem-palette-trust) 70%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 70%, var(--cem-palette-trust-x)) */
                --cem-action-primary-hover-text:       var(--cem-palette-trust-text);
            
                --cem-action-primary-active-background: color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) */
                --cem-action-primary-active-text:       var(--cem-palette-trust-text-x);
            
                --cem-action-primary-pending-background: color-mix(in srgb, var(--cem-palette-trust)  5%, var(--cem-palette-trust-x));/* color-mix(in srgb, var(--cem-palette-[emotion])  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust)  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-trust)  5%, var(--cem-palette-trust-x)) */
                --cem-action-primary-pending-text:       var(--cem-palette-trust-text-x);
            
            /* endregion primary (trust) */
        

            /*  region contextual (comfort) */

            
                --cem-action-contextual-disabled-background: color-mix(in srgb, var(--cem-palette-comfort) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 30%, var(--cem-palette-conservative-x)) */
                --cem-action-contextual-disabled-text:       var(--cem-palette-conservative-text-x);
            
                --cem-action-contextual-readonly-background: color-mix(in srgb, var(--cem-palette-comfort) 80%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 80%, var(--cem-palette-comfort-x)) */
                --cem-action-contextual-readonly-text:       var(--cem-palette-comfort-text);
            
                --cem-action-contextual-editable-background: color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x)) */
                --cem-action-contextual-editable-text:       var(--cem-palette-comfort-text);
            
                --cem-action-contextual-default-background: var(--cem-palette-comfort);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-comfort) ~ var(--cem-palette-comfort) */
                --cem-action-contextual-default-text:       var(--cem-palette-comfort-text);
            
                --cem-action-contextual-indeterminate-background: color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x)) */
                --cem-action-contextual-indeterminate-text:       var(--cem-palette-comfort-text);
            
                --cem-action-contextual-hover-background: color-mix(in srgb, var(--cem-palette-comfort) 70%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 70%, var(--cem-palette-comfort-x)) */
                --cem-action-contextual-hover-text:       var(--cem-palette-comfort-text);
            
                --cem-action-contextual-active-background: color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) */
                --cem-action-contextual-active-text:       var(--cem-palette-comfort-text-x);
            
                --cem-action-contextual-pending-background: color-mix(in srgb, var(--cem-palette-comfort)  5%, var(--cem-palette-comfort-x));/* color-mix(in srgb, var(--cem-palette-[emotion])  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort)  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-comfort)  5%, var(--cem-palette-comfort-x)) */
                --cem-action-contextual-pending-text:       var(--cem-palette-comfort-text-x);
            
            /* endregion contextual (comfort) */
        

            /*  region alternate (enthusiasm) */

            
                --cem-action-alternate-disabled-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 30%, var(--cem-palette-conservative-x)) */
                --cem-action-alternate-disabled-text:       var(--cem-palette-conservative-text-x);
            
                --cem-action-alternate-readonly-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 80%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 80%, var(--cem-palette-enthusiasm-x)) */
                --cem-action-alternate-readonly-text:       var(--cem-palette-enthusiasm-text);
            
                --cem-action-alternate-editable-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x)) */
                --cem-action-alternate-editable-text:       var(--cem-palette-enthusiasm-text);
            
                --cem-action-alternate-default-background: var(--cem-palette-enthusiasm);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-enthusiasm) ~ var(--cem-palette-enthusiasm) */
                --cem-action-alternate-default-text:       var(--cem-palette-enthusiasm-text);
            
                --cem-action-alternate-indeterminate-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x)) */
                --cem-action-alternate-indeterminate-text:       var(--cem-palette-enthusiasm-text);
            
                --cem-action-alternate-hover-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 70%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 70%, var(--cem-palette-enthusiasm-x)) */
                --cem-action-alternate-hover-text:       var(--cem-palette-enthusiasm-text);
            
                --cem-action-alternate-active-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) */
                --cem-action-alternate-active-text:       var(--cem-palette-enthusiasm-text-x);
            
                --cem-action-alternate-pending-background: color-mix(in srgb, var(--cem-palette-enthusiasm)  5%, var(--cem-palette-enthusiasm-x));/* color-mix(in srgb, var(--cem-palette-[emotion])  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm)  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-enthusiasm)  5%, var(--cem-palette-enthusiasm-x)) */
                --cem-action-alternate-pending-text:       var(--cem-palette-enthusiasm-text-x);
            
            /* endregion alternate (enthusiasm) */
        

            /*  region destructive (danger) */

            
                --cem-action-destructive-disabled-background: color-mix(in srgb, var(--cem-palette-danger) 30%, var(--cem-palette-conservative-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 30%, var(--cem-palette-conservative-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 30%, var(--cem-palette-conservative-x)) */
                --cem-action-destructive-disabled-text:       var(--cem-palette-conservative-text-x);
            
                --cem-action-destructive-readonly-background: color-mix(in srgb, var(--cem-palette-danger) 80%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 80%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 80%, var(--cem-palette-danger-x)) */
                --cem-action-destructive-readonly-text:       var(--cem-palette-danger-text);
            
                --cem-action-destructive-editable-background: color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x)) */
                --cem-action-destructive-editable-text:       var(--cem-palette-danger-text);
            
                --cem-action-destructive-default-background: var(--cem-palette-danger);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-danger) ~ var(--cem-palette-danger) */
                --cem-action-destructive-default-text:       var(--cem-palette-danger-text);
            
                --cem-action-destructive-indeterminate-background: color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x)) */
                --cem-action-destructive-indeterminate-text:       var(--cem-palette-danger-text);
            
                --cem-action-destructive-hover-background: color-mix(in srgb, var(--cem-palette-danger) 70%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 70%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 70%, var(--cem-palette-danger-x)) */
                --cem-action-destructive-hover-text:       var(--cem-palette-danger-text);
            
                --cem-action-destructive-active-background: color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion]) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x)) */
                --cem-action-destructive-active-text:       var(--cem-palette-danger-text-x);
            
                --cem-action-destructive-pending-background: color-mix(in srgb, var(--cem-palette-danger)  5%, var(--cem-palette-danger-x));/* color-mix(in srgb, var(--cem-palette-[emotion])  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger)  5%, var(--cem-palette-[emotion]-x)) ~ color-mix(in srgb, var(--cem-palette-danger)  5%, var(--cem-palette-danger-x)) */
                --cem-action-destructive-pending-text:       var(--cem-palette-danger-text-x);
            
            /* endregion destructive (danger) */
        

        /* region zebra base: anchor all stripes to surface (§8.2) */
        --cem-zebra-color-0: var(--cem-palette-comfort);
        --cem-zebra-color-1: var(--cem-palette-comfort);
        --cem-zebra-color-2: var(--cem-palette-comfort);
        --cem-zebra-color-3: var(--cem-palette-comfort);
        /* endregion zebra base */

        background-color: var(--cem-palette-comfort);
        color: var(--cem-palette-comfort-text);
    }/* endregion common for cem themes */

    .cem-theme-light, [data-theme="cem-theme-light"],
    .cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"]
    {
        color-scheme: light;
    }

    .cem-theme-dark, [data-theme="cem-theme-dark"],
    .cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"]
    {
        color-scheme: dark; 
    }

    /* region zebra state: light/dark (§8.2 cem-zebra-mode-mapping) */
    
    .cem-theme-light, [data-theme="cem-theme-light"] {
        [focus], :focus, :focus-visible, :focus-within, .focus {
            --cem-zebra-color-1: var(--cem-palette-trust-x);
        }
        [target], :target, .target {
            --cem-zebra-color-2: var(--cem-color-orange-l);
        }
        [selected], .selected {
            --cem-zebra-color-3: var(--cem-palette-creativity-x);
        }
    }
    .cem-theme-dark, [data-theme="cem-theme-dark"] {
        [focus], :focus, :focus-visible, :focus-within, .focus {
            --cem-zebra-color-1: var(--cem-palette-comfort-x);
        }
        [target], :target, .target {
            --cem-zebra-color-2: var(--cem-palette-creativity);
        }
        [selected], .selected {
            --cem-zebra-color-3: var(--cem-palette-calm-x);
        }
    }
    /* endregion zebra state: light/dark */

    /* region zebra state: contrast (§8.2 cem-zebra-mode-mapping) */
    
    .cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"] {
        [focus], :focus, :focus-visible, :focus-within, .focus {
            --cem-zebra-color-1: var(--cem-palette-trust-x);
        }
        [target], :target, .target {
            --cem-zebra-color-2: var(--cem-color-orange-l);
        }
        [selected], .selected {
            --cem-zebra-color-3: var(--cem-palette-creativity-x);
        }
    }
    .cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {
        [focus], :focus, :focus-visible, :focus-within, .focus {
            --cem-zebra-color-1: var(--cem-palette-comfort-x);
        }
        [target], :target, .target {
            --cem-zebra-color-2: var(--cem-palette-enthusiasm-x);
        }
        [selected], .selected {
            --cem-zebra-color-3: var(--cem-palette-trust);
        }
    }
    /* endregion zebra state: contrast */

    /* override for native */
    .cem-theme-native,[data-theme="cem-theme-native"]{
        --cem-palette-comfort:  Canvas;
                        --cem-palette-comfort-x:  CanvasText;
                        --cem-palette-comfort-text:  CanvasText;
                        --cem-palette-comfort-text-x:  Canvas;
                        --cem-palette-calm:  cyan;
                        --cem-palette-calm-x:  rgb(0, 120, 120);
                        --cem-palette-calm-text:  black;
                        --cem-palette-calm-text-x:  white;
                        --cem-palette-trust:  color-mix(in srgb, Highlight 70%, black);
                        --cem-palette-trust-x: light-dark(var(--cem-color-visitedtext-30-black), var(--cem-color-visitedtext-30-white) );
                        --cem-palette-trust-text:  HighlightText;
                        --cem-palette-trust-text-x: light-dark(Canvas, Canvas );
                        --cem-palette-enthusiasm:  Mark;
                        --cem-palette-enthusiasm-x: light-dark(var(--cem-color-mark-30-black), var(--cem-color-mark-30-white) );
                        --cem-palette-enthusiasm-text:  MarkText;
                        --cem-palette-enthusiasm-text-x:  Canvas;
                        --cem-palette-creativity:  ButtonFace;
                        --cem-palette-creativity-x: light-dark(var(--cem-color-canvastext-30-purple), var(--cem-color-canvastext-30-lightpink) );
                        --cem-palette-creativity-text:  CanvasText;
                        --cem-palette-creativity-text-x:  Canvas;
                        --cem-palette-danger: light-dark(var(--cem-color-red-l), var(--cem-color-red-d) );
                        --cem-palette-danger-x: light-dark(var(--cem-color-red-30-black), var(--cem-color-red-30-white) );
                        --cem-palette-danger-text: light-dark(Canvas, CanvasText );
                        --cem-palette-danger-text-x:  Canvas;
                        --cem-palette-conservative:  ButtonFace;
                        --cem-palette-conservative-x:  CanvasText;
                        --cem-palette-conservative-text:  CanvasText;
                        --cem-palette-conservative-text-x:  Canvas;
                        
        /* region zebra native overrides */
        [focus], :focus, :focus-visible, :focus-within, .focus {
            --cem-zebra-color-1: CanvasText;
        }
        [target], :target, .target {
            --cem-zebra-color-2: Mark;
        }
        [selected], .selected {
            --cem-zebra-color-3: SelectedItem;
        }
        /* endregion zebra native */
    }/* native */

    background-color: var(--cem-palette-comfort);
    color: var(--cem-palette-comfort-text);
}/* root */