/* tokens-radius-shadow-motion-v1 — W-56-3 — Saadjie motion tokens. */
/*
 * Planning: .archon/queued-builds/WAVE-56-design-tokens.md
 *
 * WHY motion lives in tokens: animation duration + easing are part of
 * a design system's "feel". Authors pick from named durations / easings
 * instead of inventing numbers; a single-file edit changes the snap of
 * the whole surface.
 *
 * WHY a three-step duration scale (fast / base / slow):
 *   --duration-fast (120ms): micro-interactions — hover/focus tinting,
 *                            button press, focus-ring fade. Below ~100ms
 *                            and the change reads as instant; above
 *                            ~150ms and a hover feels laggy.
 *   --duration-base (200ms): standard transitions — dropdown reveal,
 *                            accordion expand, tab switch. The default
 *                            for component CSS that doesn't opt in
 *                            elsewhere.
 *   --duration-slow (320ms): page-level transitions — modal enter/exit,
 *                            sheet slide. Long enough to read as a
 *                            "scene change", short enough to never block.
 *
 * GOTCHA: any animation longer than ~400ms feels like a bug on mobile.
 * The W56 spec deliberately stops the scale at --duration-slower (500ms)
 * — anything beyond that should be a video / asset, not a CSS transition.
 *
 * CONSTRAINT: prefers-reduced-motion: reduce MUST collapse every
 * duration below to ~1ms. The override at the bottom of this file
 * handles that globally — components don't need to opt in.
 */

:root {
  /* ---------- Duration scale ---------- */
  --duration-instant:        0ms;
  --duration-fastest:        80ms;
  --duration-fast:           120ms;
  --duration-base:           200ms;
  --duration-slow:           320ms;
  --duration-slower:         500ms;

  /* ---------- Easing curves ----------
     WHY named curves (not raw cubic-bezier): a design system needs a
     vocabulary for "feels right when entering" vs "feels right when
     leaving". The four named curves below cover every transition we'd
     plausibly want; component CSS should never write a raw cubic-bezier.

     WHY these specific values:
       --ease-standard: Material's "standard" curve (0.2, 0, 0, 1) —
                        accelerates fast, settles slow. Default for most
                        property transitions.
       --ease-in:       (0.4, 0, 1, 1) — slow start, fast finish. Used
                        for elements LEAVING the screen.
       --ease-out:      (0, 0, 0.2, 1) — fast start, slow finish. Used
                        for elements ENTERING the screen.
       --ease-in-out:   (0.4, 0, 0.2, 1) — symmetrical. Used when an
                        element transitions between two on-screen states. */
  --ease-linear:             linear;
  --ease-standard:           cubic-bezier(0.2, 0, 0, 1);
  --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);
  --ease-emphasized:         cubic-bezier(0.2, 0, 0, 1.2);

  /* ---------- Compound transition presets ----------
     WHY shortcuts: 80% of component transitions are "fade colour" or
     "fade everything". Two ready-made presets cover those cases so the
     author doesn't compose duration + easing each time.

     The legacy --transition-fast / --transition-base names from
     public/css/tokens.css (W26) are kept as aliases so existing
     component CSS doesn't regress. */
  --transition-color:        color var(--duration-fast) var(--ease-standard),
                             background-color var(--duration-fast) var(--ease-standard),
                             border-color var(--duration-fast) var(--ease-standard);
  --transition-transform:    transform var(--duration-base) var(--ease-standard);
  --transition-opacity:      opacity var(--duration-base) var(--ease-standard);
  --transition-all:          all var(--duration-base) var(--ease-standard);

  --transition-fast:         var(--duration-fast) var(--ease-standard);
  --transition-base:         var(--duration-base) var(--ease-standard);
}

/* ---------- Reduced-motion override ----------
   WHY collapse every duration (not "off"): some users with vestibular
   disorders set prefers-reduced-motion. Setting duration to 0 would
   strip the transition entirely; ~1ms keeps the transition machinery
   wired (so transitionend events still fire) while removing the
   perceived motion.

   GOTCHA: this MUST live in the tokens file, not component CSS. If a
   component sets `transition: opacity 200ms` literally, the override
   here can't reach it. Component CSS must always reference the
   --duration-* tokens for this safety net to engage.

   CONSTRAINT: WCAG 2.3.3 (Animation from Interactions) — any non-essential
   animation that triggers on user input must be respect this preference. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fastest:      1ms;
    --duration-fast:         1ms;
    --duration-base:         1ms;
    --duration-slow:         1ms;
    --duration-slower:       1ms;
  }
}