/* ARESS 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-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;
  --space-48:  192px;

  /* ── Semantic ── */
  --space-section:      var(--space-20);
  --space-container-x: var(--space-10);
  --space-card-pad:     var(--space-6);
  --space-input-x:      var(--space-4);
  --space-input-y:      var(--space-3);
  --space-btn-x:        var(--space-6);
  --space-btn-y:        var(--space-3);
  --space-gap-sm:       var(--space-2);
  --space-gap-md:       var(--space-4);
  --space-gap-lg:       var(--space-8);

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 9999px;
  --radius-card: var(--radius-lg);

  /* ── Shadow ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 8px rgba(21,21,40,0.07);
  --shadow-md:  0 4px 24px rgba(21,21,40,0.10);
  --shadow-lg:  0 8px 40px rgba(21,21,40,0.14);
  --shadow-brand: 0 0 0 3px rgba(101,50,255,0.25);

  /* ── Motion ── */
  --transition-fast:   150ms ease; /* @kind other */
  --transition-base:   250ms ease; /* @kind other */
  --transition-slow:   400ms ease; /* @kind other */
  --easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}