fix(design): meet AA on tinted surfaces, and stop the footer inverting in dark

Full audit across home, search, rankings, admissions, compare, and primary /
secondary / special / no-data school pages, in both themes, measuring computed
styles rather than reading CSS.

Contrast: the status hues were specced against --bg-primary, but they are used
as chip text on their own tint, which sits on cards and secondary surfaces
rather than the page ground. Measured in the wild they were 3.85–4.44:1 —
under AA — on Ofsted badges, delta chips, report-card chips and metric values,
i.e. most of the product's actual signal. Darkened the light hues
(#0e6e66 → #0b625a, #9a5b00 → #7f4a00) and lifted the dark teal
(#3fb3a4 → #4fc0b0) so each clears AA on its own tint, which is the worst case
rather than the easy one. Chart and series ramps follow.

The footer was painting itself with a text token and lettering itself with a
background token: `background: var(--text-primary); color: var(--bg-secondary)`.
That reads correctly in one theme and inverts in the other — in dark mode it
became a light slab at the bottom of a dark page, with amber section headings
at 1.98:1. Added --surface-sunken and its on-* companions, which stay dark in
BOTH themes (deliberately not --surface-inverse, whose whole job is to flip),
and moved the footer onto them. Section headings were also using a status hue
purely as decoration; they are now a muted on-surface token.

The "Open full map" pill was a fixed white background with a themed text
colour, so in dark mode it rendered light violet on white at 1.84:1. Both
sides are token-driven now.

Tabular numerals are now the default for .main rather than per-component
opt-in, with prose opting back out — a handful of figures (miniNatPill,
compareRowVal, factVal) had been missed by the class-name-based pass.

Added a two-theme AA gate over home, rankings and admissions. It waits for
`transition: color` to settle first: an earlier measurement pass read
mid-transition values and reported seven failures that did not exist at rest.
Worth stating plainly — most of what a naive audit flags here is its own
artifact, and the check has to account for that to be worth having.

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

nextjs-app/components/Footer.module.css

@@ -1,6 +1,6 @@
 .footer {
-  background: var(--text-primary);
-  color: var(--bg-secondary);
+  background: var(--surface-sunken);
+  color: var(--on-sunken);
   margin-top: auto;
 }
 
@@ -27,7 +27,7 @@
   margin: 0;
   font-size: 1.25rem;
   font-weight: 700;
-  color: var(--bg-primary);
+  color: var(--on-sunken);
   font-family: var(--font-display);
 }
 
@@ -35,14 +35,14 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.6;
-  color: rgba(var(--text-inverse-rgb), 0.7);
+  color: var(--on-sunken-muted);
 }
 
 .sectionTitle {
   margin: 0;
   font-size: 0.875rem;
   font-weight: 600;
-  color: var(--status-below);
+  color: var(--on-sunken-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -58,24 +58,24 @@
 
 .link {
   font-size: 0.875rem;
-  color: rgba(var(--text-inverse-rgb), 0.7);
+  color: var(--on-sunken-muted);
   text-decoration: none;
   transition: color 0.2s ease;
 }
 
 .link:hover {
-  color: var(--status-below);
+  color: var(--on-sunken);
 }
 
 .linkDisabled {
   font-size: 0.875rem;
-  color: rgba(var(--text-inverse-rgb), 0.4);
+  color: var(--on-sunken-faint);
   cursor: not-allowed;
 }
 
 .bottom {
   padding-top: 2rem;
-  border-top: 1px solid rgba(var(--text-inverse-rgb), 0.15);
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -85,15 +85,15 @@
 .disclaimer {
   margin: 0;
   font-size: 0.875rem;
-  color: rgba(var(--text-inverse-rgb), 0.6);
+  color: var(--on-sunken-muted);
 }
 
 .disclaimer .link {
-  color: var(--brand);
+  color: var(--on-sunken-link);
 }
 
 .disclaimer .link:hover {
-  color: var(--status-below);
+  color: var(--on-sunken);
 }
 
 @media (max-width: 768px) {

nextjs-app/components/school/SchoolDetailShell.module.css

@@ -88,8 +88,7 @@
 
 
 .headerHasMap .actions .btnAdd {
-    /* Sits on the map hero, which renders light in both themes. */
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--bg-card);
     color: var(--brand-strong);
     border-color: transparent;
     -webkit-backdrop-filter: blur(6px);

nextjs-app/components/school/schoolSections.module.css

@@ -75,8 +75,7 @@
 }
 
 .headerHasMap .actions .btnAdd {
-    /* Sits on the map hero, which renders light in both themes. */
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--bg-card);
     color: var(--brand-strong);
     border-color: transparent;
     -webkit-backdrop-filter: blur(6px);