/* ============================================================
   EFFECTS — radii, shadows, borders, motion — Spinnerbooth
   Shadows are cool/navy-tinted, never neutral black.
   ============================================================ */
:root {
  /* Corner radii — soft but not pill-everything */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  26px;
  --radius-2xl: 36px;
  --radius-full: 999px;

  /* Shadows — layered, navy-tinted */
  --shadow-xs:  0 1px 2px rgba(19, 28, 62, 0.06);
  --shadow-sm:  0 2px 6px rgba(19, 28, 62, 0.08);
  --shadow-md:  0 8px 20px -6px rgba(19, 28, 62, 0.14);
  --shadow-lg:  0 18px 40px -12px rgba(19, 28, 62, 0.22);
  --shadow-xl:  0 32px 64px -18px rgba(10, 16, 39, 0.30);

  /* Glow — for accent/active photo focus */
  --glow-brand: 0 0 0 4px rgba(58, 85, 180, 0.18);
  --glow-gold:  0 0 0 4px rgba(207, 164, 80, 0.22);

  /* Border widths */
  --border-thin:  1px;
  --border-med:   1.5px;
  --border-thick: 2px;

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 0.61, 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:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* Backdrop blur */
  --blur-glass: saturate(140%) blur(14px); /* @kind other */
}