/* ============================================================
   MOTION & ELEVATION — quiet, minimal.
   Fades and small position shifts. No bounce, no color pops.
   Shadows are barely-there; separation comes from borders.
   ============================================================ */

:root {
  /* --- Duration --- */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 400ms; /* @kind other */

  /* --- Easing --- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  /* --- Elevation (soft neutral shadows) --- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 4px 16px rgba(20, 20, 20, 0.06);
  --shadow-lg: 0 12px 40px rgba(20, 20, 20, 0.08);

  /* Hover convention: darken ink / lift 1px, never scale up.
     Press convention: settle back down, deepen ink. */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
  }
}