/* =========================================
   Design System Motion Tokens
   =========================================

   IMPORTANT: Use these tokens for all transitions and animations.
   Never use raw CSS easing keywords (ease, ease-out, etc.) or
   hardcoded cubic-bezier values — reference these variables instead.
*/

:root {
  /* ============================================================
     EASING FUNCTIONS
     ============================================================ */

  /* Entering elements — snappy deceleration */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Exiting elements — gentle acceleration */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* Repositioning / state changes */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ============================================================
     DURATION TOKENS
     ============================================================ */

  /* Interactive — hover, press, toggle */
  --duration-fast: 120ms;

  /* Tooltips, dropdowns, small reveals */
  --duration-normal: 200ms;

  /* Modals, panels, page transitions */
  --duration-slow: 300ms;

  /* Ambient loops — breathing, shimmer */
  --duration-ambient: 1500ms;

  /* ============================================================
     STAGGER
     ============================================================ */

  --stagger-step: 60ms;
}