:root {
  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-med: 260ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1); /* @kind other */
  /* The playful one. Use for entrances and toggles, never for colour fades. */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --transition-control: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-bounce), color var(--dur-fast) var(--ease-out);
  --transition-surface: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);

  --lift-hover: translateY(-2px); /* @kind other */
  --press-hover: translateY(2px); /* @kind other */
}