/* ============================================================
   YKMTEST — Radii, borders, shadows, motion.
   Soft, low-contrast elevation; 1px hairline borders on cards.
   ============================================================ */
:root {
  /* radii */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;    /* buttons, inputs */
  --r-lg:   10px;   /* cards */
  --r-xl:   14px;   /* panels, modals */
  --r-2xl:  20px;
  --r-pill: 999px;  /* run/stop pills, status chips */

  /* borders */
  --bw:     1px; /* @kind other */
  --bw-2:   2px; /* @kind other */

  /* shadows */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,0.14);
  --shadow-focus: 0 0 0 3px rgba(27,169,181,0.22);     /* teal focus ring */
  --shadow-focus-violet: 0 0 0 3px rgba(110,99,200,0.22);

  /* motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur:        180ms; /* @kind other */
  --dur-slow:   260ms; /* @kind other */
  --t-control:  all var(--dur) var(--ease-out); /* @kind other */
}