Unify the card layer behind one category-identity registry

docs/outstanding-issues-inbox/3565972b-02c2-4ad8-b899-3fbde0d54725.json

@@ -0,0 +1,14 @@
+{
+  "version": 2,
+  "id": "3565972b-02c2-4ad8-b899-3fbde0d54725",
+  "createdOn": "2026-08-18",
+  "action": "add",
+  "payload": {
+    "pri": "P3",
+    "type": "issue",
+    "summary": "Advisory UI mockup spec 'phone filter sheet follows the shared local-filter behavior' fails on main",
+    "detail": "tests/ui-tools-search-mode-mockup.spec.ts:188 fails at line 198 waiting for '2 showing' inside [data-testid=tools-search-filter-sheet] after searching 'Safety' at 390px. Reproduced locally under --project=chromium-mockups on BOTH claude/card-review-optimize-h0pidc and origin/main (dc7e518), so it is pre-existing and NOT caused by the card branch — attribution was checked before any fix was attempted. It surfaced now only because the ui-advisory lane fires on advisory_ui_changed (a mockup surface changed or the flake ledger is non-empty) and had been skipped on every earlier run of that PR. It is non-blocking: ui-advisory carries continue-on-error true and is absent from pr-required's needs list in ci.yml, and verify:ui excludes @mockup via --grep-invert, which is why a 429-pass local run never touched it. Next: open the trace at test-results/ui-tools-search-mode-mocku-b6163-hared-local-filter-behavior-chromium-mockups/trace.zip and decide whether the expected count of 2 is stale against the current tools catalogue or the facet hint genuinely miscounts; the mockup renders the production ToolsSearchResultsPage, so a real miscount would affect /tools too. Stop: do not change the expected number to match observed output without establishing which is correct.",
+    "source": "session 2026-08-18; PR #2060 Advisory UI run 32090358678; reproduced on origin/main dc7e518",
+    "issueUlid": "01M09C8ZY74TBHS81EN8DBS9WF"
+  }
+}

src/app/globals.css

@@ -806,6 +806,100 @@ body {
   overscroll-behavior-x: none;
 }
 
+/* Category accent delivery.
+   ------------------------------------------------------------------
+   A card names its category with `data-category-accent`, and reads the colour
+   back through --cat-accent / --cat-soft / --cat-border. Three reasons this is
+   an attribute→variable indirection rather than per-category utility classes:
+
+   1. Tailwind's scanner only sees class strings that appear literally in the
+      source, so `bg-[color:var(--type-${accent}-soft)]` silently produces no
+      CSS. Every consumer here writes the literal `var(--cat-soft)` instead.
+   2. Light, dark AND forced-colors come for free: each value aliases an
+      existing triad that all three themes already remap, so a new category
+      never needs a fourth declaration site to stay legible in high contrast.
+   3. It replaces the inline `style={{ backgroundColor: theme.soft }}` the
+      factsheet cards used, which bypassed the class contract entirely.
+
+   Every accent below resolves to a NON-semantic triad. Nothing here may point
+   at --danger / --warning / --success / --info: those belong to the six-tone
+   badge system, where the colour is the meaning. A category is not a status.
+   Held by tests/design-token-contract.test.ts. */
+[data-category-accent="document"] {
+  --cat-accent: var(--type-document);
+  --cat-soft: var(--type-document-soft);
+  --cat-border: var(--type-document-border);
+}
+
+[data-category-accent="table"] {
+  --cat-accent: var(--type-table);
+  --cat-soft: var(--type-table-soft);
+  --cat-border: var(--type-table-border);
+}
+
+[data-category-accent="search"] {
+  --cat-accent: var(--type-search);
+  --cat-soft: var(--type-search-soft);
+  --cat-border: var(--type-search-border);
+}
+
+[data-category-accent="source"] {
+  --cat-accent: var(--type-source);
+  --cat-soft: var(--type-source-soft);
+  --cat-border: var(--type-source-border);
+}
+
+[data-category-accent="service"] {
+  --cat-accent: var(--type-service);
+  --cat-soft: var(--type-service-soft);
+  --cat-border: var(--type-service-border);
+}
+
+[data-category-accent="form"] {
+  --cat-accent: var(--type-form);
+  --cat-soft: var(--type-form-soft);
+  --cat-border: var(--type-form-border);
+}
+
+[data-category-accent="purple"] {
+  --cat-accent: var(--tone-purple);
+  --cat-soft: var(--tone-purple-soft);
+  --cat-border: var(--tone-purple-border);
+}
+
+[data-category-accent="indigo"] {
+  --cat-accent: var(--tone-indigo);
+  --cat-soft: var(--tone-indigo-soft);
+  --cat-border: var(--tone-indigo-border);
+}
+
+[data-category-accent="rose"] {
+  --cat-accent: var(--tone-rose);
+  --cat-soft: var(--tone-rose-soft);
+  --cat-border: var(--tone-rose-border);
+}
+
+[data-category-accent="slate"] {
+  --cat-accent: var(--tone-slate);
+  --cat-soft: var(--tone-slate-soft);
+  --cat-border: var(--tone-slate-border);
+}
+
+[data-category-accent="clinical"] {
+  --cat-accent: var(--clinical-accent);
+  --cat-soft: var(--clinical-accent-soft);
+  --cat-border: var(--clinical-accent-border);
+}
+
+/* Fallback for a surface that opts into the card recipe without naming a
+   category — the accent collapses to the product accent rather than to an
+   unresolved variable, so an omitted attribute degrades to today's look. */
+:root {
+  --cat-accent: var(--clinical-accent);
+  --cat-soft: var(--clinical-accent-soft);
+  --cat-border: var(--clinical-accent-border);
+}
+
 @layer base {
   /* Interactive element defaults */
   button,