Replace raw Tailwind color utilities with semantic theme tokens

papers/p26/interactive.html

@@ -1,61 +1,61 @@
 <div id="p26-lab" class="space-y-6">
-  <section class="bg-gradient-to-r from-slate-50 via-cyan-50 to-slate-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 border border-cyan-100 dark:border-slate-700 rounded-xl p-4 space-y-4">
+  <section class="panel panel-info p-4 space-y-4">
     <div class="grid md:grid-cols-3 gap-4">
       <div>
-        <label for="p26-scenario" class="block text-sm font-semibold text-cyan-900 dark:text-cyan-100">Workload profile</label>
-        <select id="p26-scenario" class="mt-1 w-full px-3 py-2 border border-cyan-200 dark:border-slate-600 rounded-md text-sm bg-card text-heading focus:outline-none focus:ring-2 focus:ring-cyan-500">
+        <label for="p26-scenario" class="block text-sm font-semibold text-heading">Workload profile</label>
+        <select id="p26-scenario" class="mt-1 w-full px-3 py-2 border border-subtle rounded-md text-sm bg-card text-heading focus:outline-none focus:ring-2 focus:ring-accent">
           <option value="steady">Steady SaaS API (p95 &lt; 250 ms)</option>
           <option value="burst">Consumer burstiness (spiky traffic)</option>
           <option value="rl">RLHF training loop (vLLM sampler)</option>
         </select>
-        <p class="text-[11px] text-cyan-800 dark:text-cyan-200 mt-2">Scenario tunes baseline load mix, request length, and tolerance the blog measured.</p>
+        <p class="text-[11px] panel-muted mt-2">Scenario tunes baseline load mix, request length, and tolerance the blog measured.</p>
       </div>
       <div>
-        <label for="p26-load" class="block text-sm font-semibold text-cyan-900 dark:text-cyan-100">Batch volatility</label>
-        <input id="p26-load" type="range" min="0" max="2" step="1" value="1" class="w-full accent-cyan-600 mt-2">
-        <div class="flex justify-between text-[11px] text-cyan-800 dark:text-cyan-200 mt-1">
+        <label for="p26-load" class="block text-sm font-semibold text-heading">Batch volatility</label>
+        <input id="p26-load" type="range" min="0" max="2" step="1" value="1" class="w-full mt-2">
+        <div class="flex justify-between text-[11px] panel-muted mt-1">
           <span>Pinned</span>
           <span>Adaptive</span>
           <span>Spiky</span>
         </div>
       </div>
       <div>
-        <label for="p26-length" class="block text-sm font-semibold text-cyan-900 dark:text-cyan-100">Response length</label>
-        <input id="p26-length" type="range" min="64" max="512" step="32" value="256" class="w-full accent-cyan-600 mt-2">
-        <p class="text-[11px] text-cyan-800 dark:text-cyan-200 mt-1">Longer generations surface divergence sooner; values mirror the 1k-token sweep.</p>
+        <label for="p26-length" class="block text-sm font-semibold text-heading">Response length</label>
+        <input id="p26-length" type="range" min="64" max="512" step="32" value="256" class="w-full mt-2">
+        <p class="text-[11px] panel-muted mt-1">Longer generations surface divergence sooner; values mirror the 1k-token sweep.</p>
       </div>
     </div>
     <div class="grid md:grid-cols-2 gap-4">
       <div>
-        <p class="text-xs font-semibold uppercase tracking-wide text-cyan-900 dark:text-cyan-200 mb-2">Determinism patches</p>
-        <div class="flex flex-col gap-2 text-xs text-cyan-800 dark:text-cyan-200">
+        <p class="text-xs font-semibold uppercase tracking-wide text-heading mb-2">Determinism patches</p>
+        <div class="flex flex-col gap-2 text-xs panel-muted">
           <label class="inline-flex items-center gap-2">
-            <input id="p26-rms" type="checkbox" class="accent-cyan-600" checked>
+            <input id="p26-rms" type="checkbox" checked>
             <span>Batch-invariant RMSNorm</span>
           </label>
           <label class="inline-flex items-center gap-2">
-            <input id="p26-matmul" type="checkbox" class="accent-cyan-600" checked>
+            <input id="p26-matmul" type="checkbox" checked>
             <span>Fixed-tile matmul (split-K)</span>
           </label>
           <label class="inline-flex items-center gap-2">
-            <input id="p26-attn" type="checkbox" class="accent-cyan-600" checked>
+            <input id="p26-attn" type="checkbox" checked>
             <span>Deterministic FlexAttention cleanup</span>
           </label>
         </div>
       </div>
       <div>
-        <p class="text-xs font-semibold uppercase tracking-wide text-cyan-900 dark:text-cyan-200 mb-2">Queue strategy</p>
-        <div class="flex flex-col gap-2 text-xs text-cyan-800 dark:text-cyan-200">
+        <p class="text-xs font-semibold uppercase tracking-wide text-heading mb-2">Queue strategy</p>
+        <div class="flex flex-col gap-2 text-xs panel-muted">
           <label class="inline-flex items-center gap-2">
-            <input id="p26-pin" type="checkbox" class="accent-cyan-600">
+            <input id="p26-pin" type="checkbox">
             <span>Pin priority traffic to deterministic lane</span>
           </label>
           <label class="inline-flex items-center gap-2">
-            <input id="p26-dedupe" type="checkbox" class="accent-cyan-600">
+            <input id="p26-dedupe" type="checkbox">
             <span>Replay cache for identical prompts</span>
           </label>
         </div>
-        <p class="text-[11px] text-cyan-800 dark:text-cyan-200 mt-2">Operational levers change how much load variability leaks into kernel scheduling.</p>
+        <p class="text-[11px] panel-muted mt-2">Operational levers change how much load variability leaks into kernel scheduling.</p>
       </div>
     </div>
   </section>

papers/p31/interactive.html

@@ -86,7 +86,7 @@ <h4 class="text-sm font-semibold text-heading">Predicted behavioral outcomes</h4
         <div id="p31-bankruptcy" class="text-2xl font-bold text-heading">0.0%</div>
       </div>
       <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
-        <div id="p31-bankruptcy-bar" class="h-3 rounded-full transition-all duration-300 bg-green-500" style="width: 0%"></div>
+        <div id="p31-bankruptcy-bar" class="h-3 rounded-full transition-all duration-300" style="width: 0%; background-color: var(--tone-emerald-strong)"></div>
       </div>
       <div id="p31-bankruptcy-label" class="text-xs text-center font-medium text-green-600">✓ Safe range</div>
     </div>
@@ -115,7 +115,7 @@ <h4 class="text-sm font-semibold text-heading">Predicted behavioral outcomes</h4
             <span id="p31-ba-value" class="font-mono text-body">0.08</span>
           </div>
           <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-            <div id="p31-ba-bar" class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: 8%"></div>
+            <div id="p31-ba-bar" class="h-2 rounded-full transition-all duration-300" style="width: 8%; background-color: var(--tone-indigo-strong)"></div>
           </div>
         </div>
         <div>
@@ -124,7 +124,7 @@ <h4 class="text-sm font-semibold text-heading">Predicted behavioral outcomes</h4
             <span id="p31-lc-value" class="font-mono text-body">0.05</span>
           </div>
           <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-            <div id="p31-lc-bar" class="bg-amber-500 h-2 rounded-full transition-all duration-300" style="width: 5%"></div>
+            <div id="p31-lc-bar" class="h-2 rounded-full transition-all duration-300" style="width: 5%; background-color: var(--tone-amber-strong)"></div>
           </div>
         </div>
         <div>
@@ -133,7 +133,7 @@ <h4 class="text-sm font-semibold text-heading">Predicted behavioral outcomes</h4
             <span id="p31-eb-value" class="font-mono text-body">0.02</span>
           </div>
           <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-            <div id="p31-eb-bar" class="bg-red-600 h-2 rounded-full transition-all duration-300" style="width: 2%"></div>
+            <div id="p31-eb-bar" class="h-2 rounded-full transition-all duration-300" style="width: 2%; background-color: var(--tone-rose-strong)"></div>
           </div>
         </div>
       </div>

papers/p32/interactive.html

@@ -43,7 +43,7 @@ <h4 class="text-sm font-semibold text-heading">Public support for automation</h4
         <span id="p32-current-support" class="text-lg font-bold text-heading">45%</span>
       </div>
       <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
-        <div id="p32-current-bar" class="h-3 rounded-full transition-all duration-300 bg-blue-500" style="width: 45%"></div>
+        <div id="p32-current-bar" class="h-3 rounded-full transition-all duration-300" style="width: 45%; background-color: var(--tone-sky-strong)"></div>
       </div>
     </div>
 
@@ -54,7 +54,7 @@ <h4 class="text-sm font-semibold text-heading">Public support for automation</h4
         <span id="p32-superior-support" class="text-lg font-bold text-heading">68%</span>
       </div>
       <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
-        <div id="p32-superior-bar" class="h-3 rounded-full transition-all duration-300 bg-green-500" style="width: 68%"></div>
+        <div id="p32-superior-bar" class="h-3 rounded-full transition-all duration-300" style="width: 68%; background-color: var(--tone-emerald-strong)"></div>
       </div>
     </div>
 

papers/p33/interactive.html

@@ -80,7 +80,7 @@ <h5 class="text-xs font-semibold text-heading">🚀 More Resources</h5>
           <span id="p33-scale-score" class="text-xs font-bold text-body">7/10</span>
         </div>
         <div class="h-2 bg-subtle rounded-full overflow-hidden">
-          <div id="p33-scale-bar" class="h-full bg-blue-500" style="width: 70%"></div>
+          <div id="p33-scale-bar" class="h-full" style="width: 70%; background-color: var(--tone-sky-strong);"></div>
         </div>
         <p class="text-xs panel-muted leading-relaxed">Throw more computing power and data at the problem until it works. This is how GPT-4 was built.</p>
         <div class="text-xs space-y-1">
@@ -96,7 +96,7 @@ <h5 class="text-xs font-semibold text-heading">🔬 Simpler Design</h5>
           <span id="p33-simp-score" class="text-xs font-bold text-body">8/10</span>
         </div>
         <div class="h-2 bg-subtle rounded-full overflow-hidden">
-          <div id="p33-simp-bar" class="h-full bg-green-500" style="width: 80%"></div>
+          <div id="p33-simp-bar" class="h-full" style="width: 80%; background-color: var(--tone-emerald-strong);"></div>
         </div>
         <p class="text-xs panel-muted leading-relaxed">Strip down to the essentials. Simpler systems are easier to understand and often work better on new problems.</p>
         <div class="text-xs space-y-1">
@@ -112,7 +112,7 @@ <h5 class="text-xs font-semibold text-heading">⚡ Better Adaptation</h5>
           <span id="p33-w-score" class="text-xs font-bold text-body">9/10</span>
         </div>
         <div class="h-2 bg-subtle rounded-full overflow-hidden">
-          <div id="p33-w-bar" class="h-full bg-purple-500" style="width: 90%"></div>
+          <div id="p33-w-bar" class="h-full" style="width: 90%; background-color: var(--tone-purple-strong);"></div>
         </div>
         <p class="text-xs panel-muted leading-relaxed">Design systems that adapt to surprises. Like how living things handle situations they've never seen before.</p>
         <div class="text-xs space-y-1">

papers/p49/interactive.html

@@ -141,7 +141,7 @@ <h3 class="font-bold text-lg">Emotional Experience</h3>
             <!-- Center line -->
             <div class="absolute left-1/2 top-0 bottom-0 w-px bg-border"></div>
             <!-- Bar extends right from center for positive values -->
-            <div id="positiveEmotionBar" class="absolute top-0 bottom-0 bg-green-500 transition-all duration-300" style="left: 50%; width: 0%"></div>
+            <div id="positiveEmotionBar" class="absolute top-0 bottom-0 transition-all duration-300" style="left: 50%; width: 0%; background-color: var(--tone-emerald-strong)"></div>
           </div>
           <div class="flex justify-between text-xs text-muted-foreground mt-1">
             <span>-0.5 SD</span>
@@ -160,7 +160,7 @@ <h3 class="font-bold text-lg">Emotional Experience</h3>
             <!-- Center line -->
             <div class="absolute left-1/2 top-0 bottom-0 w-px bg-border"></div>
             <!-- Bar extends left from center for negative values (reduction in negative emotions) -->
-            <div id="negativeEmotionBar" class="absolute top-0 bottom-0 bg-red-500 transition-all duration-300" style="right: 50%; width: 0%"></div>
+            <div id="negativeEmotionBar" class="absolute top-0 bottom-0 transition-all duration-300" style="right: 50%; width: 0%; background-color: var(--tone-rose-strong)"></div>
           </div>
           <div class="flex justify-between text-xs text-muted-foreground mt-1">
             <span>-0.3 SD</span>