:root {
  /* ── Durations ─────────────────────────────────────── */
  --duration-instant: 80ms; /* @kind other */
  --duration-fast:    140ms; /* @kind other */
  --duration-base:    200ms; /* @kind other */
  --duration-slow:    320ms; /* @kind other */
  --duration-slower:  480ms; /* @kind other */

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

  /* ── Named 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),
                          opacity var(--duration-base) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-all:       all var(--duration-base) var(--ease-out);
}