/* 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;
  --cem-color-blue-l: #d7e3ff;
  --cem-color-blue-d: #002f65;
  --cem-color-blue-xd: #001b3f;
  --cem-color-brown-xl: #d7ccc8;
  --cem-color-brown-l: #a1887f;
  --cem-color-brown-d: #4e342e;
  --cem-color-brown-xd: #3e2723;
  --cem-color-cyan-xl: #f1fefe;
  --cem-color-cyan-l: #00fbfb;
  --cem-color-cyan-d: #006a6a;
  --cem-color-cyan-xd: #001010;
  --cem-color-grey-l: #f1f1eb;
  --cem-color-grey-d: #1a1c18;
  --cem-color-orange-xl: #f0f070;
  --cem-color-orange-l: #ffe082;
  --cem-color-orange-d: #723600;
  --cem-color-orange-xd: #502400;
  --cem-color-purple-xl: #f3e5f5;
  --cem-color-purple-l: #e1bee7;
  --cem-color-purple-d: #6a1b9a;
  --cem-color-purple-xd: #4a148c;
  --cem-color-red-xl: #ffb4ab;
  --cem-color-red-l: #ba1a1a;
  --cem-color-red-d: #690005;
  --cem-color-red-xd: #410002;
  --cem-color-visitedtext-30-black: color-mix(in srgb, VisitedText 30%, black);
  --cem-color-visitedtext-30-white: color-mix(in srgb, VisitedText 30%, white);
  --cem-color-mark-30-black: color-mix(in srgb, Mark 30%, black);
  --cem-color-mark-30-white: color-mix(in srgb, Mark 30%, white);
  --cem-color-canvastext-30-purple: color-mix(in srgb, CanvasText 30%, purple );
  --cem-color-canvastext-30-lightpink: color-mix(in srgb, CanvasText 30%, lightpink);
  --cem-color-red-30-black: color-mix(in srgb, red 30%, black);
  --cem-color-red-30-white: color-mix(in srgb, red 30%, white);
  --cem-color-white: white;
  /* endregion branded colors */

  /* region emotion palette: cem-palette-[emotion]-[shift] (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 emotion palette */

  /* 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);
  --cem-zebra-strip-size: 2px;
  /* endregion zebra base */

  /* region input indicator stripe colors */
  --cem-input-background-color: color-mix(in srgb, var(--cem-palette-comfort-text) 4%, var(--cem-palette-comfort));
  --cem-input-indicator-anchor-color: color-mix(in srgb, var(--cem-palette-comfort-text) 62%, transparent);
  --cem-input-indicator-anchor-hover-color: var(--cem-palette-comfort-text);
  --cem-input-indicator-anchor-disabled-color: color-mix(in srgb, var(--cem-palette-conservative-text-x) 38%, transparent);
  --cem-input-indicator-anchor-readonly-color: color-mix(in srgb, var(--cem-palette-comfort-text) 50%, transparent);
  --cem-input-indicator-anchor-pending-color: var(--cem-palette-enthusiasm-x);
  --cem-input-indicator-anchor-invalid-color: var(--cem-palette-danger);
  --cem-input-indicator-anchor-invalid-hover-color: var(--cem-palette-danger-x);
  --cem-input-indicator-selection-color: var(--cem-palette-creativity-x);
  --cem-input-indicator-indeterminate-color: var(--cem-palette-enthusiasm-x);
  /* endregion input indicator stripe colors */

  /* region select popup and option state colors */
  --cem-select-popup-background: var(--cem-palette-comfort);
  --cem-select-popup-text: var(--cem-palette-comfort-text);
  --cem-select-popup-border-color: var(--cem-input-indicator-anchor-color);
  --cem-select-option-hover-background: var(--cem-action-contextual-hover-background);
  --cem-select-option-hover-text: var(--cem-action-contextual-hover-text);
  --cem-select-option-active-background: var(--cem-palette-trust);
  --cem-select-option-active-text: var(--cem-palette-trust-text);
  --cem-select-option-selected-background: var(--cem-palette-creativity);
  --cem-select-option-selected-text: var(--cem-palette-creativity-text);
  --cem-select-option-disabled-background: var(--cem-action-contextual-disabled-background);
  --cem-select-option-disabled-text: var(--cem-action-contextual-disabled-text);
  --cem-select-group-text: var(--cem-palette-conservative-text-x);
  /* endregion select popup and option state colors */

  /* region navigation item state colors */
  --cem-navigation-item-default-background: transparent;
  --cem-navigation-item-default-text: var(--cem-palette-comfort-text);
  --cem-navigation-item-hover-background: var(--cem-action-contextual-hover-background);
  --cem-navigation-item-hover-text: var(--cem-action-contextual-hover-text);
  --cem-navigation-item-active-background: var(--cem-action-contextual-active-background);
  --cem-navigation-item-active-text: var(--cem-action-contextual-active-text);
  --cem-navigation-item-current-background: var(--cem-action-primary-default-background);
  --cem-navigation-item-current-text: var(--cem-action-primary-default-text);
  --cem-navigation-item-current-hover-background: var(--cem-action-primary-hover-background);
  --cem-navigation-item-current-hover-text: var(--cem-action-primary-hover-text);
  --cem-navigation-item-current-active-background: var(--cem-action-primary-active-background);
  --cem-navigation-item-current-active-text: var(--cem-action-primary-active-text);
  --cem-navigation-item-disabled-background: var(--cem-action-contextual-disabled-background);
  --cem-navigation-item-disabled-text: var(--cem-action-contextual-disabled-text);
  /* endregion navigation item state colors */

  /* region interactive content state colors */
  --cem-content-interaction-default-background: transparent;
  --cem-content-interaction-default-text: var(--cem-palette-comfort-text);
  --cem-content-interaction-hover-background: var(--cem-action-contextual-hover-background);
  --cem-content-interaction-hover-text: var(--cem-action-contextual-hover-text);
  --cem-content-interaction-active-background: var(--cem-action-contextual-active-background);
  --cem-content-interaction-active-text: var(--cem-action-contextual-active-text);
  --cem-content-interaction-selected-background: var(--cem-palette-creativity);
  --cem-content-interaction-selected-text: var(--cem-palette-creativity-text);
  --cem-content-interaction-selected-hover-background: color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x));
  --cem-content-interaction-selected-hover-text: var(--cem-palette-creativity-text);
  --cem-content-interaction-selected-active-background: color-mix(in srgb, var(--cem-palette-creativity) 45%, var(--cem-palette-creativity-x));
  --cem-content-interaction-selected-active-text: var(--cem-palette-creativity-text);
  --cem-content-interaction-disabled-background: var(--cem-action-contextual-disabled-background);
  --cem-content-interaction-disabled-text: var(--cem-action-contextual-disabled-text);
  --cem-content-interaction-current-indicator-color: var(--cem-zebra-color-2);
  /* endregion interactive content state colors */

  /* region separator colors */
  --cem-separator-color: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, transparent);
  /* endregion separator colors */

  /* region progress indicator colors */
  --cem-progress-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
  --cem-progress-indicator-color: var(--cem-palette-enthusiasm-x);
  /* endregion progress indicator colors */

  /* region workflow step colors */
  --cem-workflow-step-completed-indicator-color: var(--cem-palette-trust);
  --cem-workflow-step-invalid-indicator-color: var(--cem-palette-danger);
  --cem-workflow-connector-default-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
  --cem-workflow-connector-completed-color: var(--cem-palette-trust);
  /* endregion workflow step colors */

  /* region slider input colors */
  --cem-slider-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
  --cem-slider-active-track-color: var(--cem-palette-enthusiasm-x);
  --cem-slider-thumb-color: var(--cem-palette-enthusiasm-x);
  --cem-slider-thumb-hover-color: var(--cem-action-primary-hover-background);
  --cem-slider-thumb-active-color: var(--cem-action-primary-active-background);
  --cem-slider-disabled-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 14%, transparent);
  --cem-slider-disabled-thumb-color: var(--cem-action-contextual-disabled-text);
  --cem-slider-tick-color: var(--cem-palette-comfort-text);
  /* endregion slider input colors */

  /* 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] */
    --cem-action-explicit-disabled-background: 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));
    --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));
    --cem-action-explicit-editable-text: var(--cem-palette-trust-text);
    --cem-action-explicit-default-background: 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));
    --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));
    --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));
    --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));
    --cem-action-explicit-pending-text: var(--cem-palette-trust-text-x);
    --cem-action-primary-disabled-background: 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));
    --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));
    --cem-action-primary-editable-text: var(--cem-palette-creativity-text);
    --cem-action-primary-default-background: 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));
    --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));
    --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));
    --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));
    --cem-action-primary-pending-text: var(--cem-palette-creativity-text-x);
    --cem-action-contextual-disabled-background: 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));
    --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));
    --cem-action-contextual-editable-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-default-background: 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));
    --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));
    --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));
    --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));
    --cem-action-contextual-pending-text: var(--cem-palette-comfort-text-x);
    --cem-action-alternate-disabled-background: 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));
    --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));
    --cem-action-alternate-editable-text: var(--cem-palette-enthusiasm-text);
    --cem-action-alternate-default-background: 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));
    --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));
    --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));
    --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));
    --cem-action-alternate-pending-text: var(--cem-palette-enthusiasm-text-x);
    --cem-action-destructive-disabled-background: 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));
    --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));
    --cem-action-destructive-editable-text: var(--cem-palette-danger-text);
    --cem-action-destructive-default-background: 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));
    --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));
    --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));
    --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));
    --cem-action-destructive-pending-text: var(--cem-palette-danger-text-x);
    /* action contour colors resolve in the active theme */
    --cem-action-primary-outline-color: var(--cem-palette-creativity-x);
    --cem-action-explicit-outline-color: var(--cem-palette-trust-x);
    --cem-action-contextual-outline-color: var(--cem-palette-comfort-x);
    --cem-action-alternate-outline-color: var(--cem-palette-enthusiasm-x);
    --cem-action-destructive-outline-color: var(--cem-palette-danger-x);
    --cem-action-pending-outline-image: var(--cem-action-primary-pending-image);
    /* pending gradient color inputs */
    --cem-pending-color-1: var(--cem-action-primary-pending-background);
    --cem-pending-color-2: var(--cem-action-primary-pending-stripe-background);
    --cem-action-primary-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-primary-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-primary-active-background) 80%, black));
    --cem-action-explicit-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-explicit-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-explicit-active-background) 80%, black));
    --cem-action-contextual-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-contextual-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-contextual-active-background) 80%, black));
    --cem-action-alternate-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-alternate-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-alternate-active-background) 80%, black));
    --cem-action-destructive-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-destructive-active-background) 75%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-destructive-active-background) 50%, black));
    --cem-action-primary-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) 95% 100%);
    --cem-action-explicit-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) 95% 100%);
    --cem-action-contextual-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) 95% 100%);
    --cem-action-alternate-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) 95% 100%);
    --cem-action-destructive-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) 0% 5%, light-dark(var(--cem-color-red-xl), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x)) 50%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) 45% 55%, light-dark(var(--cem-color-red-xl), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x)) 50%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) 95% 100%);
    --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);
    /* input indicator colors resolve against the active theme palette */
    --cem-input-background-color: color-mix(in srgb, var(--cem-palette-comfort-text) 4%, var(--cem-palette-comfort));
    --cem-input-indicator-anchor-color: color-mix(in srgb, var(--cem-palette-comfort-text) 62%, transparent);
    --cem-input-indicator-anchor-hover-color: var(--cem-palette-comfort-text);
    --cem-input-indicator-anchor-disabled-color: color-mix(in srgb, var(--cem-palette-conservative-text-x) 38%, transparent);
    --cem-input-indicator-anchor-readonly-color: color-mix(in srgb, var(--cem-palette-comfort-text) 50%, transparent);
    --cem-input-indicator-anchor-pending-color: var(--cem-palette-enthusiasm-x);
    --cem-input-indicator-anchor-invalid-color: var(--cem-palette-danger);
    --cem-input-indicator-anchor-invalid-hover-color: var(--cem-palette-danger-x);
    --cem-input-indicator-selection-color: var(--cem-palette-creativity-x);
    --cem-input-indicator-indeterminate-color: var(--cem-palette-enthusiasm-x);
    /* select popup and option state colors resolve against the active theme palette */
    --cem-select-popup-background: var(--cem-palette-comfort);
    --cem-select-popup-text: var(--cem-palette-comfort-text);
    --cem-select-popup-border-color: var(--cem-input-indicator-anchor-color);
    --cem-select-option-hover-background: var(--cem-action-contextual-hover-background);
    --cem-select-option-hover-text: var(--cem-action-contextual-hover-text);
    --cem-select-option-active-background: var(--cem-palette-trust);
    --cem-select-option-active-text: var(--cem-palette-trust-text);
    --cem-select-option-selected-background: var(--cem-palette-creativity);
    --cem-select-option-selected-text: var(--cem-palette-creativity-text);
    --cem-select-option-disabled-background: var(--cem-action-contextual-disabled-background);
    --cem-select-option-disabled-text: var(--cem-action-contextual-disabled-text);
    --cem-select-group-text: var(--cem-palette-conservative-text-x);
    /* navigation item state colors resolve against the active theme palette */
    --cem-navigation-item-default-background: transparent;
    --cem-navigation-item-default-text: var(--cem-palette-comfort-text);
    --cem-navigation-item-hover-background: var(--cem-action-contextual-hover-background);
    --cem-navigation-item-hover-text: var(--cem-action-contextual-hover-text);
    --cem-navigation-item-active-background: var(--cem-action-contextual-active-background);
    --cem-navigation-item-active-text: var(--cem-action-contextual-active-text);
    --cem-navigation-item-current-background: var(--cem-action-primary-default-background);
    --cem-navigation-item-current-text: var(--cem-action-primary-default-text);
    --cem-navigation-item-current-hover-background: var(--cem-action-primary-hover-background);
    --cem-navigation-item-current-hover-text: var(--cem-action-primary-hover-text);
    --cem-navigation-item-current-active-background: var(--cem-action-primary-active-background);
    --cem-navigation-item-current-active-text: var(--cem-action-primary-active-text);
    --cem-navigation-item-disabled-background: var(--cem-action-contextual-disabled-background);
    --cem-navigation-item-disabled-text: var(--cem-action-contextual-disabled-text);
    /* interactive content state colors resolve against the active theme palette */
    --cem-content-interaction-default-background: transparent;
    --cem-content-interaction-default-text: var(--cem-palette-comfort-text);
    --cem-content-interaction-hover-background: var(--cem-action-contextual-hover-background);
    --cem-content-interaction-hover-text: var(--cem-action-contextual-hover-text);
    --cem-content-interaction-active-background: var(--cem-action-contextual-active-background);
    --cem-content-interaction-active-text: var(--cem-action-contextual-active-text);
    --cem-content-interaction-selected-background: var(--cem-palette-creativity);
    --cem-content-interaction-selected-text: var(--cem-palette-creativity-text);
    --cem-content-interaction-selected-hover-background: color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x));
    --cem-content-interaction-selected-hover-text: var(--cem-palette-creativity-text);
    --cem-content-interaction-selected-active-background: color-mix(in srgb, var(--cem-palette-creativity) 45%, var(--cem-palette-creativity-x));
    --cem-content-interaction-selected-active-text: var(--cem-palette-creativity-text);
    --cem-content-interaction-disabled-background: var(--cem-action-contextual-disabled-background);
    --cem-content-interaction-disabled-text: var(--cem-action-contextual-disabled-text);
    --cem-content-interaction-current-indicator-color: var(--cem-zebra-color-2);
    /* separator colors resolve against the active theme surface text */
    --cem-separator-color: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, transparent);
    /* progress colors resolve against the active theme palette */
    --cem-progress-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
    --cem-progress-indicator-color: var(--cem-palette-enthusiasm-x);
    /* workflow colors resolve against the active theme palette */
    --cem-workflow-step-completed-indicator-color: var(--cem-palette-trust);
    --cem-workflow-step-invalid-indicator-color: var(--cem-palette-danger);
    --cem-workflow-connector-default-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
    --cem-workflow-connector-completed-color: var(--cem-palette-trust);
    /* slider colors resolve against the active theme palette */
    --cem-slider-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
    --cem-slider-active-track-color: var(--cem-palette-enthusiasm-x);
    --cem-slider-thumb-color: var(--cem-palette-enthusiasm-x);
    --cem-slider-thumb-hover-color: var(--cem-action-primary-hover-background);
    --cem-slider-thumb-active-color: var(--cem-action-primary-active-background);
    --cem-slider-disabled-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 14%, transparent);
    --cem-slider-disabled-thumb-color: var(--cem-action-contextual-disabled-text);
    --cem-slider-tick-color: var(--cem-palette-comfort-text);
    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 per theme mode (§8.2 cem-zebra-mode-mapping) */
  .cem-theme-native, [data-theme="cem-theme-native"] {
    [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; }
  }
  .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); }
  }
  .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 */

  /* region native theme overrides */
  .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;
    
    --cem-action-primary-pending-stripe-background: var(--cem-action-primary-active-background);
    --cem-action-explicit-pending-stripe-background: var(--cem-action-explicit-active-background);
    --cem-action-contextual-pending-stripe-background: var(--cem-action-contextual-active-background);
    --cem-action-alternate-pending-stripe-background: var(--cem-action-alternate-active-background);
    
    --cem-separator-color: CanvasText;
    
    --cem-progress-track-color: GrayText;
    --cem-progress-indicator-color: Highlight;
    
    --cem-workflow-step-completed-indicator-color: Highlight;
    --cem-workflow-step-invalid-indicator-color: Mark;
    --cem-workflow-connector-default-color: GrayText;
    --cem-workflow-connector-completed-color: Highlight;
    
    --cem-slider-track-color: GrayText;
    --cem-slider-active-track-color: Highlight;
    --cem-slider-thumb-color: CanvasText;
    --cem-slider-thumb-hover-color: Highlight;
    --cem-slider-thumb-active-color: Highlight;
    --cem-slider-disabled-track-color: GrayText;
    --cem-slider-disabled-thumb-color: GrayText;
    --cem-slider-tick-color: CanvasText;
    [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 native */

  /* Contrast action surfaces and ink come from the canonical state columns. */
  [data-theme="cem-theme-contrast-light"], [data-theme="cem-theme-contrast-dark"], .cem-theme-contrast-light, .cem-theme-contrast-dark {
    --cem-action-explicit-disabled-background: var(--cem-palette-comfort);
    --cem-action-explicit-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-explicit-readonly-background: var(--cem-palette-comfort);
    --cem-action-explicit-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-editable-background: var(--cem-palette-comfort);
    --cem-action-explicit-editable-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-default-background: var(--cem-palette-comfort);
    --cem-action-explicit-default-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-explicit-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-hover-background: var(--cem-palette-comfort);
    --cem-action-explicit-hover-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-active-background: var(--cem-palette-comfort);
    --cem-action-explicit-active-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-pending-background: var(--cem-palette-comfort);
    --cem-action-explicit-pending-text: var(--cem-palette-comfort-text);
    --cem-action-primary-disabled-background: var(--cem-palette-comfort);
    --cem-action-primary-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-primary-readonly-background: var(--cem-palette-comfort);
    --cem-action-primary-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-primary-editable-background: var(--cem-palette-comfort);
    --cem-action-primary-editable-text: var(--cem-palette-comfort-text);
    --cem-action-primary-default-background: var(--cem-palette-comfort);
    --cem-action-primary-default-text: var(--cem-palette-comfort-text);
    --cem-action-primary-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-primary-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-primary-hover-background: var(--cem-palette-comfort);
    --cem-action-primary-hover-text: var(--cem-palette-comfort-text);
    --cem-action-primary-active-background: var(--cem-palette-comfort);
    --cem-action-primary-active-text: var(--cem-palette-comfort-text);
    --cem-action-primary-pending-background: var(--cem-palette-comfort);
    --cem-action-primary-pending-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-disabled-background: var(--cem-palette-comfort);
    --cem-action-contextual-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-contextual-readonly-background: var(--cem-palette-comfort);
    --cem-action-contextual-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-editable-background: var(--cem-palette-comfort);
    --cem-action-contextual-editable-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-default-background: var(--cem-palette-comfort);
    --cem-action-contextual-default-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-contextual-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-hover-background: var(--cem-palette-comfort);
    --cem-action-contextual-hover-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-active-background: var(--cem-palette-comfort);
    --cem-action-contextual-active-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-pending-background: var(--cem-palette-comfort);
    --cem-action-contextual-pending-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-disabled-background: var(--cem-palette-comfort);
    --cem-action-alternate-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-alternate-readonly-background: var(--cem-palette-comfort);
    --cem-action-alternate-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-editable-background: var(--cem-palette-comfort);
    --cem-action-alternate-editable-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-default-background: var(--cem-palette-comfort);
    --cem-action-alternate-default-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-alternate-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-hover-background: var(--cem-palette-comfort);
    --cem-action-alternate-hover-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-active-background: var(--cem-palette-comfort);
    --cem-action-alternate-active-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-pending-background: var(--cem-palette-comfort);
    --cem-action-alternate-pending-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-disabled-background: var(--cem-palette-comfort);
    --cem-action-destructive-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-destructive-readonly-background: var(--cem-palette-comfort);
    --cem-action-destructive-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-editable-background: var(--cem-palette-comfort);
    --cem-action-destructive-editable-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-default-background: var(--cem-palette-comfort);
    --cem-action-destructive-default-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-destructive-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-hover-background: var(--cem-palette-comfort);
    --cem-action-destructive-hover-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-active-background: var(--cem-palette-comfort);
    --cem-action-destructive-active-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-pending-background: var(--cem-palette-comfort);
    --cem-action-destructive-pending-text: var(--cem-palette-comfort-text);
    --cem-action-primary-pending-stripe-background: var(--cem-palette-comfort);
    --cem-action-explicit-pending-stripe-background: var(--cem-palette-comfort);
    --cem-action-contextual-pending-stripe-background: var(--cem-palette-comfort);
    --cem-action-alternate-pending-stripe-background: var(--cem-palette-comfort);
    --cem-action-destructive-pending-stripe-background: var(--cem-palette-comfort);
    --cem-slider-thumb-hover-color: var(--cem-palette-creativity-x);
    --cem-slider-thumb-active-color: var(--cem-palette-comfort-text);
  }

  @media (forced-colors: active) {
    &, [data-theme*="cem-theme-"], .cem-theme-native, .cem-theme-contrast-light, .cem-theme-contrast-dark, .cem-theme-light, .cem-theme-dark {
      --cem-separator-color: CanvasText;
      
      --cem-progress-track-color: GrayText;
      --cem-progress-indicator-color: Highlight;
      
      --cem-workflow-step-completed-indicator-color: Highlight;
      --cem-workflow-step-invalid-indicator-color: Mark;
      --cem-workflow-connector-default-color: GrayText;
      --cem-workflow-connector-completed-color: Highlight;
      
      --cem-slider-track-color: GrayText;
      --cem-slider-active-track-color: Highlight;
      --cem-slider-thumb-color: CanvasText;
      --cem-slider-thumb-hover-color: Highlight;
      --cem-slider-thumb-active-color: Highlight;
      --cem-slider-disabled-track-color: GrayText;
      --cem-slider-disabled-thumb-color: GrayText;
      --cem-slider-tick-color: CanvasText;
    }
  }

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


/* Pending utility: D0 colors, D5 geometry, D7 continuous motion. */
.cem-pending {
    position: relative;
    background-image: linear-gradient(var(--cem-pending-angle),
                var(--cem-pending-color-1) 0% 5%, var(--cem-pending-color-2) 20% 30%,
                var(--cem-pending-color-1) 45% 55%, var(--cem-pending-color-2) 70% 80%,
                var(--cem-pending-color-1) 95% 100%);
            background-size: var(--cem-pending-tile-size) var(--cem-pending-tile-size);
            animation-name: cem-pending-shift;
            animation-duration: var(--cem-duration-pending-cycle);
            animation-timing-function: var(--cem-easing-uniform);
            animation-iteration-count: infinite;
}
/* The theme preview uses the same contrast contour as action. */
.cem-pending::before {
    content: '';
    display: var(--cem-action-outline-display);
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding: var(--cem-stroke-pending);
    border-radius: inherit;
    background-image: var(--_cem-pending-image, var(--cem-action-pending-outline-image));
    background-size: var(--cem-pending-tile-size) var(--cem-pending-tile-size);
    mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0);
    mask-composite: exclude;
    animation: cem-pending-shift var(--cem-duration-pending-cycle) var(--cem-easing-uniform) infinite;
}
@keyframes cem-pending-shift {
    from { background-position-x: 0px; }
    to { background-position-x: var(--cem-pending-tile-size); }
}
@media (prefers-reduced-motion: reduce) {
    .cem-pending, .cem-pending::before { animation: none; }
}
@media (forced-colors: active) {
    .cem-pending::before { display: none; }
    .cem-pending {
        background-image: none;
        animation: none;
        background-color: ButtonFace !important;
        color: ButtonText !important;
        outline: var(--cem-stroke-pending) solid ButtonText;
        outline-offset: calc(-1 * var(--cem-stroke-pending));
    }
}

/* 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-height-small: 2.5rem;
  --cem-control-height-medium: 3rem;
  --cem-control-height-large: 4rem;
  --cem-control-height-x-large: 6rem;
  --cem-control-height-xx-large: 8rem;
  --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-icon-size: 2rem;
  --cem-icon-size-small: 1rem;
  --cem-icon-size-large: 3rem;
  --cem-list-row-height: 3rem;
  --cem-list-popup-rows: 8;
  --cem-menu-row-height: 3rem;
  --cem-table-row-height: 2.5rem;

        
  /* endregion control geometry */

  /* region progress graphic geometry */  --cem-progress-spinner-size: 3rem;
  --cem-progress-track-thickness: 0.25rem;

        
  /* endregion progress graphic geometry */

  /* region slider visual geometry */  --cem-slider-track-thickness: 0.25rem;
  --cem-slider-thumb-size: 1.25rem;

        
  /* endregion slider visual 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 */

/* Optional inherited size profiles; explicit geometry wins over coupling height. */

:root[data-cem-size="small"], :where([data-cem-size="small"]) {
  --cem-control-height: var(--cem-control-height-small);
}

:root[data-cem-size="medium"], :where([data-cem-size="medium"]) {
  --cem-control-height: var(--cem-control-height-medium);
}

:root[data-cem-size="large"], :where([data-cem-size="large"]) {
  --cem-control-height: var(--cem-control-height-large);
}

:root[data-cem-size="x-large"], :where([data-cem-size="x-large"]) {
  --cem-control-height: var(--cem-control-height-x-large);
}

:root[data-cem-size="xx-large"], :where([data-cem-size="xx-large"]) {
  --cem-control-height: var(--cem-control-height-xx-large);
}

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

/* Re-resolve height-dependent geometry at local profile boundaries. */
:where([data-cem-size], [size]) {
  --cem-bend-round: calc(var(--cem-shape-height, var(--cem-control-height)) / 2);
}

/* 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 physical choice-popup stacking — independent of semantic elevation */  --cem-select-popup-z-index: 1;

        
  /* endregion physical choice-popup stacking */
}

/* 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-strong);
  --cem-stroke-selected: var(--cem-stroke-standard);
  --cem-stroke-target: var(--cem-stroke-standard);
  --cem-stroke-pending: 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 */  --cem-pending-angle: 45deg;
  --cem-pending-tile-size: 2rem;

        

  /* region indicator appearance selectors — outline=0 / underline=1 */  --cem-indicator-appearance-outline: 0;
  --cem-indicator-appearance-underline: 1;

        
  /* endregion indicator appearance selectors */

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

/* Action contour presence is inherited across explicit theme boundaries. */
:root, [data-theme*="cem-theme-"], .cem-theme-native, .cem-theme-light, .cem-theme-dark, .cem-theme-contrast-light, .cem-theme-contrast-dark {  --cem-action-outline-display: none;

        
}
[data-theme="cem-theme-contrast-light"], [data-theme="cem-theme-contrast-dark"], .cem-theme-contrast-light, .cem-theme-contrast-dark {
  --cem-action-outline-display: block;
}

/* 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.625rem;
  --cem-typography-size-xs: 0.75rem;
  --cem-typography-size-s: 0.875rem;
  --cem-typography-size-m: 1rem;
  --cem-typography-size-l: 1.5rem;
  --cem-typography-size-xl: 2.125rem;
  --cem-typography-size-xxl: 3rem;

        
  /* 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-heading-font-weight: var(--cem-voice-strong-ink-thickness);
  --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;
  --cem-typography-heading-font-weight: var(--cem-voice-strong-ink-thickness);
}
/* 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;
  --cem-typography-heading-font-weight: var(--cem-voice-strong-ink-thickness);
}
/* 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);
  --cem-duration-pending-cycle: 2000ms;
  --cem-duration-continuous-cycle: 1000ms;

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