/* MOTION TOKENS — durations and easing, shared with mobile.

   Lifted from packages/ui/src/motion.css. Shared for the same reason chart
   proportions are: perception does not scale with screen size. A 160ms fade is
   160ms in a hand and 160ms on a monitor. What IS per-platform is spring
   physics, which native has and CSS does not.

   NAMES DESCRIBE THE JOB, NOT THE NUMBER. --motion-enter rather than
   --motion-240: retuning the feel of the app is then one change, not a hunt for
   every 240 in the codebase.

   THE RULE THAT GOVERNS WHERE THESE MAY BE USED: the motion budget is inverse
   to how live the data is. A price easing from 5898.25 to 5898.50 displays a run
   of values that were never true, and someone reading mid-transition reads a
   lie. Live figures, candles and rule gauges get no motion at all; navigation,
   sheets, buttons and empty states get as much as the design wants. */

:root {
  /* --- durations, by job ------------------------------------------------- */
  /* Acknowledging a press or a hover. Below ~100ms reads as instant. */
  --motion-feedback: 90ms; /* @kind other */
  /* Something arriving: a panel, a sheet, a toast, a menu. */
  --motion-enter: 220ms; /* @kind other */
  /* Something leaving. Deliberately faster than entering — matching the two
     makes dismissal feel sticky. */
  --motion-exit: 160ms; /* @kind other */
  /* A change the user must notice: a state flip, a value crossing a threshold. */
  --motion-emphasis: 320ms; /* @kind other */
  /* Moving between screens or tabs, where distance has to read as distance. */
  --motion-navigate: 280ms; /* @kind other */

  /* --- durations, unnamed — prefer a named one above --------------------- */
  --motion-instant: 80ms; /* @kind other */
  --motion-fast: 160ms; /* @kind other */
  --motion-normal: 240ms; /* @kind other */
  --motion-slow: 400ms; /* @kind other */

  /* --- stagger ----------------------------------------------------------
     Delay between siblings in a sequence. Small on purpose: above ~60ms a list
     of eight becomes a half-second wait, and the eighth item is the one
     somebody is reaching for. */
  --motion-stagger: 35ms; /* @kind other */

  /* --- easing -----------------------------------------------------------
     'out' decelerates into place and is the default for anything arriving — it
     reads as the object settling rather than being pushed. 'in-out' is for
     things that both start and stop on screen. 'accelerate' is for exits. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  /* The nearest CSS gets to a spring. For a control confirming an action — a
     toggle, a checkbox — never for anything carrying a number. */
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}