/* ============================================================
   VALFORA — Spacing Tokens (4px base grid)
   ============================================================ */

:root {
  /* ── Base Scale ──────────────────────────────────────────*/
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-11:  44px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── ERP Shell ───────────────────────────────────────────*/
  --shell-topbar-height:     var(--space-16);   /* 64px */
  --shell-sidebar-width:     280px;
  --shell-sidebar-collapsed: 72px;
  --shell-page-pad-desktop:  var(--space-8);    /* 32px */
  --shell-page-pad-tablet:   var(--space-6);    /* 24px */
  --shell-page-pad-mobile:   var(--space-4);    /* 16px */

  /* Page section rhythm */
  --layout-header-to-actions:  var(--space-6);  /* 24px */
  --layout-actions-to-filters: var(--space-6);  /* 24px */
  --layout-filters-to-content: var(--space-8);  /* 32px */
  --layout-section-gap:        var(--space-12); /* 48px */

  /* ── Table ───────────────────────────────────────────────*/
  --table-row-compact:     44px;
  --table-row-default:     56px;
  --table-row-comfortable: 72px;
  --table-header-height:   48px;
  --table-pad-compact:     var(--space-3);  /* 12px */
  --table-pad-default:     var(--space-4);  /* 16px */
  --table-pad-comfortable: var(--space-6);  /* 24px */

  /* ── Filter / Search ─────────────────────────────────────*/
  --filter-bar-height:  var(--space-14); /* 56px */
  --filter-chip-height: var(--space-9);  /* 36px */
  --filter-chip-pad:    var(--space-4);  /* 16px */
  --search-height:      var(--space-14); /* 56px */

  /* ── Overlays ────────────────────────────────────────────*/
  --drawer-width:        480px;
  --drawer-filter-width: 420px;
  --modal-sm:            480px;
  --modal-md:            640px;
  --modal-lg:            840px;

  /* ── KPI ─────────────────────────────────────────────────*/
  --kpi-height: 120px;

  /* ── Input ───────────────────────────────────────────────*/
  --input-height: var(--space-14); /* 56px */
}