/* ============================================================
   CYBERNETIX · EFFECTS — radii, borders, shadows, blur, motion
   ============================================================ */
:root {
  /* ---- Corner radii (soft, generous) ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px; /* @kind other */
  --border-hair:  rgba(255, 255, 255, 0.08); /* @kind color */

  /* ---- Shadows (deep, cool — sit on dark navy) ---- */
  --shadow-sm:   0 2px 8px rgba(2, 2, 15, 0.45);
  --shadow-md:   0 12px 32px rgba(2, 2, 15, 0.55);
  --shadow-lg:   0 28px 64px rgba(2, 2, 15, 0.6);
  --shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.55);

  /* ---- Accent glows (sparingly, for CTAs & focus) ---- */
  --glow-coral:  0 0 0 1px rgba(242, 113, 78, 0.4), 0 8px 30px rgba(242, 113, 78, 0.35);
  --glow-cyan:   0 0 0 1px rgba(47, 212, 239, 0.4), 0 8px 30px rgba(47, 212, 239, 0.32);

  /* ---- Blur (for glass overlays) ---- */
  --blur-sm:  8px;  /* @kind other */
  --blur-md:  18px; /* @kind other */
  --blur-lg:  32px; /* @kind other */

  /* ---- 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-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}