/* ============================================================
   Stacks / Ryone — Spacing, radius, shadows, borders, motion
   8px soft-grid. Pill buttons, generously rounded cards.
   ============================================================ */
:root {
  /* ---- Spacing (8px base, with 4px half-steps) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-32: 128px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;   /* inputs, small controls */
  --radius-lg: 16px;   /* product cards, media */
  --radius-xl: 20px;
  --radius-2xl: 24px;  /* large surfaces / panels */
  --radius-pill: 90px; /* buttons, chips, avatars */
  --radius-full: 999px;

  /* ---- Border widths ---- */
  --border-1: 1px;
  --border-2: 2px;     /* the kit's default control stroke (inset) */

  /* ---- Shadows (cool, low, far-cast — the signature card lift) ---- */
  --shadow-xs: 0px 2px 4px rgba(15, 15, 15, 0.08);
  --shadow-sm: 0px 8px 16px -8px rgba(15, 15, 15, 0.12);
  --shadow-card: 0px 40px 64px -32px rgba(31, 47, 70, 0.12);   /* product/feature cards */
  --shadow-popup: 0px 16px 64px -16px rgba(31, 47, 70, 0.18);  /* dropdowns, modals */
  --shadow-cta: 0px 16px 24px -12px rgba(55, 114, 255, 0.40);  /* primary button glow */

  /* ---- 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.2s;    /* @kind other */
  --dur-slow: 0.3s;    /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: 80px;
}