/* ============================================================
   VersaSol · Spacing Tokens
   4px base grid. Doubles at larger steps.
   ============================================================ */

:root {
  /* ── Base Scale ───────────────────────────────────────────── */
  --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-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */
  --space-64:  16rem;     /* 256px */

  /* ── Semantic Layout ──────────────────────────────────────── */
  --space-sidebar:     240px;   /* Fixed sidebar width */
  --space-page-x:      var(--space-8);   /* Page horizontal padding */
  --space-page-top:    var(--space-6);   /* Page top padding */
  --space-section-gap: var(--space-12);  /* Between major sections */
  --space-card:        var(--space-6);   /* Card internal padding */
  --space-card-sm:     var(--space-4);   /* Compact card padding */
  --space-row-gap:     var(--space-4);   /* Row spacing in layouts */
  --space-col-gap:     var(--space-4);   /* Column spacing in layouts */
  --space-stack:       var(--space-3);   /* Stacked element gap */
  --space-inline:      var(--space-2);   /* Inline/sibling gap */
  --space-icon-text:   var(--space-2);   /* Icon-to-label gap */

  /* ── Component Sizes ──────────────────────────────────────── */
  --size-btn-sm:       30px;
  --size-btn-md:       36px;
  --size-btn-lg:       42px;
  --size-input-sm:     30px;
  --size-input-md:     36px;
  --size-input-lg:     42px;
  --size-icon-xs:      12px;
  --size-icon-sm:      16px;
  --size-icon-md:      20px;
  --size-icon-lg:      24px;
  --size-avatar-sm:    28px;
  --size-avatar-md:    36px;
  --size-avatar-lg:    48px;
  --size-chip:         24px;
}