/* Motion (brief). duration-base is documented twice in the source (300ms in the
   token block, 500ms in the prose); the token block value is authoritative. */
:root {
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 300ms; /* @kind other */
  --duration-slow: 2000ms; /* @kind other */
  --easing: ease-in-out; /* @kind other */
  --transition-control: color var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing);
  --transition-surface: box-shadow var(--duration-base) var(--easing), transform var(--duration-base) var(--easing), opacity var(--duration-base) var(--easing);
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; /* @kind other */ --duration-base: 1ms; /* @kind other */ --duration-slow: 1ms; /* @kind other */ }
}

/* Component keyframes. Kept here rather than in a <style> tag inside a
   component, which would pollute that element's textContent. */
@keyframes ch-spin { to { transform: rotate(360deg); } }
@keyframes ch-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ch-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-ch-shimmer] { animation: none !important; }
}