/* ─────────────────────────────────────────────────────────────
   SPACING · RADII · SHADOWS · MOTION
   The planner packs a lot into little space; the spacing scale is
   tight (2–24px). Radii are soft but small. Shadows are subtle on
   light surfaces and deep on dark chrome / floating layers.
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Spacing scale (px) ─────────────────────────────────── */
  --space-0:  0;
  --space-px: 1px;
  --space-1:  2px;
  --space-2:  3px;
  --space-3:  4px;
  --space-4:  5px;
  --space-5:  6px;
  --space-6:  7px;
  --space-7:  8px;
  --space-8:  10px;
  --space-9:  12px;
  --space-10: 14px;
  --space-11: 16px;
  --space-12: 18px;
  --space-14: 20px;
  --space-16: 24px;

  /* ── Border radii ───────────────────────────────────────── */
  --radius-xs:  3px;  /* badges, mini chips */
  --radius-sm:  4px;  /* inputs, small tiles */
  --radius-md:  5px;  /* buttons, selects */
  --radius-lg:  6px;  /* OT cards, toggles */
  --radius-xl:  7px;  /* drop cells, panels */
  --radius-2xl: 8px;  /* brandmark, toast, popover */
  --radius-full: 9999px; /* avatars */

  /* ── Border widths ──────────────────────────────────────── */
  --border-hairline: 1px;
  --border-accent:   3px;  /* OT priority left edge */

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.04);
  --shadow-card:    0 1px 3px rgba(0,0,0,0.07);
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-toast:   0 4px 14px rgba(0,0,0,0.25);
  --shadow-header:  0 2px 8px rgba(0,0,0,0.40);
  /* Selection ring (uses priority/brand color at call site) */
  --ring-width: 2px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   0.12s; /* @kind other */
  --dur-base:   0.15s; /* @kind other */
  --dur-slow:   0.30s; /* @kind other */

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-width: 220px;
  --tec-label-width: 130px;
}