/* ============================================================
   ELEVATION + MOTION
   Prefer flat + border over shadow. Clean, not floating.
   ============================================================ */
:root {
  --elevation-flat: none;
  --elevation-border: 0 0 0 1px var(--border-default);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
  /* Faint accent lift for interactive/focused surfaces */
  --shadow-accent: 0 0 0 1px rgba(0,194,255,0.35), 0 8px 30px rgba(0,194,255,0.10);

  /* Motion — subtle, fast, precise */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 250ms; /* @kind other */
  --transition-base: all var(--duration-base) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms; /* @kind other */
    --duration-base: 0ms; /* @kind other */
    --duration-slow: 0ms; /* @kind other */
  }
}