/* ============================================================
   Hevta Design System — Spacing & Layout Tokens
   ============================================================ */

:root {
  /* ── Base Scale (4px grid) ── */
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ── Semantic Spacing ── */
  --gap-xs:           var(--space-1);
  --gap-sm:           var(--space-2);
  --gap-md:           var(--space-4);
  --gap-lg:           var(--space-6);
  --gap-xl:           var(--space-8);

  /* ── Component Padding ── */
  --padding-btn-sm:       var(--space-2) var(--space-3);
  --padding-btn-md:       var(--space-3) var(--space-5);
  --padding-btn-lg:       var(--space-4) var(--space-8);
  --padding-input:        var(--space-2) var(--space-3);
  --padding-card:         var(--space-6);
  --padding-card-sm:      var(--space-4);
  --padding-section:      var(--space-12) var(--space-8);
  --padding-table-cell:   var(--space-2) var(--space-3);
  --padding-table-header: var(--space-3) var(--space-3);

  /* ── Border Radius ── */
  --radius-none:    0px;
  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-lg:      6px;
  --radius-xl:      8px;
  --radius-2xl:     12px;
  --radius-full:    9999px;

  /* ── Shadows ── */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.10);
  --shadow-md:      0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-xl:      0 20px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-card:    var(--shadow-sm);
  --shadow-modal:   var(--shadow-xl);
  --shadow-sidebar: 4px 0 16px rgba(0,0,0,0.12);

  /* ── Layout ── */
  --sidebar-width:       240px;
  --topbar-height:       56px;
  --content-max-width:   1280px;
  --container-padding:   var(--space-8);

  /* ── Z-Index ── */
  --z-base:     0;   /* @kind other */
  --z-raised:   10;  /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-sticky:   200; /* @kind other */
  --z-overlay:  300; /* @kind other */
  --z-modal:    400; /* @kind other */
  --z-toast:    500; /* @kind other */
}