/* Stacked shadows only, multiple small offsets + an inset hairline ring.
   Never a single heavy drop. */
:root {
  --ring-inset: inset 0 0 0 1px #00000014;

  --elevation-0: none;
  --elevation-1: var(--ring-inset);
  --elevation-2: 0px 1px 1px #00000005, 0px 2px 2px #0000000a, var(--ring-inset);
  --elevation-3: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a, var(--ring-inset);
  --elevation-4: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a, var(--ring-inset);
  --elevation-5: 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, var(--ring-inset);

  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--blue);

  /* motion, short, linear-ish, no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 100ms; /* @kind other */
  --duration-base: 150ms; /* @kind other */
  --duration-slow: 250ms; /* @kind other */
  --transition-default: all var(--duration-base) var(--ease-standard);
}