// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
:where(:root) {
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  --ease-linear: linear;
  --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-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-colors:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    fill var(--duration-fast) var(--ease-out);

  --transition-shadow: box-shadow var(--duration-fast) var(--ease-out);

  --transition-transform: transform var(--duration-normal) var(--ease-spring);

  --transition-opacity: opacity var(--duration-normal) var(--ease-out);

  --transition-all: all var(--duration-normal) var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  :where(:root) {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}