/* Spacing and radius primitives — salamcendekia-blog
 *
 * DERIVED BY MEASUREMENT, the same method `systems/base` used rather than a
 * scale invented and then argued for.
 *
 * Counted every `padding`, `gap` and `margin` literal in
 * `landing-a/page.html`: 261 values, of which 184 (70%) already sit on a 4px
 * grid. The eight most-used values — 24, 32, 20, 16, 10, 90, 8, 28 — account
 * for 153 of them.
 *
 * THE EXTRACTION, so the number is reproducible rather than asserted:
 *
 *   grep -oE '(padding|gap|margin)(-[a-z]+)?:\s*[^;"]+' page.html \
 *     | grep -oE '\b[0-9]+px'
 *
 * The `(-[a-z]+)?` matters and is where a simpler pattern disagrees: it picks
 * up `padding-top`, `margin-left` and friends, and taking the whole
 * declaration before extracting values catches every number in a shorthand
 * like `padding: 10px 20px` rather than only the first. Matching bare
 * `padding:` and one value returns 111 — the same distribution, under half the
 * sample.
 *
 * So the grid was already there. What was missing was the NAME, which is the
 * same sentence `systems/base/AGENTS.md` records about its own derivation.
 *
 * The 30% off-grid are 10px, 13px, 6px and similar — hand-tuned values in a
 * page built by eye. They are not carried over: a scale that admits every
 * measured value is not a scale. 10px in particular rounds to `--space-2`
 * (8px) or `--space-3` (12px) depending on what it was doing, and that
 * decision belongs to whoever writes the component, not to this file.
 *
 * `--space-16` and above exist for section rhythm on a long page: the landing
 * page's 90px section padding is the one large value used often enough to
 * matter (14 uses), and 88px is its nearest grid step.
 */

:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px  — 14 uses at source */
  --space-3: 0.75rem;   /* 12px — 10 uses */
  --space-4: 1rem;      /* 16px — 20 uses */
  --space-5: 1.25rem;   /* 20px — 20 uses */
  --space-6: 1.5rem;    /* 24px — 33 uses, the most common */
  --space-7: 1.75rem;   /* 28px — 14 uses */
  --space-8: 2rem;      /* 32px — 23 uses */
  --space-9: 2.25rem;   /* 36px — 11 uses */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px —  8 uses */
  --space-16: 4rem;     /* 64px —  7 uses */
  --space-22: 5.5rem;   /* 88px — section rhythm; 90px at source, 14 uses */

  /* Radius.
   *
   * Source values: 2, 14, 16, 18, 20, 24, 28, 32px. Eight values with no
   * relationship between them, which is a page styled surface by surface
   * rather than a system.
   *
   * Reduced to four steps that cover what the measured values were doing:
   * hairline (2px, used once on a divider), a control radius, a card radius,
   * and full. The 14/16/18 cluster becomes one step — the difference between
   * them is not visible at these sizes and was never a decision.
   */
  --radius-sm: 0.125rem; /* 2px  — dividers, rules */
  --radius-md: 1rem;     /* 16px — buttons, inputs, tags */
  --radius-lg: 1.5rem;   /* 24px — cards, panels */
  --radius-full: 9999px; /* pills, avatars */
}