From 2a5f6b354939ff8ec4e793949597d53132f35513 Mon Sep 17 00:00:00 2001
From: "n.siegfried" <n.siegfried@prime-controls.com>
Date: Thu, 20 Aug 2026 11:27:12 -0700
Subject: [PATCH] C4 fix - five undefined token names rendered surfaces
 transparent

The T9.9 token sweep pointed seven files (help.js, auth-guard.js, wp-format.js,
project-data.js, index.html, field.html, wp-creation-app.js) at Carbon names
the theme never defined: --cds-layer-01/-02, --cds-border-subtle-01/-strong-01,
--cds-layer-hover-01. theme-light.css carries no -01 suffixes. An undefined
var() invalidates the whole declaration, so the help-centre modal, the
change-password and language dialogs, the print popup's inlined values, the
creator nav drawer and the sync badge all rendered TRANSPARENT backgrounds -
reported by Nick against the help menu, 2026-08-20.

Renamed every consumer to the canonical tokens (--cds-layer, --cds-layer-accent,
--cds-layer-hover, --cds-border-subtle, --cds-border-strong), matched to the
hex each replacement originally stood in for. color_check gains check 3: every
var() consumed anywhere must resolve to a definition somewhere - the class of
this bug, pinned. Verified live: the modal computes rgb(255,255,255) over an
opaque gray nav, and the language dialog is opaque too. BL-025 logged for the
one wrong-base-colour rgba tint noticed in passing.

Item: C4 (regression in its own enforcement). Probe: color_check 5/5.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/waves/backlog.md   | 17 +++++++++++++++++
 html/auth-guard.js      | 10 +++++-----
 html/field.html         |  4 ++--
 html/help.js            | 26 +++++++++++++-------------
 html/index.html         |  2 +-
 html/project-data.js    |  4 ++--
 html/wp-creation-app.js |  6 +++---
 html/wp-format.js       | 12 ++++++------
 tests/color_check.py    | 28 ++++++++++++++++++++++++++++
 9 files changed, 77 insertions(+), 32 deletions(-)

diff --git a/docs/waves/backlog.md b/docs/waves/backlog.md
index 86c53e1..e289835 100644
--- a/docs/waves/backlog.md
+++ b/docs/waves/backlog.md
@@ -536,3 +536,20 @@ deliberately deferred.
 - **Why not now:** converting three more pages inside the audit task is the
   drive-by CLAUDE.md forbids; the audit's job was to measure and document.
 - **Suggested wave or follow-up:** next revision, one task, using the T7.9 kit.
+
+### BL-025 — The second brand blue survives as one rgba focus tint in help.js
+
+- **Found during:** the 2026-08-20 transparency fix (undefined-token sweep)
+- **Where:** `help.js`, the help-centre search input's `:focus` rule:
+  `box-shadow:0 0 0 2px rgba(37,99,214,.15)`
+- **What:** BL-008 removed the second brand blue (#2563d6 = rgb 37,99,214) and
+  `color_check` greps both spellings — but only inside `theme-light.css`, and
+  only with spaces (`37, 99, 214`). This space-free rgba consumer slid past
+  both nets. C4's recorded exception legitimately allows rgba **alphas** as
+  opacity recipes, so this is not a token-rule defect; it is the wrong BASE
+  colour under the alpha. The correct tint is THE blue: `rgba(15,98,254,.15)`.
+- **Why not now:** noticed in passing during an unrelated fix; one-line change
+  plus widening `color_check`'s grep to space-free spellings deserves its own
+  entry rather than a drive-by.
+- **Suggested wave or follow-up:** next housekeeping pass, with the check
+  widened so it cannot recur.
diff --git a/html/auth-guard.js b/html/auth-guard.js
index 87b81a1..6a991ab 100644
--- a/html/auth-guard.js
+++ b/html/auth-guard.js
@@ -68,11 +68,11 @@
     ov.id = 'wp-pw-modal';
     ov.style.cssText = 'position:fixed;inset:0;background:rgba(20,30,50,.5);display:flex;align-items:center;' +
       'justify-content:center;z-index:10002;padding:20px;font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;';
-    var inp = 'width:100%;padding:9px 10px;margin-bottom:12px;border:1px solid var(--cds-border-strong-01);border-radius:4px;font-size:14px;';
+    var inp = 'width:100%;padding:9px 10px;margin-bottom:12px;border:1px solid var(--cds-border-strong);border-radius:4px;font-size:14px;';
     var lbl = 'display:block;font-size:12px;color:var(--cds-text-secondary);margin-bottom:4px;';
     ov.innerHTML =
-      '<div style="background:var(--cds-layer-02);color:var(--cds-text-primary);border-radius:10px;max-width:380px;width:100%;box-shadow:0 12px 40px rgba(20,30,50,.3);overflow:hidden;">' +
-        '<div style="padding:14px 18px;border-bottom:1px solid var(--cds-border-subtle-01);font-weight:700;">Change password</div>' +
+      '<div style="background:var(--cds-layer);color:var(--cds-text-primary);border-radius:10px;max-width:380px;width:100%;box-shadow:0 12px 40px rgba(20,30,50,.3);overflow:hidden;">' +
+        '<div style="padding:14px 18px;border-bottom:1px solid var(--cds-border-subtle);font-weight:700;">Change password</div>' +
         '<div style="padding:16px 18px;">' +
           '<div id="wp-pw-msg" style="display:none;font-size:12.5px;padding:8px 10px;border-radius:6px;margin-bottom:12px;"></div>' +
           '<label style="' + lbl + '">Current password</label>' +
@@ -82,8 +82,8 @@
           '<label style="' + lbl + '">Confirm new password</label>' +
           '<input id="wp-pw-new2" type="password" autocomplete="new-password" style="' + inp + 'margin-bottom:0;">' +
         '</div>' +
-        '<div style="padding:12px 18px;border-top:1px solid var(--cds-border-subtle-01);display:flex;gap:8px;justify-content:flex-end;">' +
-          '<button type="button" id="wp-pw-cancel" style="padding:8px 14px;border:1px solid var(--cds-border-strong-01);background:var(--cds-layer-02);border-radius:6px;cursor:pointer;font-weight:600;">Cancel</button>' +
+        '<div style="padding:12px 18px;border-top:1px solid var(--cds-border-subtle);display:flex;gap:8px;justify-content:flex-end;">' +
+          '<button type="button" id="wp-pw-cancel" style="padding:8px 14px;border:1px solid var(--cds-border-strong);background:var(--cds-layer);border-radius:6px;cursor:pointer;font-weight:600;">Cancel</button>' +
           '<button type="button" id="wp-pw-save" style="padding:8px 14px;border:none;background:var(--cds-interactive-01);color:var(--cds-text-on-color);border-radius:6px;cursor:pointer;font-weight:600;">Update password</button>' +
         '</div>' +
       '</div>';
diff --git a/html/field.html b/html/field.html
index 9097fc1..17aece7 100644
--- a/html/field.html
+++ b/html/field.html
@@ -66,9 +66,9 @@
     .fld-toast.show { opacity: 1; }
       /* CR-007: drawings open from the card, offline once prefetched. 44px rows. */
     .fld-drawing { display:block; padding:12px 10px; min-height:44px; box-sizing:border-box;
-      border:1px solid var(--cds-border-subtle-01); border-radius:6px; margin-bottom:8px;
+      border:1px solid var(--cds-border-subtle); border-radius:6px; margin-bottom:8px;
       color: var(--cds-link-primary); text-decoration:none; font-size:14px; }
-    .fld-drawing:active { background: var(--cds-layer-hover-01); }
+    .fld-drawing:active { background: var(--cds-layer-hover); }
   </style>
 </head>
 <body>
diff --git a/html/help.js b/html/help.js
index 8cafc45..1a67e50 100644
--- a/html/help.js
+++ b/html/help.js
@@ -131,21 +131,21 @@
   .ui-help-overlay{ position:fixed; inset:0; background:rgba(20,30,50,.5); display:none; align-items:center;
     justify-content:center; z-index:10000; padding:4vh 16px; }
   .ui-help-overlay.open{ display:flex; }
-  .ui-help-modal{ background:var(--cds-layer-02); color:var(--cds-text-primary); max-width:980px; width:100%; height:88vh; max-height:880px;
+  .ui-help-modal{ background:var(--cds-layer); color:var(--cds-text-primary); max-width:980px; width:100%; height:88vh; max-height:880px;
     border-radius:0; box-shadow:0 12px 40px rgba(20,30,50,.3); display:flex; flex-direction:column; overflow:hidden;
     font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; }
-  .ui-help-head{ display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--cds-border-subtle-01); flex:none; }
+  .ui-help-head{ display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--cds-border-subtle); flex:none; }
   .ui-help-head .ui-help-title{ font-size:15px; font-weight:700; white-space:nowrap; }
   .ui-help-search{ flex:1; position:relative; max-width:420px; }
-  .ui-help-search input{ width:100%; padding:8px 12px; border:1px solid var(--cds-border-strong-01); border-radius:0;
-    font-size:13px; outline:none; background:var(--cds-layer-01); }
-  .ui-help-search input:focus{ border-color:var(--cds-focus); background:var(--cds-layer-02); box-shadow:0 0 0 2px rgba(37,99,214,.15); }
+  .ui-help-search input{ width:100%; padding:8px 12px; border:1px solid var(--cds-border-strong); border-radius:0;
+    font-size:13px; outline:none; background:var(--cds-layer-accent); }
+  .ui-help-search input:focus{ border-color:var(--cds-focus); background:var(--cds-layer); box-shadow:0 0 0 2px rgba(37,99,214,.15); }
   .ui-help-head .ui-help-x{ margin-left:auto; background:none; border:none; font-size:20px; cursor:pointer; color:var(--cds-text-secondary); line-height:1; }
   .ui-help-wrap{ display:flex; flex:1; min-height:0; }
-  .ui-help-nav{ width:230px; flex:none; border-right:1px solid var(--cds-border-subtle-01); overflow:auto; padding:10px 8px; background:var(--cds-layer-01); }
+  .ui-help-nav{ width:230px; flex:none; border-right:1px solid var(--cds-border-subtle); overflow:auto; padding:10px 8px; background:var(--cds-layer-accent); }
   .ui-help-nav a{ display:block; padding:7px 10px; border-radius:0; color:var(--cds-text-primary); text-decoration:none; font-size:13px;
     cursor:pointer; margin-bottom:1px; }
-  .ui-help-nav a:hover{ background:var(--cds-layer-01); }
+  .ui-help-nav a:hover{ background:var(--cds-layer-accent); }
   .ui-help-nav a.active{ background:var(--cds-highlight); color:var(--cds-link-primary-hover); font-weight:600; }
   .ui-help-nav a.nohit{ display:none; }
   .ui-help-content{ flex:1; overflow:auto; padding:22px 28px; scroll-behavior:smooth; }
@@ -156,14 +156,14 @@
   .ui-help-content p{ font-size:13.5px; line-height:1.62; margin:0 0 9px; color:var(--cds-text-primary); }
   .ui-help-content ol, .ui-help-content ul{ margin:0 0 10px; padding-left:20px; font-size:13.5px; line-height:1.6; }
   .ui-help-content li{ margin-bottom:5px; }
-  .ui-help-content code{ background:var(--cds-layer-01); padding:1px 5px; border-radius:4px; font-size:12px; }
+  .ui-help-content code{ background:var(--cds-layer-accent); padding:1px 5px; border-radius:4px; font-size:12px; }
   .ui-help-content table{ border-collapse:collapse; width:100%; font-size:12.5px; margin:6px 0 12px; }
-  .ui-help-content th, .ui-help-content td{ border:1px solid var(--cds-border-subtle-01); padding:6px 9px; text-align:left; vertical-align:top; }
-  .ui-help-content th{ background:var(--cds-layer-01); font-weight:600; }
+  .ui-help-content th, .ui-help-content td{ border:1px solid var(--cds-border-subtle); padding:6px 9px; text-align:left; vertical-align:top; }
+  .ui-help-content th{ background:var(--cds-layer-accent); font-weight:600; }
   .ui-help-pill{ display:inline-block; padding:1px 8px; border-radius:11px; font-size:11px; font-weight:600; }
-  .pill-draft{ background:var(--cds-layer-01); color:var(--cds-text-secondary); } .pill-sched{ background:var(--cds-highlight); color:var(--cds-link-primary-hover); }
+  .pill-draft{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); } .pill-sched{ background:var(--cds-highlight); color:var(--cds-link-primary-hover); }
   .pill-prog{ background:var(--wp-status-warning-bg); color:var(--wp-status-warning-text); } .pill-issued{ background:var(--wp-status-success-bg); color:var(--wp-status-success-text); }
-  .pill-qc{ background:var(--cds-highlight); color:var(--cds-link-primary); } .pill-closed{ background:var(--cds-layer-01); color:var(--cds-text-secondary); }
+  .pill-qc{ background:var(--cds-highlight); color:var(--cds-link-primary); } .pill-closed{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); }
   .pill-hold{ background:var(--wp-status-error-bg); color:var(--wp-status-error-text); }
   .ui-help-callout{ background:var(--cds-highlight); border-left:3px solid var(--cds-link-primary); padding:10px 14px; border-radius:0;
     font-size:13px; line-height:1.55; margin:10px 0; }
@@ -175,7 +175,7 @@
   .ui-help-fab:hover{ background:var(--cds-hover-primary); }
   @media (max-width:760px){
     .ui-help-modal{ height:92vh; } .ui-help-wrap{ flex-direction:column; }
-    .ui-help-nav{ width:auto; display:flex; flex-wrap:wrap; gap:4px; border-right:none; border-bottom:1px solid var(--cds-border-subtle-01); }
+    .ui-help-nav{ width:auto; display:flex; flex-wrap:wrap; gap:4px; border-right:none; border-bottom:1px solid var(--cds-border-subtle); }
     .ui-help-nav a{ margin:0; font-size:12px; padding:5px 9px; }
     .ui-help-head{ flex-wrap:wrap; }
   }`;
diff --git a/html/index.html b/html/index.html
index ca407af..4ee3c3a 100644
--- a/html/index.html
+++ b/html/index.html
@@ -432,7 +432,7 @@
          never renders). Visually its own thing, so nobody opens one thinking
          it is live: the server refuses every write regardless. -->
     <section class="section" id="archived-projects" hidden
-             style="border:1px dashed var(--cds-border-subtle-01); background:var(--cds-layer-01); opacity:.92">
+             style="border:1px dashed var(--cds-border-subtle); background:var(--cds-layer-accent); opacity:.92">
       <h2>Archived projects</h2>
       <p style="font-size:13px; color:var(--cds-text-secondary)">Read-only. Visible to project
         admins only. Opening one lets you read everything; nothing on it can be changed while
diff --git a/html/project-data.js b/html/project-data.js
index 915afd7..6447383 100644
--- a/html/project-data.js
+++ b/html/project-data.js
@@ -375,7 +375,7 @@
       el.setAttribute('role', 'status');
       el.style.cssText = 'position:fixed;right:12px;bottom:12px;z-index:9998;pointer-events:none;display:none;align-items:center;gap:7px;' +
         'font:500 12px/1.3 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;' +
-        'padding:6px 12px;border:1px solid var(--cds-border-subtle-01);background:var(--cds-layer-02);color:var(--cds-text-secondary);box-shadow:0 1px 4px rgba(0,0,0,.12);transition:opacity .2s;';
+        'padding:6px 12px;border:1px solid var(--cds-border-subtle);background:var(--cds-layer);color:var(--cds-text-secondary);box-shadow:0 1px 4px rgba(0,0,0,.12);transition:opacity .2s;';
       document.body.appendChild(el);
     }
     if (!c) return;   // the eager DOMContentLoaded mount: holder only, no state yet
@@ -404,7 +404,7 @@
       el.style.color = 'var(--wp-status-warning-text)'; el.style.borderColor = 'var(--cds-support-warning)'; el.style.background = 'var(--wp-status-warning-bg)'; el.style.display = 'inline-flex';
     } else if (c.pending) {
       el.textContent = '↻ Sending ' + c.pending + ' change' + (c.pending === 1 ? '' : 's') + ' to the project…';
-      el.style.color = 'var(--cds-text-secondary)'; el.style.borderColor = 'var(--cds-border-subtle-01)'; el.style.background = 'var(--cds-layer-02)'; el.style.display = 'inline-flex';
+      el.style.color = 'var(--cds-text-secondary)'; el.style.borderColor = 'var(--cds-border-subtle)'; el.style.background = 'var(--cds-layer)'; el.style.display = 'inline-flex';
     } else {
       el.textContent = '✓ Everything sent to the project';
       el.style.color = 'var(--wp-status-success-text)'; el.style.borderColor = 'var(--wp-status-success-border-a)'; el.style.background = 'var(--wp-status-success-bg)'; el.style.display = 'inline-flex';
diff --git a/html/wp-creation-app.js b/html/wp-creation-app.js
index 44064c6..187db00 100644
--- a/html/wp-creation-app.js
+++ b/html/wp-creation-app.js
@@ -1948,7 +1948,7 @@ function printPackage(){
   // values are read from the live page and inlined - including THE blue where
   // the second brand blue (#2563d6) used to be.
   const tok=(name)=>getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-  w.document.write(`<!DOCTYPE html><html><head><title>Work Package</title><style>body{font-family:Arial,sans-serif;font-size:12px;line-height:1.6;color:${tok('--cds-text-primary')};padding:40px;max-width:820px;margin:0 auto}h1{font-size:20px;margin-bottom:4px}h2{font-size:13px;font-weight:700;text-transform:uppercase;border-bottom:2px solid ${tok('--cds-highlight')};padding-bottom:4px;margin-top:22px;color:${tok('--cds-link-primary')}}table{width:100%;border-collapse:collapse;margin:10px 0;font-size:11px}th{background:${tok('--cds-layer-01')};border:1px solid ${tok('--cds-border-subtle-01')};padding:5px 8px;text-align:left}td{border:1px solid ${tok('--cds-border-subtle-01')};padding:5px 8px}@page{margin:18mm}</style></head><body>${c}</body></html>`);
+  w.document.write(`<!DOCTYPE html><html><head><title>Work Package</title><style>body{font-family:Arial,sans-serif;font-size:12px;line-height:1.6;color:${tok('--cds-text-primary')};padding:40px;max-width:820px;margin:0 auto}h1{font-size:20px;margin-bottom:4px}h2{font-size:13px;font-weight:700;text-transform:uppercase;border-bottom:2px solid ${tok('--cds-highlight')};padding-bottom:4px;margin-top:22px;color:${tok('--cds-link-primary')}}table{width:100%;border-collapse:collapse;margin:10px 0;font-size:11px}th{background:${tok('--cds-layer-accent')};border:1px solid ${tok('--cds-border-subtle')};padding:5px 8px;text-align:left}td{border:1px solid ${tok('--cds-border-subtle')};padding:5px 8px}@page{margin:18mm}</style></head><body>${c}</body></html>`);
   w.document.close(); w.print();
 }
 
@@ -2598,8 +2598,8 @@ const WP_NAV_CRITICAL_CSS = `
   body{--nav-w:288px;}
   body.wp-nav-collapsed{--nav-w:56px;}
   .wp-nav{position:fixed;top:var(--rail-top,48px);left:0;bottom:0;width:var(--nav-w);
-    z-index:120;display:flex;flex-direction:column;overflow:hidden;background:var(--cds-layer-01);
-    border-right:1px solid var(--cds-border-subtle-01);}
+    z-index:120;display:flex;flex-direction:column;overflow:hidden;background:var(--cds-layer-accent);
+    border-right:1px solid var(--cds-border-subtle);}
   .wp-nav-list{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;}
   .wp-nav-item,.wp-nav-link{display:flex;align-items:center;gap:11px;width:100%;
     background:none;border:0;text-align:left;cursor:pointer;font:inherit;}
diff --git a/html/wp-format.js b/html/wp-format.js
index 5adf228..9b80219 100644
--- a/html/wp-format.js
+++ b/html/wp-format.js
@@ -120,12 +120,12 @@
     ov.style.cssText = 'position:fixed;inset:0;background:rgba(20,30,50,.5);display:flex;align-items:center;' +
       'justify-content:center;z-index:10002;padding:20px;font:14px/1.45 "IBM Plex Sans",-apple-system,' +
       'BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;';
-    var fld = 'width:100%;padding:9px 10px;margin-bottom:4px;border:1px solid var(--cds-border-strong-01);border-radius:4px;font-size:14px;background:var(--cds-layer-02);';
+    var fld = 'width:100%;padding:9px 10px;margin-bottom:4px;border:1px solid var(--cds-border-strong);border-radius:4px;font-size:14px;background:var(--cds-layer);';
     var lbl = 'display:block;font-size:12px;color:var(--cds-text-secondary);margin:14px 0 4px;font-weight:600;';
     var hint = 'font-size:11.5px;color:var(--cds-text-helper);margin-bottom:6px;';
     ov.innerHTML =
-      '<div style="background:var(--cds-layer-02);color:var(--cds-text-primary);border-radius:10px;max-width:460px;width:100%;box-shadow:0 12px 40px rgba(20,30,50,.3);overflow:hidden;">' +
-        '<div style="padding:14px 18px;border-bottom:1px solid var(--cds-border-subtle-01);font-weight:700;">Language &amp; time</div>' +
+      '<div style="background:var(--cds-layer);color:var(--cds-text-primary);border-radius:10px;max-width:460px;width:100%;box-shadow:0 12px 40px rgba(20,30,50,.3);overflow:hidden;">' +
+        '<div style="padding:14px 18px;border-bottom:1px solid var(--cds-border-subtle);font-weight:700;">Language &amp; time</div>' +
         '<div style="padding:4px 18px 16px;">' +
           '<div id="wp-prefs-msg" style="display:none;font-size:12.5px;padding:8px 10px;border-radius:6px;margin:12px 0 0;"></div>' +
           '<label style="' + lbl + '">Language &amp; number format</label>' +
@@ -135,10 +135,10 @@
           '<select id="wp-prefs-tz" style="' + fld + '"></select>' +
           '<div style="' + hint + '">Times (MIMO windows, history, notifications) are shown in this zone. ' +
             'Calendar dates like a due date are never shifted.</div>' +
-          '<div id="wp-prefs-preview" style="margin-top:14px;padding:10px 12px;background:var(--cds-layer-01);border-radius:6px;font-size:12.5px;"></div>' +
+          '<div id="wp-prefs-preview" style="margin-top:14px;padding:10px 12px;background:var(--cds-layer-accent);border-radius:6px;font-size:12.5px;"></div>' +
         '</div>' +
-        '<div style="padding:12px 18px;border-top:1px solid var(--cds-border-subtle-01);display:flex;gap:8px;justify-content:flex-end;">' +
-          '<button type="button" id="wp-prefs-cancel" style="padding:8px 14px;border:1px solid var(--cds-border-strong-01);background:var(--cds-layer-02);border-radius:6px;cursor:pointer;font-weight:600;">Cancel</button>' +
+        '<div style="padding:12px 18px;border-top:1px solid var(--cds-border-subtle);display:flex;gap:8px;justify-content:flex-end;">' +
+          '<button type="button" id="wp-prefs-cancel" style="padding:8px 14px;border:1px solid var(--cds-border-strong);background:var(--cds-layer);border-radius:6px;cursor:pointer;font-weight:600;">Cancel</button>' +
           '<button type="button" id="wp-prefs-save" style="padding:8px 14px;border:none;background:var(--cds-interactive-01);color:var(--cds-text-on-color);border-radius:6px;cursor:pointer;font-weight:600;">Save</button>' +
         '</div>' +
       '</div>';
diff --git a/tests/color_check.py b/tests/color_check.py
index 6a6e691..46cec43 100644
--- a/tests/color_check.py
+++ b/tests/color_check.py
@@ -67,6 +67,34 @@ def main():
             others.append(name)
     chk("...and no consumer still references either", not others, others)
 
+    print("\n3. every token consumed is a token defined")
+    # The bug this pins: help.js (and six other files) shipped consuming
+    # --cds-layer-01/-02 and --cds-border-subtle-01/-strong-01 - names the theme
+    # never defined (its names carry no -01 suffix). An undefined var() makes
+    # the whole declaration invalid, so the help centre modal, the password and
+    # language dialogs, and the print popup all rendered TRANSPARENT
+    # backgrounds. Found by the user, 2026-08-20. Definitions are collected
+    # from every file (page aliases are legal); consumption of a name nobody
+    # defines is the defect.
+    defined, consumed = set(), {}
+    for name in sorted(os.listdir(HTML)):
+        if not name.endswith((".js", ".html", ".css")):
+            continue
+        src = io.open(os.path.join(HTML, name), encoding="utf-8").read()
+        for m in re.finditer(r"(--[a-zA-Z0-9-]+)\s*:", src):
+            defined.add(m.group(1))
+        for m in re.finditer(r"setProperty\(\s*['\"](--[a-zA-Z0-9-]+)", src):
+            defined.add(m.group(1))
+        for m in re.finditer(r"var\(\s*(--[a-zA-Z0-9-]+)", src):
+            consumed.setdefault(m.group(1), set()).add(name)
+    # --wp-chart- is the creator's JS-concatenated fallback ('--wp-chart-'+k);
+    # the numbered names it builds are all defined, the fragment is not a name.
+    unresolved = ["%s (%s)" % (t, ", ".join(sorted(fs)))
+                  for t, fs in sorted(consumed.items())
+                  if t not in defined and t != "--wp-chart-"]
+    chk("no var() anywhere names a token that nothing defines",
+        not unresolved, unresolved[:8])
+
     print("\n" + "-" * 54)
     print("%d/%d checks passed." % (len(_PASS), len(_PASS) + len(_FAIL)))
     for f in _FAIL: