/* ============================================================
   Elysium+ Design System — Spacing & Layout Tokens
   ============================================================ */

:root {
  /* ── Base Spacing Scale (4px grid) ── */
  --space-0:    0px;
  --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-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;
  --space-32:   128px;
  --space-40:   160px;
  --space-48:   192px;
  --space-56:   224px;
  --space-64:   256px;

  /* ── Semantic Spacing ── */
  --gap-xs:     var(--space-2);
  --gap-sm:     var(--space-3);
  --gap-md:     var(--space-6);
  --gap-lg:     var(--space-10);
  --gap-xl:     var(--space-16);
  --gap-2xl:    var(--space-24);
  --gap-3xl:    var(--space-32);

  --padding-card:    var(--space-8);
  --padding-section: var(--space-24);
  --padding-page:    var(--space-16);

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

  /* ── Semantic Radius ── */
  --radius-card:    var(--radius-lg);
  --radius-badge:   var(--radius-full);
  --radius-tag:     var(--radius-sm);
  --radius-button:  var(--radius-sm);
  --radius-stamp:   var(--radius-full);
  --radius-ticket:  var(--radius-md);
  --radius-input:   var(--radius-md);

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-max: 1600px;

  /* ── Z-Index ── */
  --z-base:    1;    /* @kind other */
  --z-raised:  10;   /* @kind other */
  --z-overlay: 100;  /* @kind other */
  --z-modal:   1000; /* @kind other */
  --z-toast:   2000; /* @kind other */
}