/* ============================================================
   SPACING & LAYOUT  —  Morflax Design System
   4px base grid. Compact tool-UI density.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) --------------------------- */
  --space-0:  0;
  --space-px: 1px;
  --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-7:  1.75rem;   /* 28 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */
  --space-40: 10rem;     /* 160 */

  /* ---- Control sizing (heights) --------------------------- */
  --control-xs: 24px;
  --control-sm: 30px;
  --control-md: 36px;    /* default tool-UI control */
  --control-lg: 44px;    /* min touch target        */
  --control-xl: 52px;

  /* ---- Layout containers ---------------------------------- */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --container-max: 1480px;

  --gutter:      var(--space-6);
  --panel-pad:   var(--space-4);
  --section-gap: var(--space-24);
}