/* ============================================================
   SPACING — 4px base grid · radii · z-index
   ============================================================ */

:root {
  /* ── SPACE SCALE (4px grid) ── */
  --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;
  --space-32:  128px;

  /* ── SECTION RHYTHM ── */
  --section-sm:  clamp(3rem, 6vw, 5rem);   /* @kind spacing */
  --section-md:  clamp(5rem, 10vw, 8rem);  /* @kind spacing */
  --section-lg:  clamp(7rem, 14vw, 12rem); /* @kind spacing */

  /* ── CONTAINERS ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* ── BORDER RADIUS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── BORDER WIDTHS ── */
  --border-thin:   0.5px;
  --border-base:   1px;
  --border-accent: 2px;

  /* ── ELEVATION / SHADOW ──
     Light, low-contrast shadows on warm neutrals; never heavy drop-shadows.
     Dark mode uses borders, not shadow, for elevation. */
  --shadow-xs:  0 1px 2px rgba(28, 26, 24, 0.05);
  --shadow-sm:  0 2px 8px rgba(28, 26, 24, 0.06);
  --shadow-md:  0 8px 24px rgba(28, 26, 24, 0.08);
  --shadow-lg:  0 18px 48px rgba(28, 26, 24, 0.10);
  --shadow-focus: 0 0 0 3px var(--color-lb-ice);
  --shadow-focus-dark: 0 0 0 3px rgba(27, 31, 232, 0.25);

  /* ── Z-INDEX SCALE ── */
  --z-below:    -1;   /* @kind other */
  --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 */
}