/* ============================================================
   Legal Flow Doctor — Spacing Tokens
   ============================================================ */

:root {

  /* ── Base Scale (4px grid) ──────────────────────────────── */
  --space-0:    0;
  --space-px:   1px;
  --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 */
  --space-3:    0.75rem;   /* 12px */
  --space-3-5:  0.875rem;  /* 14px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-7:    1.75rem;   /* 28px */
  --space-8:    2rem;      /* 32px */
  --space-9:    2.25rem;   /* 36px */
  --space-10:   2.5rem;    /* 40px */
  --space-11:   2.75rem;   /* 44px */
  --space-12:   3rem;      /* 48px */
  --space-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */
  --space-40:   10rem;     /* 160px */
  --space-48:   12rem;     /* 192px */
  --space-64:   16rem;     /* 256px */

  /* ── Semantic Spacing ───────────────────────────────────── */

  /* Page layout */
  --space-page-x:         var(--space-8);
  --space-page-y:         var(--space-6);
  --space-page-x-wide:    var(--space-16);
  --space-sidebar-width:  240px;
  --space-content-max:    1200px;

  /* Cards & panels */
  --space-card-x:         var(--space-6);
  --space-card-y:         var(--space-5);
  --space-card-gap:       var(--space-4);

  /* Form elements */
  --space-input-x:        var(--space-3);
  --space-input-y:        var(--space-2-5);
  --space-label-gap:      var(--space-1-5);

  /* Inline / button */
  --space-btn-x-sm:       var(--space-3);
  --space-btn-y-sm:       var(--space-1-5);
  --space-btn-x-md:       var(--space-4);
  --space-btn-y-md:       var(--space-2-5);
  --space-btn-x-lg:       var(--space-6);
  --space-btn-y-lg:       var(--space-3);

  /* Sections */
  --space-section-sm:     var(--space-8);
  --space-section-md:     var(--space-12);
  --space-section-lg:     var(--space-20);
  --space-section-xl:     var(--space-32);

  /* Component internals */
  --space-icon-inline:    var(--space-2);
  --space-stack-tight:    var(--space-1);
  --space-stack-sm:       var(--space-2);
  --space-stack-md:       var(--space-4);
  --space-stack-lg:       var(--space-6);
}
