/* ============================================================
   Wanted Design System — Layout Tokens
   Spacing, radius, and elevation. All values are aligned to a
   4px base grid.
   ============================================================ */

:root {
  /* ── Spacing — 4px grid, semantic names + raw scale ─────────── */
  --space-0:   0px;
  --space-2:   2px;
  --space-4:   4px;     /* xxs — icon padding, hairline gap */
  --space-8:   8px;     /* xs  — inside chips, between icon+label */
  --space-12: 12px;     /* sm  — list-item rows, between fields */
  --space-16: 16px;     /* md  — default card padding, button x-pad */
  --space-20: 20px;
  --space-24: 24px;     /* lg  — section padding on cards */
  --space-32: 32px;     /* xl  — between major blocks */
  --space-40: 40px;
  --space-48: 48px;     /* 2xl — large container padding */
  --space-64: 64px;     /* 3xl — page section padding */
  --space-80: 80px;
  --space-128: 128px;

  /* Aliases by role */
  --gap-icon-label: var(--space-8);
  --gap-fields:     var(--space-12);
  --gap-row:        var(--space-16);
  --gap-block:      var(--space-32);
  --gap-section:    var(--space-64);

  /* ── Radius — corner rounding ───────────────────────────────── */
  --radius-2:   2px;
  --radius-4:   4px;     /* small inputs, badges */
  --radius-6:   6px;
  --radius-8:   8px;     /* default — buttons, chips */
  --radius-12: 12px;     /* cards, panels */
  --radius-16: 16px;     /* feature cards */
  --radius-20: 20px;
  --radius-24: 24px;     /* hero / illustration cards */
  --radius-32: 32px;     /* large surfaces */
  --radius-full: 9999px; /* pills, avatars */

  /* ── Border widths ──────────────────────────────────────────── */
  --border-1: 1px;
  --border-1-5: 1.5px;
  --border-2: 2px;
  --border-3: 3px;

  /* ── Elevation — soft, low-contrast shadows ─────────────────── */
  --shadow-emphasize:
    0 1px 4px 0 rgb(23 23 23 / 0.06),
    0 0 0 1px rgb(23 23 23 / 0.04);

  --shadow-normal:
    0 1px 4px 0 rgb(23 23 23 / 0.07),
    0 4px 12px 0 rgb(23 23 23 / 0.06);

  --shadow-strong:
    0 4px 8px 0 rgb(23 23 23 / 0.06),
    0 12px 24px 0 rgb(23 23 23 / 0.10);

  --shadow-heavy:
    0 8px 16px 0 rgb(23 23 23 / 0.08),
    0 24px 48px 0 rgb(23 23 23 / 0.12);

  /* Focus ring — primary at 22% opacity */
  --shadow-focus: 0 0 0 4px rgb(0 102 255 / 0.22);
}