/* ============================================================
   PERKSLOCAL · EFFECTS — radius, shadow, glow, motion
   ============================================================ */

:root {
  /* ── Corner radius (generous, friendly) ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;   /* default card radius */
  --radius-3xl:  32px;
  --radius-full: 9999px; /* pills, buttons, avatars */

  /* ── Shadows (soft, light-tuned) ── */
  --shadow-sm:   0 1px 3px rgba(31,31,35,0.08), 0 1px 2px rgba(31,31,35,0.05);
  --shadow-md:   0 4px 16px rgba(31,31,35,0.10), 0 2px 6px rgba(31,31,35,0.06);
  --shadow-lg:   0 12px 40px rgba(31,31,35,0.12), 0 4px 12px rgba(31,31,35,0.08);
  --shadow-xl:   0 24px 60px rgba(31,31,35,0.14), 0 8px 24px rgba(31,31,35,0.08);
  --shadow-card: 0 1px 4px rgba(31,31,35,0.06), 0 4px 20px rgba(31,31,35,0.07), inset 0 1px 0 rgba(255,255,255,0.9);

  /* ── Colored glows (hover accents) ── */
  --glow-purple: 0 0 30px rgba(109,40,217,0.20);
  --glow-blue:   0 0 30px rgba(99,102,241,0.18);
  --glow-gold:   0 0 30px rgba(245,158,11,0.20);

  /* ── Colored shadows for brand buttons ── */
  --shadow-purple: 0 4px 16px rgba(109,40,217,0.30);
  --shadow-gold:   0 4px 16px rgba(245,158,11,0.32);
  --shadow-blue:   0 4px 16px rgba(99,102,241,0.30);

  /* ── Motion ── */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 150ms;  /* @kind other */
  --dur-base: 250ms;  /* @kind other */
  --dur-slow: 400ms;  /* @kind other */
}