/* ============================================================
   Run Away With Me — Effects: radius, borders, shadow, motion
   Soft rounded corners, hairline borders, and a barely-there
   double shadow. Motion is gentle: short ease transitions, no
   bounce, no spring.
   ============================================================ */

:root {
  /* --- Corner radius --- */
  --radius-sm:   8px;   /* buttons, inputs, chips */
  --radius-md:   12px;  /* nested panels, images */
  --radius-lg:   16px;  /* cards */
  --radius-pill: 999px; /* badges, tags */

  /* --- Borders --- */
  --border-width: 1px; /* @kind other */
  --border-hairline: 1px solid var(--line); /* @kind other */

  /* --- Shadow (layered, warm-grey, very soft) --- */
  --shadow-xs: 0 1px 2px rgba(102,102,102,0.05);
  --shadow-sm: 0 1px 2px rgba(102,102,102,0.05), 0 8px 22px rgba(102,102,102,0.05);
  --shadow-md: 0 2px 4px rgba(102,102,102,0.06), 0 14px 34px rgba(102,102,102,0.08);
  --shadow-focus: 0 0 0 3px rgba(196,173,130,0.35); /* champagne focus ring */

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
  --dur:      0.2s;  /* @kind other */
  --dur-slow: 0.4s;  /* @kind other */
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
}