/**
 * Transition & Animation Tokens
 */

:root {
  /* Durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Timing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Semantic transitions */
  --transition-fast: var(--duration-150) var(--ease-out);
  --transition-base: var(--duration-200) var(--ease-out);
  --transition-slow: var(--duration-300) var(--ease-out);

  --transition-colors:
    color var(--transition-fast), background-color var(--transition-fast),
    border-color var(--transition-fast);
  --transition-transform: transform var(--transition-base);
  --transition-opacity: opacity var(--transition-base);
  --transition-shadow: box-shadow var(--transition-base);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-75: 0ms;
    --duration-100: 0ms;
    --duration-150: 0ms;
    --duration-200: 0ms;
    --duration-300: 0ms;
    --duration-500: 0ms;
    --duration-700: 0ms;
    --duration-1000: 0ms;
  }
}
