/* ─── RICHARD Spacing & Layout Tokens ───────────────────────────── */

:root {
  /* Base unit: 8px */
  --space-1:   4px;   /* @kind spacing */
  --space-2:   8px;   /* @kind spacing */
  --space-3:   12px;  /* @kind spacing */
  --space-4:   16px;  /* @kind spacing */
  --space-5:   20px;  /* @kind spacing */
  --space-6:   24px;  /* @kind spacing */
  --space-8:   32px;  /* @kind spacing */
  --space-10:  40px;  /* @kind spacing */
  --space-12:  48px;  /* @kind spacing */
  --space-16:  64px;  /* @kind spacing */
  --space-20:  80px;  /* @kind spacing */
  --space-24:  96px;  /* @kind spacing */
  --space-32: 128px;  /* @kind spacing */
  --space-40: 160px;  /* @kind spacing */
  --space-48: 192px;  /* @kind spacing */

  /* Page layout */
  --page-gutter:    clamp(16px, 3vw, 40px); /* @kind other */
  --page-max-width: none;                   /* @kind other */
  --section-gap:    var(--space-24);        /* @kind spacing */

  /* Border radius */
  --radius-pill: 999px; /* @kind radius */
  --radius-sm:   4px;   /* @kind radius */
  --radius-md:   8px;   /* @kind radius */
  --radius-none: 0px;   /* @kind radius */

  /* Border widths */
  --border-width-thin:    1px;   /* @kind other */
  --border-width-default: 1.5px; /* @kind other */

  /* Z-index scale */
  --z-base:    0;   /* @kind other */
  --z-raised:  10;  /* @kind other */
  --z-overlay: 100; /* @kind other */
  --z-modal:   200; /* @kind other */
  --z-top:     999; /* @kind other */
}