/* Living Magic — Spacing, layout, radii, z-index */
:root {
  /* 4px base scale */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* Editorial rhythm */
  --gutter:         clamp(24px, 5vw, 80px); /* @kind spacing */
  --section-pad:    clamp(64px, 10vw, 140px); /* @kind spacing */
  --measure:        66ch;
  --measure-narrow: 46ch;

  /* Containers */
  --max-content: 1200px;
  --max-wide:    1440px;
  --max-app:     1560px;   /* portal / CRM shell */
  --max-prose:   720px;
  --sidebar-w:   272px;

  /* Breakpoints — canonical values for media/container queries.
     sm 640 · md 768 · lg 1024 · xl 1280 (raw numbers for JS consumers) */
  --bp-sm: 640;  /* @kind other */
  --bp-md: 768;  /* @kind other */
  --bp-lg: 1024; /* @kind other */
  --bp-xl: 1280; /* @kind other */

  /* Radii — sharp & editorial. Pills ONLY for chips and switch tracks. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* Z-index ramp */
  --z-base:    0;    /* @kind other */
  --z-raised:  10;   /* @kind other */
  --z-sticky:  100;  /* @kind other */
  --z-header:  200;  /* @kind other */
  --z-drawer:  300;  /* @kind other */
  --z-modal:   400;  /* @kind other */
  --z-toast:   500;  /* @kind other */
  --z-tooltip: 600;  /* @kind other */
}