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