/* Generated by scripts/generate-css-index.mjs. Do not edit by hand. */

/* cem-colors.css */


: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 (trust) */

            
                --cem-action-explicit-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-explicit-disabled-text:       var(--cem-palette-conservative-text-x);
            
                --cem-action-explicit-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-explicit-readonly-text:       var(--cem-palette-trust-text);
            
                --cem-action-explicit-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-explicit-editable-text:       var(--cem-palette-trust-text);
            
                --cem-action-explicit-default-background: var(--cem-palette-trust);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-trust) ~ var(--cem-palette-trust) */
                --cem-action-explicit-default-text:       var(--cem-palette-trust-text);
            
                --cem-action-explicit-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-explicit-indeterminate-text:       var(--cem-palette-trust-text);
            
                --cem-action-explicit-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-explicit-hover-text:       var(--cem-palette-trust-text);
            
                --cem-action-explicit-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-explicit-active-text:       var(--cem-palette-trust-text-x);
            
                --cem-action-explicit-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-explicit-pending-text:       var(--cem-palette-trust-text-x);
            
            /* endregion explicit (trust) */
        

            /*  region primary (creativity) */

            
                --cem-action-primary-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-primary-disabled-text:       var(--cem-palette-conservative-text-x);
            
                --cem-action-primary-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-primary-readonly-text:       var(--cem-palette-creativity-text);
            
                --cem-action-primary-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-primary-editable-text:       var(--cem-palette-creativity-text);
            
                --cem-action-primary-default-background: var(--cem-palette-creativity);/* var(--cem-palette-[emotion]) ~ var(--cem-palette-creativity) ~ var(--cem-palette-creativity) */
                --cem-action-primary-default-text:       var(--cem-palette-creativity-text);
            
                --cem-action-primary-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-primary-indeterminate-text:       var(--cem-palette-creativity-text);
            
                --cem-action-primary-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-primary-hover-text:       var(--cem-palette-creativity-text);
            
                --cem-action-primary-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-primary-active-text:       var(--cem-palette-creativity-text-x);
            
                --cem-action-primary-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-primary-pending-text:       var(--cem-palette-creativity-text-x);
            
            /* endregion primary (creativity) */
        

            /*  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 */

/* cem-dimension.css */

:root {
    /* region dimension scale: cem-dim-[size] */
    --cem-dim-xx-small: 0.25rem;
    --cem-dim-x-small: 0.5rem;
    --cem-dim-small: 0.75rem;
    --cem-dim-medium: 1rem;
    --cem-dim-large: 1.5rem;
    --cem-dim-x-large: 2rem;
    --cem-dim-xx-large: 4rem;
    --cem-dim-xxx-large: 8rem;
    
    /* endregion dimension scale */

    /* region relationship gaps: cem-gap-[level] */
    --cem-gap-related: var(--cem-dim-x-small);
    --cem-gap-group: var(--cem-dim-small);
    --cem-gap-block: var(--cem-dim-medium);
    --cem-gap-section: var(--cem-dim-large);
    --cem-gap-page: var(--cem-dim-x-large);
    
    /* endregion gaps */

    /* region insets: cem-inset-[level] */
    --cem-inset-control: var(--cem-dim-x-small);
    --cem-inset-container: var(--cem-dim-medium);
    --cem-inset-surface: var(--cem-dim-large);
    
    /* endregion insets */

    /* region reading rhythm: cem-rhythm-reading-[level] */
    --cem-rhythm-reading-paragraph: 0.75em;
    --cem-rhythm-reading-section: var(--cem-dim-large);
    
    /* endregion reading rhythm */

    /* region data rhythm: cem-rhythm-data-[level] */
    --cem-rhythm-data-row: var(--cem-dim-x-small);
    --cem-rhythm-data-group: var(--cem-dim-medium);
    
    /* endregion data rhythm */

    /* region layout tokens: cem-layout-[purpose] (excludes deprecated) */
    --cem-layout-stack-gap: var(--cem-gap-block);
    --cem-layout-cluster-gap: var(--cem-gap-related);
    --cem-layout-gutter: var(--cem-dim-medium);
    --cem-layout-gutter-wide: var(--cem-dim-x-large);
    --cem-layout-gutter-max: var(--cem-dim-xx-large);
    --cem-layout-stack-tight: var(--cem-gap-related);
    --cem-layout-stack-loose: var(--cem-gap-section);
    
    /* endregion layout tokens */
}

/* region spacing mode: dense */
:root[data-cem-spacing="dense"] {
    --cem-gap-related: var(--cem-dim-x-small);
    --cem-gap-group: var(--cem-dim-x-small);
    --cem-gap-block: var(--cem-dim-small);
    --cem-gap-section: var(--cem-dim-medium);
    --cem-gap-page: var(--cem-dim-large);
    --cem-inset-control: var(--cem-dim-x-small);
    --cem-inset-container: var(--cem-dim-small);
    --cem-inset-surface: var(--cem-dim-medium);
    --cem-layout-gutter: var(--cem-dim-small);
    --cem-layout-gutter-wide: var(--cem-dim-large);
    --cem-layout-gutter-max: var(--cem-dim-x-large);
    --cem-rhythm-reading-paragraph: 0.6em;
    --cem-rhythm-reading-section: var(--cem-dim-medium);
    --cem-rhythm-data-row: var(--cem-dim-xx-small);
    --cem-rhythm-data-group: var(--cem-dim-small);
    
}
/* endregion spacing mode: dense */

/* region spacing mode: sparse */
:root[data-cem-spacing="sparse"] {
    --cem-gap-related: var(--cem-dim-small);
    --cem-gap-group: var(--cem-dim-medium);
    --cem-gap-block: var(--cem-dim-large);
    --cem-gap-section: var(--cem-dim-x-large);
    --cem-gap-page: var(--cem-dim-xx-large);
    --cem-inset-control: var(--cem-dim-small);
    --cem-inset-container: var(--cem-dim-large);
    --cem-inset-surface: var(--cem-dim-x-large);
    --cem-layout-gutter: var(--cem-dim-large);
    --cem-layout-gutter-wide: var(--cem-dim-xx-large);
    --cem-layout-gutter-max: var(--cem-dim-xxx-large);
    --cem-rhythm-reading-paragraph: 1em;
    --cem-rhythm-reading-section: var(--cem-dim-x-large);
    --cem-rhythm-data-row: var(--cem-dim-small);
    --cem-rhythm-data-group: var(--cem-dim-large);
    
}
/* endregion spacing mode: sparse */

/* cem-breakpoints.css */

/* ── Block A — CSS custom property reference values ─────────────────────── */

:root {
    /* region width basis: epsilon + cem-bp-width-[range]-[min|max] */
    --cem-bp-epsilon: 0.01px;
    --cem-bp-epsilon-css: 0.01px;
    --cem-bp-epsilon-mui: 0.05px;
    --cem-bp-width-compact-min: 0px;
    --cem-bp-width-compact-max: calc(var(--cem-bp-width-medium-min) - var(--cem-bp-epsilon));
    --cem-bp-width-medium-min: 600px;
    --cem-bp-width-medium-max: calc(var(--cem-bp-width-expanded-min) - var(--cem-bp-epsilon));
    --cem-bp-width-expanded-min: 840px;
    --cem-bp-width-expanded-max: calc(var(--cem-bp-width-large-min) - var(--cem-bp-epsilon));
    --cem-bp-width-large-min: 1200px;
    --cem-bp-width-large-max: calc(var(--cem-bp-width-xlarge-min) - var(--cem-bp-epsilon));
    --cem-bp-width-xlarge-min: 1600px;
    
    /* endregion width basis */

    /* region height basis: cem-bp-height-[range]-[min|max] */
    --cem-bp-height-compact-min: 0px;
    --cem-bp-height-compact-max: calc(var(--cem-bp-height-medium-min) - var(--cem-bp-epsilon));
    --cem-bp-height-medium-min: 480px;
    --cem-bp-height-medium-max: calc(var(--cem-bp-height-expanded-min) - var(--cem-bp-epsilon));
    --cem-bp-height-expanded-min: 900px;
    
    /* endregion height basis */

    /* region container query reference values: cem-cq-width-[range]-[min|max] */
    /* Consumer must provide container-type: inline-size (see R-D1x-WRAP) */
    --cem-cq-width-compact-max: calc(var(--cem-cq-width-medium-min) - var(--cem-bp-epsilon));
    --cem-cq-width-medium-min: 600px;
    --cem-cq-width-medium-max: calc(var(--cem-cq-width-expanded-min) - var(--cem-bp-epsilon));
    --cem-cq-width-expanded-min: 840px;
    --cem-cq-width-expanded-max: calc(var(--cem-cq-width-large-min) - var(--cem-bp-epsilon));
    --cem-cq-width-large-min: 1200px;
    
    /* endregion container query reference values */
}

/* ── Block B — @media active-width helpers ───────────────────────────────── */
/* Sets --cem-bp-active-width; read via JS: getComputedStyle(root).getPropertyValue('--cem-bp-active-width').trim() */


@media (max-width: 599.99px) {
:root {
    --cem-bp-active-width: compact;
}
}
        
@media (min-width: 600px) and (max-width: 839.99px) {
:root {
    --cem-bp-active-width: medium;
}
}
        
@media (min-width: 840px) and (max-width: 1199.99px) {
:root {
    --cem-bp-active-width: expanded;
}
}
        
@media (min-width: 1200px) and (max-width: 1599.99px) {
:root {
    --cem-bp-active-width: large;
}
}
        
@media (min-width: 1600px) {
:root {
    --cem-bp-active-width: xlarge;
}
}
        

/* Height helpers (informative — most apps adapt on width only) */

@media (max-height: 479.99px) {
:root {
    --cem-bp-active-height: compact;
}
}
        
@media (min-height: 480px) and (max-height: 899.99px) {
:root {
    --cem-bp-active-height: medium;
}
}
        
@media (min-height: 900px) {
:root {
    --cem-bp-active-height: expanded;
}
}
        

/* ── Block C — @container helpers ────────────────────────────────────────── */
/* Deferred: CEM does not emit @container selectors (R-D1x-WRAP).             */
/* Use --cem-cq-width-* reference values in your own @container rules.        */

/* cem-coupling.css */

:root {
    /* region coupling minimums — mode-invariant safety anchors */
    --cem-coupling-zone-min: 3rem;
    --cem-coupling-guard-min: 0.5rem;
    --cem-coupling-halo: 0.25rem;
    
    /* endregion coupling minimums */
}

/* region coupling mode: forgiving — halo policy only (visuals owned by D2c Controls) */
:root[data-cem-coupling="forgiving"] {
    --cem-coupling-halo: 0.125rem;
    
}
/* endregion coupling mode: forgiving */

/* region coupling mode: compact — halo policy only (visuals owned by D2c Controls) */
:root[data-cem-coupling="compact"] {
    --cem-coupling-halo: 0.375rem;
    
}
/* endregion coupling mode: compact */

/* cem-controls.css */

:root {
    /* region control geometry — balanced (default) baseline */
    --cem-control-height: 2.5rem;
    --cem-control-padding-x: 0.75rem;
    --cem-control-padding-y: 0.5rem;
    --cem-icon-button-size: var(--cem-coupling-zone-min);
    --cem-icon-button-icon-size: 1.25rem;
    --cem-list-row-height: 3rem;
    --cem-menu-row-height: 3rem;
    --cem-table-row-height: 2.5rem;
    
    /* endregion control geometry */
}

/* region coupling mode: forgiving — larger visual geometry */
:root[data-cem-coupling="forgiving"] {
    --cem-control-height: 2.75rem;
    --cem-control-padding-x: 1rem;
    --cem-control-padding-y: 0.625rem;
    --cem-list-row-height: 3.25rem;
    --cem-menu-row-height: 3.25rem;
    
}
/* endregion coupling mode: forgiving */

/* region coupling mode: compact — smaller visual geometry */
:root[data-cem-coupling="compact"] {
    --cem-control-height: 2.25rem;
    --cem-control-padding-x: 0.625rem;
    --cem-control-padding-y: 0.375rem;
    --cem-list-row-height: 2.75rem;
    --cem-menu-row-height: 2.75rem;
    
}
/* endregion coupling mode: compact */

/* cem-shape.css */

:root {
    /* region bend basis — sharp / smooth / round / circle plus active alias */
    --cem-bend-sharp: 0;
    --cem-bend-smooth: var(--cem-dim-x-small);
    --cem-bend-round: calc(var(--cem-shape-height, var(--cem-control-height)) / 2);
    --cem-bend-circle: 50%;
    --cem-bend: var(--cem-bend-smooth);
    
    /* endregion bend basis */

    /* region semantic endpoints — role-first product contract */
    --cem-bend-control: var(--cem-bend);
    --cem-bend-surface: var(--cem-dim-small);
    --cem-bend-overlay: var(--cem-bend);
    --cem-bend-field: var(--cem-bend-control);
    --cem-bend-modal: calc(var(--cem-dim-large) + var(--cem-dim-xx-small));
    --cem-bend-control-round-ends: var(--cem-bend-round);
    --cem-bend-media: var(--cem-bend);
    --cem-bend-avatar: var(--cem-bend-circle);
    
    /* endregion semantic endpoints */

    /* region pattern tokens — asymmetric attachment */
    --cem-bend-attached-edge: var(--cem-bend-sharp);
    --cem-bend-free-edge: var(--cem-bend-modal);
    
    /* endregion pattern tokens */

    /* region action component bindings — geometry owned by D3 */
    --cem-action-border-radius: var(--cem-bend-control);
    
    /* endregion action component bindings */
}

/* region shape mode: sharp — technical, precise brand expression */
:root[data-cem-shape="sharp"] {
    --cem-bend: var(--cem-bend-sharp);
    --cem-bend-control: var(--cem-bend);
    --cem-bend-surface: var(--cem-bend-smooth);
    --cem-bend-overlay: var(--cem-bend-smooth);
    
}
/* endregion shape mode: sharp */

/* region shape mode: round — consumer, welcoming brand expression */
:root[data-cem-shape="round"] {
    --cem-bend: var(--cem-bend-smooth);
    --cem-bend-surface: var(--cem-dim-medium);
    --cem-bend-overlay: var(--cem-bend-smooth);
    
}
/* endregion shape mode: round */

/* cem-layering.css */

:root {
    /* region basis rungs — signed depth ladder as box-shadow recipes (NOT z-index) */
    --cem-recess-2: inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.04);
    --cem-recess-1: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    --cem-elevation-0: none;
    --cem-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
    --cem-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --cem-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08);
    --cem-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.10);
    
    /* endregion basis rungs */

    /* region semantic endpoints — required product-facing contract */
    --cem-layer-back: var(--cem-recess-1);
    --cem-layer-base: var(--cem-elevation-0);
    --cem-layer-work: var(--cem-elevation-1);
    --cem-layer-overlay: var(--cem-elevation-3);
    --cem-layer-command: var(--cem-elevation-4);
    
    /* endregion semantic endpoints */

    /* region optional semantic endpoints — back-deep / work-floating */
    --cem-layer-back-deep: var(--cem-recess-2);
    --cem-layer-work-floating: var(--cem-elevation-2);
    
    /* endregion optional semantic endpoints */
}

/* region forced-colors fallback — collapse rungs; tier signal carried by D5 contour and spatial isolation */
@media (forced-colors: active) {
    :root {
        --cem-recess-2: none;
        --cem-recess-1: none;
        --cem-elevation-0: none;
        --cem-elevation-1: none;
        --cem-elevation-2: none;
        --cem-elevation-3: none;
        --cem-elevation-4: none;
        
    }
}
/* endregion forced-colors fallback */

/* cem-stroke.css */

:root {
    /* region stroke basis — none / hair / standard / strong */
    --cem-stroke-none: 0px;
    --cem-stroke-hair: 1px;
    --cem-stroke-standard: 2px;
    --cem-stroke-strong: 3px;
    
    /* endregion stroke basis */

    /* region semantic endpoints — boundary / divider / focus / selected / target / indicator-offset */
    --cem-stroke-boundary: var(--cem-stroke-hair);
    --cem-stroke-boundary-strong: var(--cem-stroke-standard);
    --cem-stroke-divider: var(--cem-stroke-hair);
    --cem-stroke-grid: var(--cem-stroke-divider);
    --cem-stroke-focus: var(--cem-stroke-standard);
    --cem-stroke-selected: var(--cem-stroke-standard);
    --cem-stroke-target: var(--cem-stroke-standard);
    --cem-stroke-indicator-offset: 2px;
    
    /* endregion semantic endpoints */

    /* region zebra pattern geometry — angle only (strip-size and colors owned by D0) */
    --cem-zebra-angle: 45deg;
    
    /* endregion zebra pattern geometry */

    /* region ring recipes — box-shadow composition referencing D0 zebra tokens */
    --cem-ring-zebra-3: 0 0 0 calc(1 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-1), 0 0 0 calc(2 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-2), 0 0 0 calc(3 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-3);
    --cem-ring-zebra-4: 0 0 0 calc(1 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-0), 0 0 0 calc(2 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-1), 0 0 0 calc(3 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-2), 0 0 0 calc(4 * var(--cem-zebra-strip-size)) var(--cem-zebra-color-3);
    
    /* endregion ring recipes */
}

/* region forced-colors fallback — collapse rings to a single Highlight outline (Principle P4) */
@media (forced-colors: active) {
    :root {
        --cem-ring-zebra-3: 0 0 0 var(--cem-stroke-focus) Highlight;
        --cem-ring-zebra-4: 0 0 0 var(--cem-stroke-focus) Highlight;
        
    }
}
/* endregion forced-colors fallback */

/* cem-voice-fonts-typography.css */

:root {
    /* region 1) fontography — semantic family stacks */
    --cem-fontography-reading-family: "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --cem-fontography-ui-family: var(--cem-fontography-reading-family);
    --cem-fontography-script-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "Noto Sans Mono", monospace;
    --cem-fontography-initialism-family: "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", var(--cem-fontography-ui-family);
    --cem-fontography-brand-family: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
    
    /* endregion fontography */

    /* region 2) thickness — 7-step weight scale */
    --cem-thickness-xx-light: 100;
    --cem-thickness-x-light: 200;
    --cem-thickness-light: 300;
    --cem-thickness-normal: 400;
    --cem-thickness-bold: 700;
    --cem-thickness-x-bold: 800;
    --cem-thickness-xx-bold: 900;
    
    /* endregion thickness */

    /* region 3) size — 7-step rem-based size scale */
    --cem-typography-size-xxs: 0.75rem;
    --cem-typography-size-xs: 0.8125rem;
    --cem-typography-size-s: 0.875rem;
    --cem-typography-size-m: 1rem;
    --cem-typography-size-l: 1.125rem;
    --cem-typography-size-xl: 1.375rem;
    --cem-typography-size-xxl: 1.75rem;
    
    /* endregion size */

    /* region 4) line-height primitives */
    --cem-typography-line-height-reading: 1.55;
    --cem-typography-line-height-ui: 1.2;
    --cem-typography-line-height-script: 1.4;
    --cem-typography-line-height-badge: 1;
    
    /* endregion line-height */

    /* region 5) letter-spacing primitives */
    --cem-typography-letter-spacing-reading: normal;
    --cem-typography-letter-spacing-ui: 0.01em;
    --cem-typography-letter-spacing-caps: 0.08em;
    
    /* endregion letter-spacing */

    /* region 6) typography feature policies */
    --cem-typography-feature-numeric-data: tabular-nums lining-nums;
    --cem-typography-feature-ligatures-script: none;
    --cem-typography-feature-optical-sizing: auto;
    
    /* endregion feature policies */

    /* region 7) reading ergonomics */
    --cem-typography-reading-measure-max: 65ch;
    --cem-typography-reading-paragraph-gap: 0.75em;
    
    /* endregion reading ergonomics */

    /* region 8) voice — ink-thickness (drives font-weight) */
    --cem-voice-whisper-ink-thickness: var(--cem-thickness-xx-light);
    --cem-voice-soft-ink-thickness: var(--cem-thickness-x-light);
    --cem-voice-gentle-ink-thickness: var(--cem-thickness-light);
    --cem-voice-regular-ink-thickness: var(--cem-thickness-normal);
    --cem-voice-firm-ink-thickness: var(--cem-thickness-bold);
    --cem-voice-strong-ink-thickness: var(--cem-thickness-x-bold);
    --cem-voice-loud-ink-thickness: var(--cem-thickness-xx-bold);
    
    /* endregion voice ink-thickness */

    /* region 9) voice — icon-stroke multipliers */
    --cem-voice-whisper-icon-stroke-multiplier: 0.90;
    --cem-voice-soft-icon-stroke-multiplier: 0.95;
    --cem-voice-gentle-icon-stroke-multiplier: 1.00;
    --cem-voice-regular-icon-stroke-multiplier: 1.00;
    --cem-voice-firm-icon-stroke-multiplier: 1.10;
    --cem-voice-strong-icon-stroke-multiplier: 1.20;
    --cem-voice-loud-icon-stroke-multiplier: 1.30;
    
    /* endregion voice icon-stroke */

    /* region 10) voice — speech-volume (TTS adapter input, not screen-reader) */
    --cem-voice-whisper-speech-volume: 0.65;
    --cem-voice-soft-speech-volume: 0.75;
    --cem-voice-gentle-speech-volume: 0.85;
    --cem-voice-regular-speech-volume: 1.00;
    --cem-voice-firm-speech-volume: 1.00;
    --cem-voice-strong-speech-volume: 1.00;
    --cem-voice-loud-speech-volume: 1.00;
    
    /* endregion voice speech-volume */

    /* region 11) voice — speech-rate */
    --cem-voice-whisper-speech-rate: 1.00;
    --cem-voice-soft-speech-rate: 1.00;
    --cem-voice-gentle-speech-rate: 1.00;
    --cem-voice-regular-speech-rate: 1.00;
    --cem-voice-firm-speech-rate: 0.98;
    --cem-voice-strong-speech-rate: 0.96;
    --cem-voice-loud-speech-rate: 0.94;
    
    /* endregion voice speech-rate */

    /* region 12) voice — speech-pitch */
    --cem-voice-whisper-speech-pitch: 0.95;
    --cem-voice-soft-speech-pitch: 0.98;
    --cem-voice-gentle-speech-pitch: 1.00;
    --cem-voice-regular-speech-pitch: 1.00;
    --cem-voice-firm-speech-pitch: 1.03;
    --cem-voice-strong-speech-pitch: 1.06;
    --cem-voice-loud-speech-pitch: 1.10;
    
    /* endregion voice speech-pitch */

    /* region 13) voice — ssml-emphasis */
    --cem-voice-whisper-ssml-emphasis: reduced;
    --cem-voice-soft-ssml-emphasis: reduced;
    --cem-voice-gentle-ssml-emphasis: moderate;
    --cem-voice-regular-ssml-emphasis: moderate;
    --cem-voice-firm-ssml-emphasis: moderate;
    --cem-voice-strong-ssml-emphasis: strong;
    --cem-voice-loud-ssml-emphasis: strong;
    
    /* endregion voice ssml-emphasis */

    /* region 14) semantic role endpoints — 8 roles × ~9-10 properties each */
    --cem-typography-reading-font-family: var(--cem-fontography-reading-family);
    --cem-typography-reading-font-size: var(--cem-typography-size-m);
    --cem-typography-reading-line-height: var(--cem-typography-line-height-reading);
    --cem-typography-reading-letter-spacing: var(--cem-typography-letter-spacing-reading);
    --cem-typography-reading-font-weight: var(--cem-voice-regular-ink-thickness);
    --cem-typography-reading-speech-volume: var(--cem-voice-regular-speech-volume);
    --cem-typography-reading-speech-rate: var(--cem-voice-regular-speech-rate);
    --cem-typography-reading-speech-pitch: var(--cem-voice-regular-speech-pitch);
    --cem-typography-reading-ssml-emphasis: var(--cem-voice-regular-ssml-emphasis);
    --cem-typography-ui-font-family: var(--cem-fontography-ui-family);
    --cem-typography-ui-font-size: var(--cem-typography-size-m);
    --cem-typography-ui-line-height: var(--cem-typography-line-height-ui);
    --cem-typography-ui-letter-spacing: var(--cem-typography-letter-spacing-ui);
    --cem-typography-ui-font-weight: var(--cem-voice-gentle-ink-thickness);
    --cem-typography-ui-speech-volume: var(--cem-voice-gentle-speech-volume);
    --cem-typography-ui-speech-rate: var(--cem-voice-gentle-speech-rate);
    --cem-typography-ui-speech-pitch: var(--cem-voice-gentle-speech-pitch);
    --cem-typography-ui-ssml-emphasis: var(--cem-voice-gentle-ssml-emphasis);
    --cem-typography-tag-font-family: var(--cem-fontography-ui-family);
    --cem-typography-tag-font-size: var(--cem-typography-size-s);
    --cem-typography-tag-line-height: var(--cem-typography-line-height-ui);
    --cem-typography-tag-letter-spacing: var(--cem-typography-letter-spacing-ui);
    --cem-typography-tag-font-weight: var(--cem-voice-firm-ink-thickness);
    --cem-typography-tag-speech-volume: var(--cem-voice-firm-speech-volume);
    --cem-typography-tag-speech-rate: var(--cem-voice-firm-speech-rate);
    --cem-typography-tag-speech-pitch: var(--cem-voice-firm-speech-pitch);
    --cem-typography-tag-ssml-emphasis: var(--cem-voice-firm-ssml-emphasis);
    --cem-typography-script-font-family: var(--cem-fontography-script-family);
    --cem-typography-script-font-size: var(--cem-typography-size-s);
    --cem-typography-script-line-height: var(--cem-typography-line-height-script);
    --cem-typography-script-letter-spacing: normal;
    --cem-typography-script-font-weight: var(--cem-voice-regular-ink-thickness);
    --cem-typography-script-font-variant-ligatures: var(--cem-typography-feature-ligatures-script);
    --cem-typography-script-speech-volume: var(--cem-voice-regular-speech-volume);
    --cem-typography-script-speech-rate: var(--cem-voice-gentle-speech-rate);
    --cem-typography-script-speech-pitch: var(--cem-voice-gentle-speech-pitch);
    --cem-typography-script-ssml-emphasis: var(--cem-voice-gentle-ssml-emphasis);
    --cem-typography-data-font-family: var(--cem-fontography-ui-family);
    --cem-typography-data-font-size: var(--cem-typography-size-m);
    --cem-typography-data-line-height: var(--cem-typography-line-height-ui);
    --cem-typography-data-letter-spacing: var(--cem-typography-letter-spacing-ui);
    --cem-typography-data-font-weight: var(--cem-voice-regular-ink-thickness);
    --cem-typography-data-font-variant-numeric: var(--cem-typography-feature-numeric-data);
    --cem-typography-data-speech-volume: var(--cem-voice-regular-speech-volume);
    --cem-typography-data-speech-rate: var(--cem-voice-firm-speech-rate);
    --cem-typography-data-speech-pitch: var(--cem-voice-regular-speech-pitch);
    --cem-typography-data-ssml-emphasis: var(--cem-voice-regular-ssml-emphasis);
    --cem-typography-initialism-font-family: var(--cem-fontography-initialism-family);
    --cem-typography-initialism-font-size: var(--cem-typography-size-s);
    --cem-typography-initialism-line-height: var(--cem-typography-line-height-badge);
    --cem-typography-initialism-letter-spacing: var(--cem-typography-letter-spacing-caps);
    --cem-typography-initialism-font-weight: var(--cem-voice-firm-ink-thickness);
    --cem-typography-initialism-text-transform: uppercase;
    --cem-typography-initialism-speech-volume: var(--cem-voice-firm-speech-volume);
    --cem-typography-initialism-speech-rate: var(--cem-voice-firm-speech-rate);
    --cem-typography-initialism-speech-pitch: var(--cem-voice-firm-speech-pitch);
    --cem-typography-initialism-ssml-emphasis: var(--cem-voice-firm-ssml-emphasis);
    --cem-typography-iconized-font-family: var(--cem-fontography-initialism-family);
    --cem-typography-iconized-font-size: calc(var(--cem-typography-size-m) * 2);
    --cem-typography-iconized-line-height: var(--cem-typography-line-height-badge);
    --cem-typography-iconized-letter-spacing: var(--cem-typography-letter-spacing-caps);
    --cem-typography-iconized-font-weight: var(--cem-voice-strong-ink-thickness);
    --cem-typography-iconized-text-transform: uppercase;
    --cem-typography-iconized-speech-volume: var(--cem-voice-strong-speech-volume);
    --cem-typography-iconized-speech-rate: var(--cem-voice-strong-speech-rate);
    --cem-typography-iconized-speech-pitch: var(--cem-voice-strong-speech-pitch);
    --cem-typography-iconized-ssml-emphasis: var(--cem-voice-strong-ssml-emphasis);
    --cem-typography-brand-font-family: var(--cem-fontography-brand-family);
    --cem-typography-brand-font-size: var(--cem-typography-size-xxl);
    --cem-typography-brand-line-height: 1.1;
    --cem-typography-brand-letter-spacing: normal;
    --cem-typography-brand-font-weight: var(--cem-voice-strong-ink-thickness);
    --cem-typography-brand-speech-volume: var(--cem-voice-strong-speech-volume);
    --cem-typography-brand-speech-rate: var(--cem-voice-strong-speech-rate);
    --cem-typography-brand-speech-pitch: var(--cem-voice-strong-speech-pitch);
    --cem-typography-brand-ssml-emphasis: var(--cem-voice-strong-ssml-emphasis);
    
    /* endregion semantic role endpoints */
}

/* region dark theme — lighter ink to compensate for perceived boldness on dark backgrounds */
.cem-theme-dark, [data-theme="cem-theme-dark"],
.cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {
    --cem-voice-whisper-ink-thickness: 100;
    --cem-voice-soft-ink-thickness: 180;
    --cem-voice-gentle-ink-thickness: 280;
    --cem-voice-regular-ink-thickness: 350;
    --cem-voice-firm-ink-thickness: 650;
    --cem-voice-strong-ink-thickness: 750;
    --cem-voice-loud-ink-thickness: 850;
    
}
/* endregion dark theme */

/* region contrast theme — stronger ink for visibility (overrides dark for shared rows) */
.cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"],
.cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {
    --cem-voice-gentle-ink-thickness: 400;
    --cem-voice-regular-ink-thickness: 500;
    --cem-voice-firm-ink-thickness: 750;
    --cem-voice-strong-ink-thickness: 850;
    
}
/* endregion contrast theme */

/* cem-timing.css */

:root {
    /* region durations: cem-duration-[bucket] */
    --cem-duration-instant: 50ms;
    --cem-duration-noticeable: 250ms;
    --cem-duration-lingering: 300ms;
    --cem-duration-action: var(--cem-duration-noticeable);
    --cem-duration-overlay: var(--cem-duration-lingering);
    
    /* endregion durations */

    /* region easings: cem-easing-[intent] */
    --cem-easing-smooth: ease-in-out;
    --cem-easing-start-smooth: ease-in;
    --cem-easing-end-smooth: ease-out;
    --cem-easing-highlighted: cubic-bezier(0.2, 0, 0, 1);
    --cem-easing-highlighted-start: cubic-bezier(0.3, 0, 0.8, 0.15);
    --cem-easing-highlighted-end: cubic-bezier(0.05, 0.7, 0.1, 1);
    --cem-easing-uniform: linear;
    --cem-easing-classic: ease;
    
    /* endregion easings */
}

/* region prefers-reduced-motion: shorten durations, preserve ordering */
@media (prefers-reduced-motion: reduce) {
:root {
    --cem-duration-instant: 0ms;
    --cem-duration-noticeable: 50ms;
    --cem-duration-lingering: 100ms;
    
}
}
/* endregion prefers-reduced-motion */