/* ============================================================
   Spacing — Straloo Design System
   4px base grid (Tailwind scale). The UI is compact: controls
   are 32px (h-8) tall, cards pad 16px (p-4), dialogs gap 16px.
   ============================================================ */

:root {
  --space-0: 0;
  --space-0-5: 0.125rem;  /* 2px  */
  --space-1: 0.25rem;     /* 4px  */
  --space-1-5: 0.375rem;  /* 6px  */
  --space-2: 0.5rem;      /* 8px  */
  --space-2-5: 0.625rem;  /* 10px — control horizontal padding */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px — card / dialog padding */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px — control height (h-8) */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */

  /* Common control heights */
  --control-h-sm: 1.75rem;   /* 28px — h-7 */
  --control-h: 2rem;         /* 32px — h-8 DEFAULT */
  --control-h-lg: 2.25rem;   /* 36px — h-9 */
}