:root{
  --duration-fast:120ms;
  --duration-base:180ms;
  --duration-slow:280ms;
  --duration-page:420ms;

  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);

  --transition-control:background-color var(--duration-fast) var(--ease-standard),
                       color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard),
                       box-shadow var(--duration-fast) var(--ease-standard);
  --transition-surface:box-shadow var(--duration-base) var(--ease-standard),
                       transform var(--duration-base) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms;--duration-page:0ms}
}