/* Arbiter / Trace — spacing, shape, depth, motion.
   4px base. Borders establish grouping; background changes establish hierarchy;
   shadows are reserved for overlays that physically cover content. */

:root {
  /* spacing — 4px base */
  --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-24: 96px;

  /* shape — 4px default, 2px compact controls, 8px overlays. No pills as default. */
  --radius-compact: 2px;
  --radius: 4px;
  --radius-overlay: 8px;

  /* depth — almost no shadow; overlays only */
  --shadow-overlay: 0 8px 24px rgba(17, 19, 22, 0.18);

  /* layout */
  --content-max: 1200px;       /* landing 12-col max width */
  --rail-width: 256px;         /* dashboard nav rail 240–280 */

  /* motion — state changes only; respect prefers-reduced-motion */
  --motion-control: 150ms; /* @kind other */ /* 120–180ms control feedback */
  --motion-expand: 210ms; /* @kind other */ /* 180–240ms expand / step change */
  --ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
}