/* ============================================================
   SLATE - Spacing, sizing, radii, grid
   4px base. Generous editorial whitespace. Sharp corners.
   ============================================================ */
:root {
  /* -- Spacing scale (4px base) --------------------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 12rem;    /* 192 */

  /* -- Radii - Slate runs SHARP. Rounding is the exception. -- */
  --radius-none: 0;
  --radius-xs: 2px;     /* inputs, tight chips */
  --radius-sm: 4px;     /* cards, buttons */
  --radius-md: 8px;     /* media tiles, dialogs */
  --radius-pill: 999px; /* tags / toggles only */
  --radius-full: 50%;   /* avatars, dots */

  /* -- Border widths ------------------------------- */
  --bw-hair: 1px;  /* @kind spacing */
  --bw-rule: 2px;       /* @kind spacing */
  --bw-bold: 3px;       /* @kind spacing */

  /* -- Layout -------------------------------------- */
  --container: 1320px;     /* standard content max width */
  --container-wide: 1600px;/* full-bleed editorial spreads */
  --container-text: 720px; /* long-form reading measure */
  --gutter: 2rem;          /* page side padding (desktop) */
  --gutter-sm: 1.25rem;    /* mobile */
  --grid-cols: 12; /* @kind other */
  --grid-gap: 1.5rem;

  /* -- Control sizing ------------------------------ */
  --control-sm: 36px;
  --control-md: 44px;   /* default - meets 44px touch target */
  --control-lg: 56px;

  /* -- Z layers ------------------------------------ */
  --z-base: 0;       /* @kind other */
  --z-sticky: 100;   /* @kind other */
  --z-header: 200;   /* @kind other */
  --z-overlay: 800;  /* @kind other */
  --z-modal: 900;    /* @kind other */
  --z-toast: 1000;   /* @kind other */
}