/* ============================================================
   QWELL · SPACING & LAYOUT TOKENS
   4px base grid. Generous, blocky rhythm.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --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;

  /* ---- Semantic spacing ---- */
  --gap-inline: var(--space-3);
  --gap-stack: var(--space-4);
  --pad-card: var(--space-6);
  --pad-section: var(--space-20);
  --pad-button-y: 14px;
  --pad-button-x: 22px;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --gutter: var(--space-6);

  /* ---- Radii — Qwell runs SHARP. Corners are mostly square. ---- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;     /* only for chips / avatars */

  /* ---- Border widths — bold, ink-black rules ---- */
  --stroke-1: 1.5px;
  --stroke-2: 2px;
  --stroke-3: 3px;
  --stroke-4: 4px;

  /* ---- Z-index ---- */
  --z-base: 1;          /* @kind other */
  --z-sticky: 100;      /* @kind other */
  --z-overlay: 1000;    /* @kind other */
  --z-toast: 1100;      /* @kind other */
}