/* ==========================================================================
   SPACING, RADIUS, CONTROL HEIGHTS — 4px base grid.
   6px is the near-universal radius. Control heights drive Button & Input.
   ========================================================================== */
:root {
  /* Spacing (4px base grid) */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --spacing-content: 21px;  /* content gutter token */

  /* Radius — 6px workhorse, 2px menu rows, full pills */
  --radius-xs: 2px;     /* dropdown menu items */
  --radius-sm: 4px;
  --radius-md: 6px;     /* buttons, inputs, cards, dropdowns, panels */
  --radius-lg: 8px;
  --radius-panel: 6px;
  --radius-full: 9999px;/* badges, avatars, toggles */

  /* Control heights (Button & Input size scale) */
  --height-tiny: 26px;
  --height-small: 34px;   /* default size */
  --height-medium: 38px;
  --height-large: 42px;
  --height-xlarge: 50px;

  /* Layout */
  --breakpoint-xs: 480px;
  --width-sidebar: 220px;
  --width-listbox: 320px;
  --z-dropdown: 50; /* @kind other */
}