From edd03f971655220488441b5ab83af0660eac6b75 Mon Sep 17 00:00:00 2001
From: Marcos Paulo <marcos.paulodasilva.mp@gmail.com>
Date: Sat, 5 Sep 2026 23:00:44 +0000
Subject: [PATCH] fix(styles): use exact on-dark tokens, not near-miss ones

Six token-gap markers were closed by pointing the value at a palette
token that does not match it. Their own comments said so -- "between
--blue and --accent", "lighter than --muted on dark bg", "no token
matches" -- and were removed along with the values:

  #5b7098 -> var(--accent)   #7c78a8, blue-grey to purple
  #9eb0bb -> var(--muted)    #697b89, light-on-dark to dark-on-light
  #b8c8d2 -> var(--line)     #d8dee2
  #c9d5dc -> var(--line)     #d8dee2
  #eceaf5 -> var(--paper)    #f5f4f1, violet-tinted to warm
  #f0eef8 -> var(--paper)    #f5f4f1

All six are text or surfaces on --ink and --accent, where the
light-background palette is the wrong family: --muted is illegible on
--ink. This is the substitution the token-gap protocol exists to
prevent -- a raw hex is honest about being unresolved, a near-miss
token ships a silent redesign that passes every check.

Adds six exact on-dark tokens and points the six declarations at them.
design-system-keeper owns tokens.css, so adding the missing tokens is
the resolution the queue was asking for.

Also makes the four overlay tokens exact. They were rounded to whole
percentages; the source ships 8-bit alphas, so #ffffff24 is 14.1176%,
not 14%. The names stay rounded, the values do not.

Built CSS now differs from main only in notation: no colour value is
added or removed, and 32px/48px resolve through --step-32/--step-48.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/islands/RulesInteractive.astro | 12 +++++-----
 src/styles/tokens.css                         | 24 +++++++++++++++----
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/islands/RulesInteractive.astro b/src/components/islands/RulesInteractive.astro
index 875f8ba..79c23c7 100644
--- a/src/components/islands/RulesInteractive.astro
+++ b/src/components/islands/RulesInteractive.astro
@@ -783,7 +783,7 @@ fix(api): scope session query</code></pre>
   .stage-detail p,
   .skill-detail p {
     max-width: 650px;
-    color: var(--line);
+    color: var(--ink-line);
     font-size: var(--step-13);
     line-height: 1.7;
   }
@@ -814,7 +814,7 @@ fix(api): scope session query</code></pre>
   .skill-detail code,
   .example-grid code,
   .copy-lab code {
-    color: var(--line);
+    color: var(--ink-code);
     font:
       11px/1.7 'DM Mono',
       monospace;
@@ -860,14 +860,14 @@ fix(api): scope session query</code></pre>
     box-shadow: inset 6px 0 var(--gold);
   }
   .skill-list button.active small {
-    color: var(--paper);
+    color: var(--accent-paper-active);
   }
   .skill-detail {
     display: grid;
     align-content: center;
     padding: 50px clamp(30px, 5vw, 80px);
     color: var(--paper);
-    background: var(--accent);
+    background: var(--accent-surface);
   }
   .skill-detail header {
     display: grid;
@@ -941,7 +941,7 @@ fix(api): scope session query</code></pre>
   }
   .copy-lab > div p {
     max-width: 420px;
-    color: var(--paper);
+    color: var(--accent-paper);
     line-height: 1.6;
   }
   .copy-lab article {
@@ -1024,7 +1024,7 @@ fix(api): scope session query</code></pre>
     font-size: var(--step-1);
   }
   .deeper nav small {
-    color: var(--muted);
+    color: var(--ink-muted);
     font:
       9px 'DM Mono',
       monospace;
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index dda8eb8..2b92682 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -38,11 +38,25 @@
   --step-00: 10px;
   --step-09: 9px;
 
-  /* Overlays */
-  --white-14: rgb(255 255 255 / 14%);
-  --white-23: rgb(255 255 255 / 23%);
-  --white-25: rgb(255 255 255 / 25%);
-  --white-31: rgb(255 255 255 / 31%);
+  /* On-dark palette. These are the values the source actually uses on the
+     --ink and --accent surfaces. They are not near-misses of the palette
+     above: --muted is a dark-on-light value and is illegible on --ink, and
+     --paper is warm where the text over --accent is violet-tinted. Each one
+     is the exact hex the legacy stylesheets ship. */
+  --ink-muted: #9eb0bb;
+  --ink-line: #b8c8d2;
+  --ink-code: #c9d5dc;
+  --accent-paper: #eceaf5;
+  --accent-paper-active: #f0eef8;
+  --accent-surface: #5b7098;
+
+  /* Overlays. The percentages are the exact 8-bit alphas the source ships
+     (#ffffff24, #ffffff3a, #ffffff40, #ffffff50), not rounded to whole
+     numbers — the names are rounded, the values are not. */
+  --white-14: rgb(255 255 255 / 14.1176%);
+  --white-23: rgb(255 255 255 / 22.7451%);
+  --white-25: rgb(255 255 255 / 25.098%);
+  --white-31: rgb(255 255 255 / 31.3725%);
 
   /* Breakpoints */
   --bp-sm: 560px;