$duration-none: 0ms; // No motion. Used as the reduced-motion target and the default transition delay.
$duration-instant: 100ms; // Micro-feedback on small elements — hover, focus rings, toggles, small fades.
$duration-fast: 150ms; // Quick transitions over short distances — dropdowns, popovers, exits.
$duration-base: 250ms; // Default duration for most UI transitions.
$duration-slow: 400ms; // Larger surfaces entering or leaving — modals, drawers, sheets.
$duration-slower: 600ms; // Full-screen transitions and background dimming behind overlays.
$easing-standard: cubic-bezier(0.4, 0, 0.2, 1); // Standard ease-in-out for elements moving within the viewport, visible from start to end.
$easing-decelerate: cubic-bezier(0, 0, 0.2, 1); // Entrance (ease-out) for elements appearing in view, fast then settling. Also used for surfaces that leave but stay nearby, ready to return (e.g. a side panel).
$easing-accelerate: cubic-bezier(0.4, 0, 1, 1); // Exit (ease-in) for elements leaving view permanently, building speed as they go.
$easing-linear: cubic-bezier(0, 0, 1, 1); // No easing. For continuous or progress-driven motion — spinners, progress bars, rotation.
$transition-hover: 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; // Hover, focus and toggle feedback on interactive elements.
$transition-enter: 250ms cubic-bezier(0, 0, 0.2, 1) 0ms; // Elements entering the view — menus, popovers, tooltips.
$transition-exit: 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; // Elements leaving the view permanently.
$transition-overlay: 400ms cubic-bezier(0, 0, 0.2, 1) 0ms; // Modals, drawers and sheets entering over a dimmed background.