// Animation system - moved from former tokens to utilities layer
:root {
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * @section Transitions
 */

/** @public No transition */
.transition-none { transition: none; }

/** @public Transition all properties */
.transition-all { transition: all var(--transition-base); }

/** @public Transition colors only */
.transition-colors { transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base); }

/** @public Transition opacity only */
.transition-opacity { transition: opacity var(--transition-base); }

/** @public Transition transform only */
.transition-transform { transition: transform var(--transition-base); }

/** @public Hover lift effect - raises element */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  &:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
}

/** @public Hover scale effect - grows slightly */
.hover-scale { transition: transform var(--transition-base); &:hover { transform: scale(1.05); } }

/** @public Focus ring - accessibility outline */
.focus-ring { &:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } }