complete oklch migration: zero named palette refs remain

- 01-asw.css: 20 new tokens (14 --syntax-*, 6 utility: print, absolute, high-contrast)
- Layers 02-09: all 30 TODO refs replaced with semantic/syntax tokens
- Zero --gray-N, --green-N, --blue-N, --red-N, --yellow-N in layers 02-09
- Palette-hue knob now controls entire site. Syntax highlighting uses fixed oklch hues.

assets/css/layers/01-asw.css

@@ -274,6 +274,36 @@
   --wikilink:     var(--link);
   --redacted:     var(--color-11);
 
+  /* ══════════════════════════════════════════════════════════════════
+     SYNTAX HIGHLIGHTING TOKENS
+     Used by 02-semantic.css (PrismJS) and 07-chroma.css (Hugo Chroma).
+     Hues are FIXED (like state colors) — not palette-driven.
+     ══════════════════════════════════════════════════════════════════ */
+
+  --syntax-comment:    var(--color-9);                /* muted — same as --text-dim */
+  --syntax-punctuation: var(--color-9);               /* same muted level */
+  --syntax-string:     oklch(75% 0.15 145);           /* green — same as --ok */
+  --syntax-keyword:    oklch(72% 0.15 250);           /* blue — close to --link-hover */
+  --syntax-function:   oklch(75% 0.15 250);           /* blue — close to --info */
+  --syntax-number:     oklch(75% 0.15 80);            /* amber — same as --warn */
+  --syntax-operator:   var(--color-5);                /* text-2 level */
+  --syntax-property:   oklch(65% 0.15 250);           /* blue — same as --link */
+  --syntax-variable:   oklch(75% 0.15 80);            /* amber */
+  --syntax-deleted:    oklch(75% 0.15 25);            /* red — same as --error */
+  --syntax-inserted:   oklch(75% 0.15 145);           /* green — same as --ok */
+  --syntax-namespace:  oklch(75% 0.15 80);            /* amber */
+  --syntax-url:        var(--link);                   /* urls look like links */
+  --syntax-tag:        oklch(75% 0.15 25);            /* red for HTML tags */
+
+  /* ── Utility tokens ─────────────────────────────────────────────── */
+
+  --print-surface:     oklch(100% 0 0);    /* white for print */
+  --print-text:        oklch(0% 0 0);      /* black for print */
+  --absolute-black:    oklch(0% 0 0);      /* redaction, forced contrast */
+  --absolute-white:    oklch(100% 0 0);    /* forced contrast */
+  --hc-border:         var(--color-10);    /* high-contrast border (one step above --border) */
+  --hc-text:           var(--color-1);     /* high-contrast text (brightest) */
+
 }
 
 
@@ -324,6 +354,22 @@
     --mark-bg:    oklch(92% 0.08 80);
     --mark-color: var(--color-15);
     --selection:  oklch(80% 0.06 250);
+
+    /* Syntax — darker shades for light backgrounds */
+    --syntax-comment:    var(--color-8);
+    --syntax-punctuation: var(--color-10);
+    --syntax-string:     oklch(40% 0.15 145);
+    --syntax-keyword:    oklch(38% 0.15 250);
+    --syntax-function:   oklch(40% 0.15 250);
+    --syntax-number:     oklch(40% 0.15 80);
+    --syntax-operator:   var(--color-11);
+    --syntax-property:   oklch(45% 0.15 250);
+    --syntax-variable:   oklch(40% 0.15 80);
+    --syntax-deleted:    oklch(40% 0.15 25);
+    --syntax-inserted:   oklch(40% 0.15 145);
+    --syntax-namespace:  oklch(40% 0.15 80);
+    --syntax-url:        var(--link);
+    --syntax-tag:        oklch(40% 0.15 25);
   }
 }
 

assets/css/layers/02-semantic.css

@@ -407,7 +407,7 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: var(--gray-6); /* TODO: map to semantic token — no alias for gray-6 (between --text-3: gray-5 and --text-dim: gray-7) */
+  color: var(--syntax-comment);
   font-style: italic;
 }
 
@@ -417,19 +417,19 @@ pre[class*="language-"] {
 
 .token.tag,
 .token.deleted {
-  color: var(--red-4); /* TODO: map to semantic token — no alias for red-4 (--error=red-7, --callout-error=red-5; syntax highlight needs lighter shade) */
+  color: var(--syntax-deleted);
 }
 
 .token.attr-name,
 .token.namespace {
-  color: var(--yellow-4); /* TODO: map to semantic token — no alias for yellow-4 (--warn=yellow-5 is close but one step darker) */
+  color: var(--syntax-namespace);
 }
 
 .token.string,
 .token.attr-value,
 .token.char,
 .token.inserted {
-  color: var(--accent-hover);  /* strings, values — --accent-hover = var(--green-4) */
+  color: var(--syntax-string);
 }
 
 .token.number,
@@ -446,7 +446,7 @@ pre[class*="language-"] {
 
 .token.keyword,
 .token.atrule {
-  color: var(--link-hover);    /* keywords, @rules — --link-hover = var(--blue-4) */
+  color: var(--syntax-keyword);
 }
 
 .token.function,
@@ -455,7 +455,7 @@ pre[class*="language-"] {
 }
 
 .token.property {
-  color: var(--info);          /* object properties — --info = var(--blue-5) */
+  color: var(--syntax-property);
 }
 
 .token.operator,
@@ -470,7 +470,7 @@ pre[class*="language-"] {
 
 .token.important,
 .token.variable {
-  color: var(--warn);          /* !important, variables — --warn = var(--yellow-5) */
+  color: var(--syntax-variable);
   font-weight: var(--font-weight-5);
 }
 
@@ -482,20 +482,20 @@ pre[class*="language-"] {
   .token.comment,
   .token.prolog,
   .token.doctype,
-  .token.cdata    { color: var(--gray-6); /* TODO: map to semantic token — no alias for gray-6 in light mode */ }
+  .token.cdata    { color: var(--syntax-comment); }
 
-  .token.punctuation   { color: var(--gray-8); /* TODO: map to semantic token — no alias for gray-8 */ }
+  .token.punctuation   { color: var(--syntax-punctuation); }
 
   .token.tag,
-  .token.deleted       { color: var(--red-8); /* TODO: map to semantic token — no alias for red-8 */ }
+  .token.deleted       { color: var(--syntax-deleted); }
 
   .token.attr-name,
-  .token.namespace     { color: var(--yellow-9); /* TODO: map to semantic token — no alias for yellow-9 */ }
+  .token.namespace     { color: var(--syntax-namespace); }
 
   .token.string,
   .token.attr-value,
   .token.char,
-  .token.inserted      { color: var(--green-8); /* TODO: map to semantic token — no alias for green-8 */ }
+  .token.inserted      { color: var(--syntax-string); }
 
   .token.number,
   .token.boolean,
@@ -506,21 +506,21 @@ pre[class*="language-"] {
   .token.builtin       { color: var(--teal-8); }
 
   .token.keyword,
-  .token.atrule        { color: var(--blue-8); /* TODO: map to semantic token — no alias for blue-8 */ }
+  .token.atrule        { color: var(--syntax-keyword); }
 
   .token.function,
   .token.class-name    { color: var(--cyan-9); }
 
-  .token.property      { color: var(--blue-9); /* TODO: map to semantic token — no alias for blue-9 */ }
+  .token.property      { color: var(--syntax-property); }
 
   .token.operator,
   .token.entity,
-  .token.url           { color: var(--gray-8); /* TODO: map to semantic token — no alias for gray-8 in light mode */ }
+  .token.url           { color: var(--syntax-url); }
 
   .token.regex         { color: var(--orange-7); }
 
   .token.important,
-  .token.variable      { color: var(--yellow-9); /* TODO: map to semantic token — no alias for yellow-9 */ }
+  .token.variable      { color: var(--syntax-variable); }
 }
 
 /* ── Details / Summary ─────────────────────────────────────────────── */

assets/css/layers/04-data-attrs.css

@@ -398,12 +398,12 @@
 
 [data-diff-line="added"] {
   background: var(--diff-add-bg);
-  color: var(--green-3); /* TODO: map to semantic token — no alias for green-3 (--accent-hover=green-4 is one step darker) */
+  color: var(--syntax-string);
 }
 
 [data-diff-line="added"]::before {
   content: "+";
-  color: var(--ok);  /* --ok = var(--green-5) */
+  color: var(--ok);
 }
 
 [data-diff-line="removed"] {
@@ -413,7 +413,7 @@
 
 [data-diff-line="removed"]::before {
   content: "−";
-  color: var(--red-6); /* TODO: map to semantic token — no alias for red-6 (--error=red-7, --callout-error=red-5) */
+  color: var(--syntax-deleted);
 }
 
 [data-diff-line="context"] {
@@ -497,12 +497,12 @@
 /* Light mode adjustments */
 @media (prefers-color-scheme: light) {
   [data-redacted] {
-    background: var(--gray-15); /* TODO: map to semantic token — no alias for absolute black; needed for redaction bar in light mode */
+    background: var(--absolute-black);
   }
   [data-redacted="reveal"]:hover,
   [data-redacted="reveal"]:focus {
-    background: var(--surface-1);  /* light mode: --surface-1 = var(--gray-1) */
-    color: var(--gray-15); /* TODO: map to semantic token — no alias for absolute black text in light mode */
+    background: var(--surface-1);
+    color: var(--absolute-black);
   }
 }
 

assets/css/layers/05-utilities.css

@@ -171,10 +171,10 @@ dl[data-layout="inline"] dd {
 /* Increase contrast for high-contrast preference */
 @media (prefers-contrast: more) {
   :root {
-    --border-color: var(--gray-10); /* TODO: map to semantic token — no alias for gray-10 (--border=gray-11; high-contrast needs one step higher) */
-    --border-color-subtle: var(--border-subtle);  /* --border-subtle = var(--gray-12) */
-    --text-primary: var(--gray-0); /* TODO: map to semantic token — no alias for gray-0 (--text=gray-1 in dark; high-contrast needs brightest white) */
-    --text-secondary: var(--text-2);  /* --text-2 = var(--gray-3) */
+    --border-color: var(--hc-border);
+    --border-color-subtle: var(--border-subtle);
+    --text-primary: var(--hc-text);
+    --text-secondary: var(--text-2);
     --border-width: var(--border-size-2);
   }
   

assets/css/layers/07-chroma.css

@@ -57,12 +57,12 @@
 .chroma .sr,
 .chroma .s1,
 .chroma .ss {
-  color: var(--accent-hover);  /* --accent-hover = var(--green-4) */
+  color: var(--syntax-string);
 }
 
 /* LiteralStringEscape — \n \t etc — slightly lighter to distinguish */
 .chroma .se {
-  color: var(--green-3); /* TODO: map to semantic token — no alias for green-3 (--accent-hover=green-4 is one step darker) */
+  color: var(--syntax-string);
 }
 
 /* ── Comments ────────────────────────────────────────────────────────── */
@@ -103,7 +103,7 @@
 .chroma .nf,
 .chroma .nx,
 .chroma .py {
-  color: var(--blue-3); /* TODO: map to semantic token — no alias for blue-3 (--link-hover=blue-4 is one step darker) */
+  color: var(--syntax-keyword);
 }
 
 /* ── Operators / Punctuation ─────────────────────────────────────────── */
@@ -117,14 +117,14 @@
 /* ── Error ───────────────────────────────────────────────────────────── */
 
 .chroma .err {
-  color: var(--red-4); /* TODO: map to semantic token — no alias for red-4 (--error=red-7 is much darker; syntax error highlight needs lighter shade) */
+  color: var(--syntax-deleted);
   background: transparent;
 }
 
 /* ── Generic diffs / emphasis ────────────────────────────────────────── */
 
-.chroma .gd { color: var(--red-4); /* TODO: map to semantic token — no alias for red-4; see --diff-remove-text=red-2 but that's even lighter */ }
-.chroma .gi { color: var(--accent-hover); /* --accent-hover = var(--green-4) */ }
+.chroma .gd { color: var(--syntax-deleted); }
+.chroma .gi { color: var(--syntax-inserted); }
 .chroma .ge { font-style: italic; }
 .chroma .gs { font-weight: bold; }
 

assets/css/layers/08-layout.css

@@ -542,8 +542,8 @@ main[data-layout="prose"],
 /* Print styles */
 @media print {
   [data-layout="report"] {
-    --surface: var(--gray-0);   /* TODO: map to semantic token — overriding --surface for print; no alias for gray-0 as "print-white" */
-    --text: var(--gray-15);     /* TODO: map to semantic token — overriding --text for print; no alias for gray-15 as "print-black" */
+    --surface: var(--print-surface);
+    --text: var(--print-text);
     font-size: 11pt;
   }