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