fix(a11y): clear the four AA failures blocking the staging E2E gate

Main's staging E2E has been red since #90. Two of the four failures were the
staging container serving a stale image at the moment the gate ran — apple-icon
and the header lockup both check out against staging now. The other two were
real, and both are the same mistake: a colour pairing verified against one
ground while the element sits on another.

  * .heroEyebrow  --brand on its own 10% tint over Sand is 4.19:1. The token
    clears AA on Sand, but the tint darkens the ground under the label, and
    that composite was never the thing measured. --brand-strong is 5.85:1.

  * .hiwVisual    The preview panel was grounded in Sand while everything
    inside it is a translucent status tint — and those tints are specced to
    clear AA over --bg-card. Over Sand the report-card chips landed at 4.22:1
    and 4.29:1. The ratio depended on a background two levels up. Moving the
    panel to the card surface puts them at 5.69:1 and 5.81:1; a border keeps
    it reading as an inset frame now that panel and card share a colour.

  * Footer .sectionTitle  --sage flips with the theme; the footer band does
    not (it is teal in both). So the pairing only held in one of them — the
    dark sage measured 4.08:1, on every page. Now --on-sunken-muted, which is
    what the --on-sunken-* family exists for, as Footer.tsx's own header
    comment already says.

  * .compareHeadLabel  --text-muted on the header row's tint is 4.45:1 in the
    dark theme. Under by a hair, same cause. Now --text-secondary.

The harness gained the footer, because it had no footer and so could not have
caught the one failure that appeared on all three pages. Rewriting fragments
now uses each CSS module's own hash — the footer rewritten with HomeView's
prefix renders unstyled, which would have made any contrast measured on it
meaningless while still reporting a number.

Verified: 0 AA failures in both themes across the assembled page, measured with
the same probe the e2e test uses, against the real compiled CSS.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

nextjs-app/components/Footer.module.css

@@ -98,7 +98,11 @@
   font-size: var(--step--1);
   font-weight: 700;
   line-height: 1;
-  color: var(--sage);
+  /* --sage flips with the theme; this band does not (it is teal in both), so
+     the pairing only held in one of them — the dark sage measured 4.08:1 here
+     against a 4.5 floor, on every page. The --on-sunken-* family exists
+     precisely because this surface is theme-invariant. */
+  color: var(--on-sunken-muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }

nextjs-app/components/HomeView.module.css

@@ -133,7 +133,10 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--brand);
+  /* --brand on its own 10% tint over Sand measures 4.19:1 — the tint darkens
+     the ground under the label, and the token was specced against the ground,
+     not against the tint. --brand-strong on the same composite is 5.85:1. */
+  color: var(--brand-strong);
   background: rgba(var(--brand-rgb), 0.1);
   padding: 0.3rem 0.7rem;
   border-radius: 999px;
@@ -779,8 +782,19 @@
   gap: 0.9rem;
 }
 
+/*
+ * The preview panel sits on the card surface, not on Sand.
+ *
+ * Everything inside it is a translucent status or brand tint, and those tokens
+ * are specced to clear AA over --bg-card. Over Sand the same tints composite
+ * darker, which put the report-card chips at 4.22:1 and 4.29:1 against a 4.5
+ * floor — the ratio depended on a ground two levels up. On the card surface
+ * they are 5.69:1 and 5.81:1. The border keeps it reading as an inset frame
+ * now that panel and card share a colour.
+ */
 .hiwVisual {
-  background: var(--bg-secondary);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 10px;
   padding: 0.9rem;
   min-height: 180px;
@@ -1126,7 +1140,10 @@
 .compareHeadLabel {
   font-family: inherit;
   font-size: 0.48rem;
-  color: var(--text-muted);
+  /* --text-muted on the header row's tint is 4.45:1 in the dark theme —
+     under the floor by a hair, because the tint darkens the ground beneath
+     the label. --text-secondary clears it on both grounds. */
+  color: var(--text-secondary);
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;