@epa-wg/custom-element-dist 0.0.37 → 0.0.39

package/src/css/cem-combined.css

@@ -0,0 +1,1058 @@
+/* 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 */