/* ============================================================
   UX.IPEK — Radii, shadows, borders, motion
   Soft generous rounding; whisper-soft plum-tinted shadows.
   ============================================================ */

:root {
  /* --- Radii ------------------------------------------------ */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;   /* inputs, small cards, icon tiles */
  --radius-lg:   24px;   /* buttons, chips                  */
  --radius-xl:   32px;   /* cards (rounded-[2rem])          */
  --radius-2xl:  40px;   /* feature cards (rounded-[2.5rem])*/
  --radius-pill: 999px;  /* pills, badges, round buttons    */

  /* --- Shadows (low-contrast, plum-tinted) ------------------ */
  --shadow-xs:   0 1px 2px rgba(40, 0, 44, 0.04);
  --shadow-sm:   0 2px 8px rgba(40, 0, 44, 0.05);
  --shadow-md:   0 10px 30px rgba(40, 0, 44, 0.06);
  --shadow-lg:   0 20px 40px rgba(40, 0, 44, 0.07);
  --shadow-card: 0 10px 40px -10px rgba(40, 0, 44, 0.08);

  /* Magenta-tinted lift used on primary CTAs */
  --shadow-magenta:    0 8px 30px rgba(202, 0, 108, 0.28);
  --shadow-magenta-lg: 0 12px 40px rgba(202, 0, 108, 0.38);

  /* Inner shadow for recessed icon wells */
  --shadow-inner: inset 0 1px 2px rgba(40, 0, 44, 0.05);

  /* --- Borders ---------------------------------------------- */
  --border-width: 1px; /* @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 */
  --dur-fast:   0.15s; /* @kind other */
  --dur-base:   0.3s;  /* @kind other */
  --dur-slow:   0.5s;  /* @kind other */

  /* Hover lift used across cards & buttons */
  --lift-hover: translateY(-2px); /* @kind other */
}