/* ============================================================
   SAUCE WRITING — RADIUS, SHADOW, BORDER & MOTION TOKENS
   Soft, rounded, friendly. Shadows are warm-tinted (aubergine
   ink at low alpha), never neutral grey — keeps elevation cozy.
   ============================================================ */
:root {
  /* ---- Corner radii (the brand is soft & rounded) ---- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-hair: 1px; /* @kind spacing */
  --border-thick: 2px;   /* @kind spacing */

  /* ---- Warm-tinted elevation ---- */
  --shadow-xs: 0 1px 2px rgba(25, 9, 51, 0.06);
  --shadow-sm: 0 2px 8px rgba(25, 9, 51, 0.07);
  --shadow-md: 0 8px 24px rgba(25, 9, 51, 0.10);
  --shadow-lg: 0 18px 48px rgba(25, 9, 51, 0.14);
  --shadow-xl: 0 32px 80px rgba(25, 9, 51, 0.18);
  /* Playful colored glow for hero/sauce moments */
  --shadow-sauce: 0 20px 50px -12px rgba(204, 102, 160, 0.45);
  --ring-focus: 0 0 0 3px rgba(138, 79, 196, 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 */
  --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 */
}