/* ============================================================
   Meshage — Elevation, glow & motion
   Dark UI: depth comes from subtle borders + soft ambient shadow,
   and from NEON GLOW on active/accent elements (the signature move).
   ============================================================ */
:root {
  /* ---- Ambient shadows (depth on near-black) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.55);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.65);
  --shadow-sheet: 0 -12px 40px rgba(0,0,0,0.6);

  /* ---- Inset hairline that fakes a crisp top edge on raised cards ---- */
  --edge-top: inset 0 1px 0 rgba(255,255,255,0.05); /* @kind shadow */

  /* ---- Glows — the brand's accent signature ---- */
  --glow-primary: 0 0 0 1px rgba(43,240,220,0.35), 0 0 18px rgba(43,240,220,0.28);
  --glow-primary-soft: 0 0 24px rgba(43,240,220,0.18);
  --glow-accent: 0 0 0 1px rgba(157,140,255,0.4), 0 0 18px rgba(157,140,255,0.3);
  --glow-danger: 0 0 18px rgba(255,92,106,0.3);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px var(--focus-ring);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* ---- Backdrop blur for sheets / overlays ---- */
  --blur-overlay: blur(16px) saturate(120%); /* @kind other */
}