// ─────────────────────────────────────────────────────────────────────────────
// 모션 토큰 — 지속시간과 이징.
// 이징은 "어느 방향으로 움직이는가"로 이름 붙인다: 화면에 들어올 때는 감속(out),
// 나갈 때는 가속(in), 제자리에서 상태만 바뀔 때는 in-out.
//
// 실제 트랜지션·애니메이션은 `_mixins.scss`의 `transition()` / `animate()`를 쓴다 —
// 두 믹스인 모두 `prefers-reduced-motion` 분기를 내장하고 있어 감소 모션 환경
// 대응을 화면마다 되풀이할 필요가 없다.
// ─────────────────────────────────────────────────────────────────────────────

$duration: (
  instant: 0ms,
  fast: 120ms,
  base: 200ms,
  slow: 300ms,
  slower: 500ms
);

$easing: (
  linear: linear,
  in: cubic-bezier(0.4, 0, 1, 1),
  out: cubic-bezier(0, 0, 0.2, 1),
  in-out: cubic-bezier(0.4, 0, 0.2, 1),
  // 살짝 오버슈트 — 토글·체크 같은 작은 확인 동작에.
  spring: cubic-bezier(0.34, 1.56, 0.64, 1)
);