/* ============================================================
   Hevta Design System — Motion & Animation Tokens
   ============================================================ */

:root {
  /* ── Duration ── */
  --duration-instant:   0ms;  /* @kind other */
  --duration-fast:      100ms; /* @kind other */
  --duration-base:      180ms; /* @kind other */
  --duration-slow:      280ms; /* @kind other */
  --duration-slower:    400ms; /* @kind other */

  /* ── Easing ── */
  --ease-out:           cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --ease-in:            cubic-bezier(0.4, 0.0, 1, 1); /* @kind other */
  --ease-in-out:        cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  /* ── Semantic Transitions ── */
  --transition-color:   color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); /* @kind other */
  --transition-opacity: opacity var(--duration-base) var(--ease-out); /* @kind other */
  --transition-shadow:  box-shadow var(--duration-base) var(--ease-out); /* @kind other */
  --transition-transform: transform var(--duration-fast) var(--ease-out); /* @kind other */
  --transition-all:     var(--transition-color), var(--transition-shadow); /* @kind other */
}