chore(lint): R10 S2 review — guard against px-frozen font sizes + token convention note

- eslint no-restricted-syntax: a new text-[Npx] font size is now an error (matches
  strings + template chunks; rem arbitraries like text-[0.75rem] don't match). Keeps
  the rem system from silently rotting. Mutation-verified it fires on text-[Npx].
- index.css: document the token-vs-arbitrary split (name the two common small steps;
  rare 8/9/12/13px stay text-[Nrem]; never text-xs for 12px — it carries a line-height).

frontend/eslint.config.js

@@ -48,6 +48,23 @@ export default tseslint.config(
         "error",
         { allowShortCircuit: true, allowTernary: true },
       ],
+      // R10 S2: keep the rem system from rotting. A px-frozen `text-[Npx]` font size does NOT scale
+      // with the Settings --font-scale slider while its rem neighbours do; use `text-2xs`/`text-3xs`
+      // or a `text-[Nrem]` arbitrary instead. Matches both plain strings and template-literal chunks;
+      // rem arbitraries (text-[0.75rem]) don't match (no "px"). Font-size `text-` only — not w-/h-/p-.
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "Literal[value=/text-\\[\\d+px\\]/]",
+          message:
+            "px-frozen font size doesn't scale with --font-scale: use text-2xs/text-3xs or text-[Nrem], not text-[Npx] (R10 S2).",
+        },
+        {
+          selector: "TemplateElement[value.raw=/text-\\[\\d+px\\]/]",
+          message:
+            "px-frozen font size doesn't scale with --font-scale: use text-2xs/text-3xs or text-[Nrem], not text-[Npx] (R10 S2).",
+        },
+      ],
     },
   },
   prettier,

frontend/src/index.css

@@ -46,7 +46,11 @@
 /* Extra-small text steps in rem, so these labels scale with --font-scale like every other
    text (the ~124 px-frozen text-[10/11px] labels did NOT). Font-size ONLY — no paired
    --text-*--line-height — to match the `text-[Npx]` arbitraries they replace and avoid any
-   vertical-rhythm shift. */
+   vertical-rhythm shift.
+   Convention: the two COMMON small steps get names (below); the rare one-offs (12/13/8/9px)
+   stay as `text-[Nrem]` arbitraries rather than growing the token set — DON'T use `text-xs`
+   for 12px, it carries a line-height these labels never had. New small labels: reach for a
+   token first, an arbitrary only for a genuinely one-off size. */
 @theme {
   --text-2xs: 0.6875rem; /* 11px @ base — the most common frozen label */
   --text-3xs: 0.625rem; /* 10px @ base */