feat(gates): WP-02 — harden check:tokens to whole-app colour guard

- Move the guard to scripts/check-tokens.sh; regex now catches hex +
  rgb()/hsl() (was hex-only) across ALL src/app components (was three
  ui/layout dirs). `token-ok` marker suppresses justified false positives;
  px stays out of scope (documented in the script).
- Zero exclusions: debug-state's dark code-editor palette moves to
  --app-devpanel-* tokens in styles.scss (the one exempt file), dropping its
  --exclude hole.
- Tokenize remaining hits: site-footer border via color-mix; three brief
  border widths via --rhc-border-width-* (new --rhc-border-width-lg: 3px).

Verified: planted violation fails the guard; GREEN + test-storybook:ci.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/brief/ui/letter-block/letter-block.component.ts

@@ -11,7 +11,7 @@ import { LetterBlock } from '@brief/domain/brief';
   imports: [RichTextEditorComponent, ButtonComponent],
   styles: [`
     :host{display:block}
-    .block{border-inline-start:3px solid var(--rhc-color-border-subtle);padding-inline-start:var(--rhc-space-max-md)}
+    .block{border-inline-start:var(--rhc-border-width-lg) solid var(--rhc-color-border-subtle);padding-inline-start:var(--rhc-space-max-md)}
     .meta{display:flex;justify-content:space-between;align-items:center;gap:var(--rhc-space-max-md);margin-block-end:var(--rhc-space-max-sm)}
     .controls{display:flex;gap:var(--rhc-space-max-sm)}
   `],

src/app/brief/ui/letter-preview/letter-preview.component.ts

@@ -37,7 +37,7 @@ const SAMPLE_VALUES: Record<string, string> = {
   styles: [`
     :host{display:block}
     .toolbar{display:flex;justify-content:flex-end;margin-block-end:var(--rhc-space-max-sm)}
-    .letter{background:var(--rhc-color-wit);border:1px solid var(--rhc-color-border-default);border-radius:var(--rhc-border-radius-md);padding:var(--rhc-space-max-2xl)}
+    .letter{background:var(--rhc-color-wit);border:var(--rhc-border-width-sm) solid var(--rhc-color-border-default);border-radius:var(--rhc-border-radius-md);padding:var(--rhc-space-max-2xl)}
     section{margin-block-end:var(--rhc-space-max-xl)}
     p{margin:0 0 var(--rhc-space-max-sm)}
     ul,ol{margin:0 0 var(--rhc-space-max-sm);padding-inline-start:1.4em}

src/app/brief/ui/passage-picker/passage-picker.component.ts

@@ -11,7 +11,7 @@ import { LibraryPassage } from '@brief/domain/brief';
   selector: 'app-passage-picker',
   imports: [FormsModule, CheckboxComponent, ButtonComponent],
   styles: [`
-    :host{display:block;border:1px solid var(--rhc-color-border-default);border-radius:var(--rhc-border-radius-md);padding:var(--rhc-space-max-md)}
+    :host{display:block;border:var(--rhc-border-width-sm) solid var(--rhc-color-border-default);border-radius:var(--rhc-border-radius-md);padding:var(--rhc-space-max-md)}
     ul{list-style:none;margin:0 0 var(--rhc-space-max-md);padding:0;display:grid;gap:var(--rhc-space-max-sm)}
     .scope{color:var(--rhc-color-foreground-subtle)}
   `],

src/app/shared/layout/site-footer/site-footer.component.ts

@@ -20,7 +20,7 @@ import { Component } from '@angular/core';
     .links a:hover{text-decoration:underline}
     /* CIBG's vendored .meta class (unrelated component, coincidental name) sets a
        dark grey — override rather than rename to keep the CIBG-mirroring class name. */
-    .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid rgb(255 255 255 / 0.25);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85;color:var(--rhc-color-foreground-on-primary)}
+    .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid color-mix(in srgb, var(--rhc-color-foreground-on-primary) 25%, transparent);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85;color:var(--rhc-color-foreground-on-primary)}
   `],
   template: `
     <footer class="bar">

src/app/shared/ui/debug-state/debug-state.component.ts

@@ -12,19 +12,22 @@ import { maskBsn, redactProfile } from './mask';
  * product feature: the whole template is gated by isDevMode(), so it does not
  * render and is unreachable in a production build.
  *
- * ponytail: dev tool — intentionally off-theme (not Rijkshuisstijl) and exempt
- * from the design-token convention; plain values keep it visually distinct.
+ * ponytail: dev tool — intentionally off-theme (a dark code-editor look, not
+ * CIBG). Its palette lives as --app-devpanel-* tokens in styles.scss so this file
+ * stays hex-free (check:tokens has no holes), while still reading as a tool.
  */
 @Component({
   selector: 'app-debug-state',
   imports: [JsonPipe],
   styles: [`
     .fab{position:fixed;bottom:1rem;right:1rem;z-index:9999;font:600 12px/1 monospace;
-      background:#1e1e1e;color:#9cdcfe;border:1px solid #444;border-radius:4px;
+      background:var(--app-devpanel-bg);color:var(--app-devpanel-accent);
+      border:var(--rhc-border-width-sm) solid var(--app-devpanel-border);border-radius:4px;
       padding:.5rem .75rem;cursor:pointer}
     .panel{position:fixed;bottom:3.25rem;right:1rem;z-index:9999;width:min(90vw,28rem);
-      max-height:70vh;overflow:auto;background:#1e1e1e;color:#d4d4d4;border:1px solid #444;
-      border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
+      max-height:70vh;overflow:auto;background:var(--app-devpanel-bg);color:var(--app-devpanel-fg);
+      border:var(--rhc-border-width-sm) solid var(--app-devpanel-border);
+      border-radius:6px;box-shadow:0 6px 24px var(--app-devpanel-shadow)}
     .panel pre{margin:0;padding:.75rem;font:12px/1.5 monospace;white-space:pre-wrap;
       word-break:break-word}
   `],