/* ==========================================================================
   Vucable — Effects: radius, shadow, border, motion
   Shadows carry a faint violet cast (from --ink-900) so elevation feels
   part of the brand rather than a neutral gray drop.
   ========================================================================== */

:root {
  /* ---- Corner radius ----------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Borders ----------------------------------------------------------- */
  --border-width:      1px;
  --border-width-thick:2px;

  /* ---- Elevation (violet-tinted, soft) ----------------------------------- */
  --shadow-xs:  0 1px 2px rgba(26, 23, 38, 0.06);
  --shadow-sm:  0 2px 6px rgba(26, 23, 38, 0.07);
  --shadow-md:  0 6px 18px rgba(26, 23, 38, 0.10);
  --shadow-lg:  0 16px 40px rgba(26, 23, 38, 0.14);
  --shadow-xl:  0 28px 70px rgba(26, 23, 38, 0.18);
  /* Brand glow for hero / primary emphasis */
  --shadow-brand: 0 14px 36px rgba(215, 16, 54, 0.24);
  --shadow-focus: 0 0 0 3px rgba(90, 79, 216, 0.35);

  /* ---- 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:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}