Add responsive gap values for .grid in default theme

[minimaldesign]

Assessment

Worth doing — tiny change, visible polish. The default theme sets one static gap for every viewport (settings.theme.default.css:86-87: --grid-column-gap/--grid-row-gap: var(--sm3) = 24px). On narrow screens 24px gutters eat a lot of a 375px viewport. Because .grid consumes the gap via var() (global.grid.css), responsive values are a pure theme-level change — no generator (generate.global.grid.cjs) or grid CSS changes needed. Effort: S.

Implementation plan

1. Mobile-first overrides in src/styles/framework/settings.theme.default.css (the :root GLOBAL block, lines ~84-88), using the existing @custom-media breakpoints:

   :root {
     --grid-column-gap: var(--sm1); /* 16px */
     --grid-row-gap: var(--sm1);
   }
   @media (--md) {
     :root {
       --grid-column-gap: var(--sm3); /* 24px — current value, unchanged ≥768px */
       --grid-row-gap: var(--sm3);
     }
   }

   Proposed values: 16px below 768px, 24px above (desktop rendering identical to today). Optionally a third step at --xl (e.g. --md2, 32px) — final numbers are a design call at review; the structure is the point.

2. Wireframe theme: settings.theme.wireframe.css defines no --grid-* vars today (it inherits nothing — the default theme import would be swapped out, not layered). Mirror the same block there so both themes ship responsive gaps.

3. Escape hatch stays intact: consumers overriding --grid-column-gap on a specific .grid element (inline or in their own CSS) still win, since element-level custom properties beat :root. .grid-flush is unaffected. Mention both in docs.

4. Docs: update the grid docs (src/content/docs/global.mdx grid section / _GridDemo.jsx page) and src/content/docs/themes.mdx theme-variable table to show the per-breakpoint values.

5. Verify: dev server, grid demo page at 375/768/1280 — gaps step at 768px, no layout shift elsewhere; homepage and component demos that use .grid still look right at mobile widths.