From 3d5fedb444d95a0ca001056d87e56192e512ba1e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 3 Jul 2026 09:43:04 +0000
Subject: [PATCH 1/2] feat(configurator): light mode for remaining panels
 (batch B)

Third and final part of the light-mode rollout, stacked on batch A.
Applies the theme.svelte.ts system to the remaining domain panels:
LayoutPanel, MacrosPanel, MiscPanel, MotionPanel, ShadowsPanel,
SpacingPanel, ThemesPanel, TypographyPanel, WcagPanel.

Includes a fix for a review-bot finding on the original combined PR:
LayoutPanel's two <select> controls hardcoded their <option> element
background to the dark-mode color regardless of theme (native <option>
styling has no dark: variant support), producing dark-on-dark text in
light mode. Now derived from the chrome theme at render time.
---
 .../src/components/panels/LayoutPanel.svelte  | 119 ++++++------
 .../src/components/panels/MacrosPanel.svelte  |  82 ++++-----
 .../src/components/panels/MiscPanel.svelte    | 146 +++++++--------
 .../src/components/panels/MotionPanel.svelte  |  72 ++++----
 .../src/components/panels/ShadowsPanel.svelte |  36 ++--
 .../src/components/panels/SpacingPanel.svelte |  16 +-
 .../src/components/panels/ThemesPanel.svelte  |  36 ++--
 .../components/panels/TypographyPanel.svelte  | 172 +++++++++---------
 .../src/components/panels/WcagPanel.svelte    |  60 +++---
 9 files changed, 372 insertions(+), 367 deletions(-)

diff --git a/configurator/src/components/panels/LayoutPanel.svelte b/configurator/src/components/panels/LayoutPanel.svelte
index 89b8f2c7..7866cc02 100644
--- a/configurator/src/components/panels/LayoutPanel.svelte
+++ b/configurator/src/components/panels/LayoutPanel.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import type { SlashedToken } from '../../types';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import { themeState } from '../../lib/theme.svelte';
+
+  // <option> only reliably accepts a background via inline style (no dark:
+  // variant support), so it's derived from the chrome theme directly.
+  let optionBg = $derived(themeState.value === 'dark' ? '#16161e' : '#ffffff');
 
   let { overrides, onSet, onReset, onBulkChange }: {
     overrides: Record<string, string>;
@@ -90,7 +95,7 @@
       <!-- Compact pairs -->
       <div class="grid grid-cols-2 gap-3">
         <div>
-          <div class="text-[9px] text-slate-600 mb-1">Narrow</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">Narrow</div>
           <SliderRow
             label="" value={containerNarrow} min={20} max={60} step={1} unit="rem"
             overridden={"--sf-container-narrow" in overrides}
@@ -99,7 +104,7 @@
           />
         </div>
         <div>
-          <div class="text-[9px] text-slate-600 mb-1">Prose</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">Prose</div>
           <SliderRow
             label="" value={containerProse} min={40} max={90} step={1} unit="ch"
             overridden={"--sf-container-prose" in overrides}
@@ -108,7 +113,7 @@
           />
         </div>
         <div>
-          <div class="text-[9px] text-slate-600 mb-1">Default</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">Default</div>
           <SliderRow
             label="" value={containerDefault} min={50} max={120} step={1} unit="rem"
             overridden={"--sf-container-default" in overrides}
@@ -117,7 +122,7 @@
           />
         </div>
         <div>
-          <div class="text-[9px] text-slate-600 mb-1">Wide</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">Wide</div>
           <SliderRow
             label="" value={containerWide} min={60} max={160} step={1} unit="rem"
             overridden={"--sf-container-wide" in overrides}
@@ -128,7 +133,7 @@
       </div>
 
       <!-- Visual width preview -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-2">
         {#each [
           { label: "narrow",  value: containerNarrow,  max: containerWide, unit: "rem" },
           { label: "prose",   value: containerProse,   max: containerWide * 1.5, unit: "ch" },
@@ -136,8 +141,8 @@
           { label: "wide",    value: containerWide,    max: containerWide, unit: "rem" },
         ] as row (row.label)}
           <div class="flex items-center gap-2">
-            <span class="text-[9px] font-mono text-slate-600 w-12 text-right shrink-0">{row.label}</span>
-            <div class="flex-1 h-4 bg-white/5 rounded overflow-hidden">
+            <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-12 text-right shrink-0">{row.label}</span>
+            <div class="flex-1 h-4 bg-black/5 dark:bg-white/5 rounded overflow-hidden">
               <div
                 class="h-full bg-indigo-500/30 border-r border-indigo-400/40 rounded"
                 style={`width: ${Math.min((row.value / row.max) * 100, 100)}%`}
@@ -150,7 +155,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- CENTER WRAPPER -->
   <section class="space-y-3">
@@ -186,7 +191,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- AUTO GRID -->
   <section class="space-y-4">
@@ -208,7 +213,7 @@
       />
       <!-- Named grid size tokens -->
       <div>
-        <div class="text-[9px] text-slate-600 mb-1.5">Named sizes (grid-min-xs → 2xl)</div>
+        <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1.5">Named sizes (grid-min-xs → 2xl)</div>
         <div class="space-y-1.5">
           {#each [
             { label: "xs",  token: "--sf-grid-min-xs",  def: 10 },
@@ -227,21 +232,21 @@
           {/each}
         </div>
       </div>
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3">
-        <div class="text-[9px] text-slate-600 mb-2 font-mono">Preview at 360px panel width</div>
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3">
+        <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-2 font-mono">Preview at 360px panel width</div>
         <div
           class="grid gap-1"
           style={`grid-template-columns: repeat(auto-fill, minmax(${Math.min(gridMin * 16 * (360 / 1200), 120)}px, 1fr))`}
         >
           {#each Array.from({ length: 8 }) as _, i (i)}
-            <div class="h-8 bg-indigo-500/20 border border-indigo-500/20 rounded text-[8px] font-mono text-indigo-400/60 flex items-center justify-center">col</div>
+            <div class="h-8 bg-indigo-500/20 border border-indigo-500/20 rounded text-[8px] font-mono text-indigo-600/60 dark:text-indigo-400/60 flex items-center justify-center">col</div>
           {/each}
         </div>
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- HEADER -->
   <section class="space-y-4">
@@ -256,7 +261,7 @@
     {#if showHeaderHeight}
       <div class="grid grid-cols-2 gap-3">
         <div>
-          <div class="text-[9px] text-slate-600 mb-1">Mobile</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">Mobile</div>
           <SliderRow
             label="" value={headerMobile} min={2} max={8} step={0.25} unit="rem"
             overridden={"--sf-header-height-mobile" in overrides}
@@ -265,7 +270,7 @@
           />
         </div>
         <div>
-          <div class="text-[9px] text-slate-600 mb-1">Desktop</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">Desktop</div>
           <SliderRow
             label="" value={headerDesktop} min={3} max={10} step={0.25} unit="rem"
             overridden={"--sf-header-height-desktop" in overrides}
@@ -274,24 +279,24 @@
           />
         </div>
       </div>
-      <div class="bg-white/4 rounded-xl border border-white/8 overflow-hidden">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 overflow-hidden">
         <div
-          class="flex items-center px-3 bg-indigo-500/10 border-b border-white/8"
+          class="flex items-center px-3 bg-indigo-500/10 border-b border-black/8 dark:border-white/8"
           style={`height: ${Math.min(headerMobile * 12, 64)}px`}
         >
           <div class="w-16 h-2 bg-indigo-400/40 rounded"></div>
           <div class="ml-auto flex gap-2">
             {#each [1, 2, 3] as i (i)}
-              <div class="w-8 h-1.5 bg-slate-600/60 rounded"></div>
+              <div class="w-8 h-1.5 bg-slate-400/60 dark:bg-slate-600/60 rounded"></div>
             {/each}
           </div>
         </div>
-        <div class="p-2 text-[9px] text-slate-600 font-mono">{headerMobile}rem mobile · {headerDesktop}rem desktop</div>
+        <div class="p-2 text-[9px] text-slate-400 dark:text-slate-600 font-mono">{headerMobile}rem mobile · {headerDesktop}rem desktop</div>
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- STICKY OFFSETS -->
   <section class="space-y-3">
@@ -304,10 +309,10 @@
       <span class="text-[10px] text-slate-500">{showStickyOffset ? "▲" : "▼"}</span>
     </button>
     {#if showStickyOffset}
-      <p class="text-[9px] text-slate-600">Offsets position:sticky elements below a fixed header. Defaults to header heights.</p>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600">Offsets position:sticky elements below a fixed header. Defaults to header heights.</p>
       <div class="grid grid-cols-2 gap-3">
         <div>
-          <div class="text-[9px] text-slate-600 mb-1">Mobile</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">Mobile</div>
           <SliderRow
             label="" value={stickyMobile} min={0} max={12} step={0.25} unit="rem"
             overridden={"--sf-sticky-offset-mobile" in overrides}
@@ -319,7 +324,7 @@
           />
         </div>
         <div>
-          <div class="text-[9px] text-slate-600 mb-1">Desktop</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">Desktop</div>
           <SliderRow
             label="" value={stickyDesktop} min={0} max={12} step={0.25} unit="rem"
             overridden={"--sf-sticky-offset-desktop" in overrides}
@@ -334,7 +339,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SIDEBAR -->
   <section class="space-y-4">
@@ -354,26 +359,26 @@
         onChange={(v) => onSet("--sf-sidebar-width", `${v}rem`)}
         onReset={() => onReset("--sf-sidebar-width")}
       />
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex gap-2 items-stretch" style="height: 60px">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex gap-2 items-stretch" style="height: 60px">
         <div
           class="bg-indigo-500/15 border border-indigo-500/20 rounded flex-shrink-0 flex items-center justify-center"
           style={`width: ${Math.min(sidebarWidth * 3.5, 100)}px`}
         >
-          <span class="text-[8px] font-mono text-indigo-400/60 rotate-90 whitespace-nowrap">{sidebarWidth}rem</span>
+          <span class="text-[8px] font-mono text-indigo-600/60 dark:text-indigo-400/60 rotate-90 whitespace-nowrap">{sidebarWidth}rem</span>
         </div>
-        <div class="flex-1 bg-white/4 rounded"></div>
+        <div class="flex-1 bg-black/4 dark:bg-white/4 rounded"></div>
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- BENTO GRID -->
   <div>
     <button
       onclick={() => { showBento = !showBento; }}
       aria-expanded={showBento}
-      class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"
+      class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors cursor-pointer py-1"
     >
       <span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Bento grid</span>
       <span class="text-[10px] text-slate-500">{showBento ? "▲" : "▼"}</span>
@@ -393,7 +398,7 @@
     {/if}
   </div>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- MORE LAYOUT PRIMITIVES -->
   <div>
@@ -401,7 +406,7 @@
       onclick={() => { showMore = !showMore; }}
       aria-expanded={showMore}
       aria-controls="more-layout-primitives"
-      class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"
+      class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors cursor-pointer py-1"
     >
       <span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">More layout primitives</span>
       <span class="text-[10px] text-slate-500">{showMore ? "▲" : "▼"}</span>
@@ -441,21 +446,21 @@
             { label: "Justify", token: "--sf-cluster-justify", def: "flex-start", opts: ["flex-start","center","flex-end","space-between","space-around"] },
           ] as row (row.token)}
             <div class="flex items-center gap-2">
-              <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">{row.label}</span>
+              <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">{row.label}</span>
               <select
                 value={overrides[row.token] ?? row.def}
                 onchange={(e) => {
                   const v = (e.target as HTMLSelectElement).value;
                   v === row.def ? onReset(row.token) : onSet(row.token, v);
                 }}
-                class="flex-1 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
+                class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
               >
                 {#each row.opts as o (o)}
-                  <option value={o} style="background:#16161e;">{o}</option>
+                  <option value={o} style={`background:${optionBg};`}>{o}</option>
                 {/each}
               </select>
               {#if row.token in overrides}
-                <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+                <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
               {/if}
             </div>
           {/each}
@@ -472,7 +477,7 @@
             onReset={() => onReset("--sf-equal-min-col")}
           />
           <div>
-            <div class="text-[9px] text-slate-600 mb-1.5">Named column counts (equal-min-col-2/3/4/6)</div>
+            <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1.5">Named column counts (equal-min-col-2/3/4/6)</div>
             <div class="space-y-1.5">
               {#each [
                 { label: "2-col", token: "--sf-equal-min-col-2", def: 28 },
@@ -506,15 +511,15 @@
         <!-- Frame ratio -->
         <section class="space-y-2">
           <div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Frame ratio</div>
-          <p class="text-[9px] text-slate-600">--sf-frame-ratio — aspect ratio for .sf-frame</p>
+          <p class="text-[9px] text-slate-400 dark:text-slate-600">--sf-frame-ratio — aspect ratio for .sf-frame</p>
           <div class="grid grid-cols-5 gap-1">
             {#each FRAME_PRESETS as r (r)}
               <button
                 onclick={() => r === "16 / 9" ? onReset("--sf-frame-ratio") : onSet("--sf-frame-ratio", r)}
                 class={`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${
                   frameRatio.replace(/\s/g, "") === r.replace(/\s/g, "")
-                    ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                    : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                    ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                    : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
                 }`}
               >{r}</button>
             {/each}
@@ -524,21 +529,21 @@
         <!-- Reel -->
         <section class="space-y-2">
           <div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Reel</div>
-          <p class="text-[9px] text-slate-600">--sf-reel-item-width — width of each item in a horizontal .sf-reel</p>
+          <p class="text-[9px] text-slate-400 dark:text-slate-600">--sf-reel-item-width — width of each item in a horizontal .sf-reel</p>
           <div class="grid grid-cols-4 gap-1">
             {#each REEL_PRESETS as p (p.value)}
               <button
                 onclick={() => p.value === "max-content" ? onReset("--sf-reel-item-width") : onSet("--sf-reel-item-width", p.value)}
                 class={`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${
                   reelItemWidth === p.value
-                    ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                    : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                    ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                    : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
                 }`}
               >{p.label}</button>
             {/each}
           </div>
           <div class="flex items-center gap-2 pt-0.5">
-            <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Height</span>
+            <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Height</span>
             <input
               type="text"
               value={overrides["--sf-reel-height"] ?? ""}
@@ -547,10 +552,10 @@
                 const v = (e.target as HTMLInputElement).value.trim();
                 v ? onSet("--sf-reel-height", v) : onReset("--sf-reel-height");
               }}
-              class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+              class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
             />
             {#if "--sf-reel-height" in overrides}
-              <button onclick={() => onReset("--sf-reel-height")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+              <button onclick={() => onReset("--sf-reel-height")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
             {/if}
           </div>
         </section>
@@ -613,7 +618,7 @@
     {/if}
   </div>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- NAMED RATIOS -->
   <div>
@@ -627,7 +632,7 @@
     </button>
     {#if showNamedRatios}
       <div class="mt-2 space-y-2">
-        <p class="text-[9px] text-slate-600">Override the built-in named aspect ratios used by <span class="font-mono text-slate-400">.sf-ratio-*</span> utilities.</p>
+        <p class="text-[9px] text-slate-400 dark:text-slate-600">Override the built-in named aspect ratios used by <span class="font-mono text-slate-600 dark:text-slate-400">.sf-ratio-*</span> utilities.</p>
         {#each [
           { label: "Square",   token: "--sf-ratio-square",   def: "1"       },
           { label: "Portrait", token: "--sf-ratio-portrait", def: "3 / 4"   },
@@ -638,7 +643,7 @@
           { label: "Golden",   token: "--sf-ratio-golden",   def: "1.618 / 1" },
         ] as r (r.token)}
           <div class="flex items-center gap-2">
-            <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">{r.label}</span>
+            <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">{r.label}</span>
             <input
               type="text"
               value={overrides[r.token] ?? ""}
@@ -647,10 +652,10 @@
                 const v = (e.target as HTMLInputElement).value.trim();
                 v ? onSet(r.token, v) : onReset(r.token);
               }}
-              class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+              class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
             />
             {#if r.token in overrides}
-              <button onclick={() => onReset(r.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+              <button onclick={() => onReset(r.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
             {/if}
           </div>
         {/each}
@@ -658,7 +663,7 @@
     {/if}
   </div>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- BACKGROUND LAYER -->
   <div>
@@ -672,27 +677,27 @@
     </button>
     {#if showBgLayer}
       <div class="mt-2 space-y-3">
-        <p class="text-[9px] text-slate-600">Default values for the <span class="font-mono text-slate-400">.sf-bg</span> full-bleed background utility.</p>
+        <p class="text-[9px] text-slate-400 dark:text-slate-600">Default values for the <span class="font-mono text-slate-600 dark:text-slate-400">.sf-bg</span> full-bleed background utility.</p>
         {#each [
           { label: "Fit",      token: "--sf-bg-fit",      placeholder: "cover",    opts: ["cover","contain","fill","none","scale-down"] },
           { label: "Position", token: "--sf-bg-position", placeholder: "50% 50%",  opts: ["50% 50%","top","bottom","left","right","center"] },
         ] as row (row.token)}
           <div class="flex items-center gap-2">
-            <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">{row.label}</span>
+            <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">{row.label}</span>
             <select
               value={overrides[row.token] ?? row.placeholder}
               onchange={(e) => {
                 const v = (e.target as HTMLSelectElement).value;
                 v === row.placeholder ? onReset(row.token) : onSet(row.token, v);
               }}
-              class="flex-1 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
+              class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
             >
               {#each row.opts as o (o)}
-                <option value={o} style="background:#16161e;">{o}</option>
+                <option value={o} style={`background:${optionBg};`}>{o}</option>
               {/each}
             </select>
             {#if row.token in overrides}
-              <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+              <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
             {/if}
           </div>
         {/each}
diff --git a/configurator/src/components/panels/MacrosPanel.svelte b/configurator/src/components/panels/MacrosPanel.svelte
index 62203918..577a59a0 100644
--- a/configurator/src/components/panels/MacrosPanel.svelte
+++ b/configurator/src/components/panels/MacrosPanel.svelte
@@ -70,11 +70,11 @@
 
 <div class="p-4 space-y-6">
 
-  <p class="text-[10px] text-slate-600 leading-relaxed">
-    Tokens for the framework's utility macros — <span class="font-mono text-slate-400">.sf-prose</span>,
-    <span class="font-mono text-slate-400">.sf-flow</span>, <span class="font-mono text-slate-400">.sf-line-clamp</span>,
-    <span class="font-mono text-slate-400">.sf-aspect</span>, <span class="font-mono text-slate-400">.sf-scroll-shadow</span>
-    and <span class="font-mono text-slate-400">.sf-scrim</span>.
+  <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
+    Tokens for the framework's utility macros — <span class="font-mono text-slate-600 dark:text-slate-400">.sf-prose</span>,
+    <span class="font-mono text-slate-600 dark:text-slate-400">.sf-flow</span>, <span class="font-mono text-slate-600 dark:text-slate-400">.sf-line-clamp</span>,
+    <span class="font-mono text-slate-600 dark:text-slate-400">.sf-aspect</span>, <span class="font-mono text-slate-600 dark:text-slate-400">.sf-scroll-shadow</span>
+    and <span class="font-mono text-slate-600 dark:text-slate-400">.sf-scrim</span>.
   </p>
 
   <!-- FLOW -->
@@ -98,7 +98,7 @@
         currentRaw={overrides["--sf-flow-space"]}
         onRawSet={(v) => onSet("--sf-flow-space", v)}
       />
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3" style={`display:flex;flex-direction:column;gap:${flowSpace}rem`}>
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3" style={`display:flex;flex-direction:column;gap:${flowSpace}rem`}>
         {#each [0, 1, 2] as i (i)}
           <div class="h-2.5 rounded bg-indigo-500/40" style={`width:${90 - i * 12}%`}></div>
         {/each}
@@ -106,7 +106,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- LINE CLAMP -->
   <section class="space-y-3">
@@ -126,9 +126,9 @@
         onChange={(v) => onSet("--sf-line-clamp", String(v))}
         onReset={() => onReset("--sf-line-clamp")}
       />
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3">
         <p
-          class="text-[11px] text-slate-300 leading-relaxed"
+          class="text-[11px] text-slate-700 dark:text-slate-300 leading-relaxed"
           style={`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${lineClamp};overflow:hidden`}
         >
           SLASHED is a token-first CSS framework. This sample paragraph repeats so you
@@ -140,7 +140,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ASPECT -->
   <section class="space-y-3">
@@ -153,29 +153,29 @@
       <span class="text-[10px] text-slate-500">{showAspect ? "▲" : "▼"}</span>
     </button>
     {#if showAspect}
-      <p class="text-[9px] text-slate-600">--sf-aspect — default ratio for .sf-aspect / .sf-frame</p>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600">--sf-aspect — default ratio for .sf-aspect / .sf-frame</p>
       <div class="grid grid-cols-3 gap-1.5">
         {#each ASPECT_PRESETS as p (p.value)}
           <button
             onclick={() => p.value === "16 / 9" ? onReset("--sf-aspect") : onSet("--sf-aspect", p.value)}
             class={`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
               aspectVal.replace(/\s/g, "") === p.value.replace(/\s/g, "")
-                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
             }`}
           >{p.label}</button>
         {/each}
       </div>
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex justify-center">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex justify-center">
         <div
-          class="bg-indigo-500/30 border border-indigo-500/30 rounded-lg flex items-center justify-center text-[9px] font-mono text-indigo-200"
+          class="bg-indigo-500/30 border border-indigo-500/30 rounded-lg flex items-center justify-center text-[9px] font-mono text-indigo-800 dark:text-indigo-200"
           style={`aspect-ratio:${aspectVal};max-height:120px;max-width:100%;width:auto;height:120px`}
         >{aspectVal}</div>
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SCROLL SHADOW -->
   <section class="space-y-3">
@@ -198,7 +198,7 @@
         currentRaw={overrides["--sf-scroll-shadow-size"]}
         onRawSet={(v) => onSet("--sf-scroll-shadow-size", v)}
       />
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3">
         <div
           class="h-8 rounded bg-indigo-500/40"
           style={`mask:linear-gradient(to right, transparent, #000 ${scrollSize}rem, #000 calc(100% - ${scrollSize}rem), transparent)`}
@@ -207,7 +207,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SCRIM -->
   <section class="space-y-3">
@@ -220,9 +220,9 @@
       <span class="text-[10px] text-slate-500">{showScrim ? "▲" : "▼"}</span>
     </button>
     {#if showScrim}
-      <p class="text-[9px] text-slate-600">--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim</p>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600">--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim</p>
       <div class="flex items-center gap-2">
-        <div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Color</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">Color</div>
         <input
           type="text"
           value={overrides["--sf-scrim-color"] ?? ""}
@@ -231,34 +231,34 @@
             const v = (e.target as HTMLInputElement).value.trim();
             v ? onSet("--sf-scrim-color", v) : onReset("--sf-scrim-color");
           }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
         />
         {#if "--sf-scrim-color" in overrides}
-          <button onclick={() => onReset("--sf-scrim-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          <button onclick={() => onReset("--sf-scrim-color")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
       <div>
-        <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Direction</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Direction</div>
         <div class="grid grid-cols-3 gap-1">
           {#each SCRIM_DIRECTIONS as d (d.value)}
             <button
               onclick={() => d.value === "to top" ? onReset("--sf-scrim-direction") : onSet("--sf-scrim-direction", d.value)}
               class={`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${
                 scrimDir === d.value
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                  : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
               }`}
             >{d.label}</button>
           {/each}
         </div>
       </div>
-      <div class="relative h-24 rounded-xl border border-white/8 overflow-hidden flex items-end p-2"
+      <div class="relative h-24 rounded-xl border border-black/8 dark:border-white/8 overflow-hidden flex items-end p-2"
         style="background:repeating-linear-gradient(45deg,#475569,#475569 8px,#334155 8px,#334155 16px)">
         <div class="absolute inset-0" style={`background:linear-gradient(${scrimDir}, ${scrimColor}, transparent)`}></div>
         <span class="relative text-[11px] font-bold text-white">Caption over scrim</span>
       </div>
       <div class="flex items-center gap-2">
-        <div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Text shadow</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">Text shadow</div>
         <input
           type="text"
           value={overrides["--sf-scrim-text-shadow"] ?? ""}
@@ -267,16 +267,16 @@
             const v = (e.target as HTMLInputElement).value.trim();
             v ? onSet("--sf-scrim-text-shadow", v) : onReset("--sf-scrim-text-shadow");
           }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
         />
         {#if "--sf-scrim-text-shadow" in overrides}
-          <button onclick={() => onReset("--sf-scrim-text-shadow")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          <button onclick={() => onReset("--sf-scrim-text-shadow")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- PROSE -->
   <section class="space-y-3">
@@ -289,7 +289,7 @@
       <span class="text-[10px] text-slate-500">{showProse ? "▲" : "▼"}</span>
     </button>
     {#if showProse}
-      <p class="text-[9px] text-slate-600">Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.</p>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600">Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.</p>
       <div class="space-y-2">
         {#each PROSE_SPACE as t (t.token)}
           <SliderRow
@@ -314,7 +314,7 @@
           onRawSet={(v) => onSet("--sf-prose-media-radius", v)}
         />
         <div class="flex items-center gap-2 pt-1">
-          <div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Marker color</div>
+          <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">Marker color</div>
           <input
             type="text"
             value={overrides["--sf-prose-marker-color"] ?? ""}
@@ -323,10 +323,10 @@
               const v = (e.target as HTMLInputElement).value.trim();
               v ? onSet("--sf-prose-marker-color", v) : onReset("--sf-prose-marker-color");
             }}
-            class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+            class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
           />
           {#if "--sf-prose-marker-color" in overrides}
-            <button onclick={() => onReset("--sf-prose-marker-color")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+            <button onclick={() => onReset("--sf-prose-marker-color")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
           {/if}
         </div>
       </div>
@@ -344,11 +344,11 @@
       <span class="text-[10px] text-slate-500">{showContentIntrinsic ? "▲" : "▼"}</span>
     </button>
     {#if showContentIntrinsic}
-      <p class="text-[9px] text-slate-600 leading-relaxed">
-        --sf-content-intrinsic-size — placeholder size used with <span class="font-mono text-slate-400">content-visibility: auto</span> to improve scroll performance on tall pages.
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
+        --sf-content-intrinsic-size — placeholder size used with <span class="font-mono text-slate-600 dark:text-slate-400">content-visibility: auto</span> to improve scroll performance on tall pages.
       </p>
       <div class="flex items-center gap-2">
-        <div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Intrinsic size</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">Intrinsic size</div>
         <input
           type="text"
           value={overrides["--sf-content-intrinsic-size"] ?? ""}
@@ -357,18 +357,18 @@
             const v = (e.target as HTMLInputElement).value.trim();
             v ? onSet("--sf-content-intrinsic-size", v) : onReset("--sf-content-intrinsic-size");
           }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
         />
         {#if "--sf-content-intrinsic-size" in overrides}
-          <button onclick={() => onReset("--sf-content-intrinsic-size")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          <button onclick={() => onReset("--sf-content-intrinsic-size")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
     {/if}
   </section>
 
-  <div class="rounded-lg bg-white/3 border border-white/6 p-3">
+  <div class="rounded-lg bg-black/3 dark:bg-white/3 border border-black/6 dark:border-white/6 p-3">
     <p class="text-[10px] text-slate-500 leading-relaxed">
-      <span class="text-slate-400 font-semibold">All tokens tab</span> — edit every prose, scrim and surface token directly.
+      <span class="text-slate-600 dark:text-slate-400 font-semibold">All tokens tab</span> — edit every prose, scrim and surface token directly.
     </p>
   </div>
 </div>
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index e8fc861a..faa73823 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -88,19 +88,19 @@
         onReset={() => onReset("--sf-touch-target")}
       />
       <!-- Preview -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-center gap-3">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex items-center gap-3">
         <div
-          class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-400/70 shrink-0"
+          class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-600/70 dark:text-indigo-400/70 shrink-0"
           style={`width: ${touchTarget}px; height: ${touchTarget}px`}
         >
           {touchTarget}px
         </div>
-        <p class="text-[9px] text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p>
+        <p class="text-[9px] text-slate-400 dark:text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p>
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SCROLL BEHAVIOR -->
   <section class="space-y-3">
@@ -119,8 +119,8 @@
             onclick={() => b.value === "smooth" ? onReset("--sf-scroll-behavior") : onSet("--sf-scroll-behavior", b.value)}
             class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
               scrollBehavior === b.value
-                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
             }`}
           >
             {b.label}
@@ -130,7 +130,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- Z-INDEX -->
   <section class="space-y-3">
@@ -150,22 +150,22 @@
         onChange={(v) => onSet("--sf-z-base", String(v))}
         onReset={() => onReset("--sf-z-base")}
       />
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1.5">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1.5">
         {#each Z_INDEX_STEPS as z (z.token)}
           {@const isOverridden = z.token in overrides}
           <div class="flex items-center gap-2">
-            <div class={`w-1.5 h-1.5 rounded-full shrink-0 ${isOverridden ? "bg-amber-400" : "bg-white/20"}`}></div>
-            <span class="text-[9px] font-mono text-slate-400 w-20 shrink-0">{z.label}</span>
-            <span class="text-[8px] text-slate-600 flex-1">{z.note}</span>
+            <div class={`w-1.5 h-1.5 rounded-full shrink-0 ${isOverridden ? "bg-amber-400" : "bg-black/20 dark:bg-white/20"}`}></div>
+            <span class="text-[9px] font-mono text-slate-600 dark:text-slate-400 w-20 shrink-0">{z.label}</span>
+            <span class="text-[8px] text-slate-400 dark:text-slate-600 flex-1">{z.note}</span>
             <span class="text-[8px] font-mono text-slate-500">{z.token.replace("--sf-z-", "")}</span>
           </div>
         {/each}
       </div>
-      <p class="text-[9px] text-slate-600">Override individual z-index tokens in the "All tokens" tab.</p>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600">Override individual z-index tokens in the "All tokens" tab.</p>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SELECTION -->
   <section class="space-y-3">
@@ -180,7 +180,7 @@
     {#if showTextSelection}
       <div class="space-y-2">
         <div>
-          <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection background</div>
+          <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Selection background</div>
           <ColorInput
             token="--sf-color-selection-bg"
             value={overrides["--sf-color-selection-bg"] ?? ""}
@@ -191,7 +191,7 @@
           />
         </div>
         <div>
-          <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection text color</div>
+          <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Selection text color</div>
           <ColorInput
             token="--sf-color-selection-text"
             value={overrides["--sf-color-selection-text"] ?? ""}
@@ -202,9 +202,9 @@
           />
         </div>
         <!-- Selection preview -->
-        <div class="bg-white/4 rounded-xl border border-white/8 p-3">
+        <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3">
           <p
-            class="text-[11px] text-slate-200 select-all"
+            class="text-[11px] text-slate-800 dark:text-slate-200 select-all"
             style={`--sf-color-selection-bg: ${overrides["--sf-color-selection-bg"] ?? "#6366f1"}; --sf-color-selection-text: ${overrides["--sf-color-selection-text"] ?? "#ffffff"}`}
           >
             Select this text to preview the selection color.
@@ -214,7 +214,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- FOCUS RING STYLE -->
   <section class="space-y-3">
@@ -234,8 +234,8 @@
             onclick={() => style === "solid" ? onReset("--sf-focus-ring-style") : onSet("--sf-focus-ring-style", style)}
             class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${
               current === style
-                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
             }`}
           >
             {style}
@@ -243,9 +243,9 @@
         {/each}
       </div>
       <!-- Focus ring style preview -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex items-center justify-center">
         <div
-          class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-200"
+          class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-800 dark:text-indigo-200"
           style={`outline: 2px ${focusRingStyle} ${overrides["--sf-focus-ring-color"] || "oklch(0.7 0.2 235)"}; outline-offset: 2px`}
         >
           Focus ring · {focusRingStyle}
@@ -254,7 +254,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- COMPONENT SIZES -->
   <section class="space-y-3">
@@ -267,7 +267,7 @@
       <span class="text-[10px] text-slate-500">{showComponentSizes ? "▲" : "▼"}</span>
     </button>
     {#if showComponentSizes}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Controls the height / tap-target of all sized components (buttons, inputs, badges).
       </p>
       <div class="space-y-2">
@@ -283,7 +283,7 @@
         {/each}
       </div>
       <!-- Visual preview -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-end gap-2">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex items-end gap-2">
         {#each SIZE_TOKENS as s (s.token)}
           {@const val = getSizeValue(s)}
           <div class="flex flex-col items-center gap-1 flex-1">
@@ -291,14 +291,14 @@
               class="w-full bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center"
               style={`height: ${Math.min(val * 14, 64)}px`}
             ></div>
-            <span class="text-[8px] font-mono text-slate-600">{s.label}</span>
+            <span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">{s.label}</span>
           </div>
         {/each}
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- CARET & LINKS -->
   <section class="space-y-3">
@@ -312,7 +312,7 @@
     </button>
     {#if showCaretLinks}
       <div>
-        <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Caret color</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Caret color</div>
         <ColorInput
           token="--sf-caret-color"
           value={caretColor}
@@ -331,9 +331,9 @@
       />
       <div class="group">
         <div class="flex items-center justify-between mb-1.5">
-          <span class="text-[11px] font-semibold text-slate-200">Underline thickness</span>
+          <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Underline thickness</span>
           {#if "--sf-link-underline-thickness" in overrides}
-            <button onclick={() => onReset("--sf-link-underline-thickness")} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+            <button onclick={() => onReset("--sf-link-underline-thickness")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
           {/if}
         </div>
         <div class="flex gap-1">
@@ -342,26 +342,26 @@
               onclick={() => val === "auto" ? onReset("--sf-link-underline-thickness") : onSet("--sf-link-underline-thickness", val)}
               class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${
                 underlineThickness === val
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                  : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
               }`}
             >{label}</button>
           {/each}
         </div>
       </div>
       <!-- Live sample: caret (type in the field) + underlined link -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-2">
         <input
           type="text"
           placeholder="Click and type to see the caret…"
           style={`caret-color:${caretColor || "#6366f1"}`}
-          class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+          class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
         />
-        <p class="text-[11px] text-slate-300">
+        <p class="text-[11px] text-slate-700 dark:text-slate-300">
           A <a
             href="#sample-link"
             onclick={(e) => e.preventDefault()}
-            class="text-indigo-300"
+            class="text-indigo-700 dark:text-indigo-300"
             style={`text-decoration:underline;text-underline-offset:${underlineOffset}em;text-decoration-thickness:${underlineThickness}`}
           >sample link</a> with the current underline settings.
         </p>
@@ -369,7 +369,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ICON SIZES -->
   <section class="space-y-3">
@@ -382,8 +382,8 @@
       <span class="text-[10px] text-slate-500">{showIconSizes ? "▲" : "▼"}</span>
     </button>
     {#if showIconSizes}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
-        Icon scale tokens used by <span class="font-mono text-slate-400">.sf-icon-*</span> utilities. Values are in <span class="font-mono text-slate-400">em</span> units relative to surrounding text.
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
+        Icon scale tokens used by <span class="font-mono text-slate-600 dark:text-slate-400">.sf-icon-*</span> utilities. Values are in <span class="font-mono text-slate-600 dark:text-slate-400">em</span> units relative to surrounding text.
       </p>
       <div class="space-y-1.5">
         {#each [
@@ -412,7 +412,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- OBJECT FIT / POSITION -->
   <section class="space-y-3">
@@ -425,24 +425,24 @@
       <span class="text-[10px] text-slate-500">{showObjectFit ? "▲" : "▼"}</span>
     </button>
     {#if showObjectFit}
-      <p class="text-[9px] text-slate-600">Default values for <span class="font-mono text-slate-400">.sf-media</span> images and replaced elements.</p>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600">Default values for <span class="font-mono text-slate-600 dark:text-slate-400">.sf-media</span> images and replaced elements.</p>
       <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Fit</span>
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Fit</span>
         <div class="flex gap-1 flex-1">
           {#each ["cover","contain","fill","none"] as v (v)}
             {@const cur = overrides["--sf-object-fit"] ?? "cover"}
             <button
               onclick={() => v === "cover" ? onReset("--sf-object-fit") : onSet("--sf-object-fit", v)}
-              class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${cur === v ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" : "border-white/8 text-slate-400 hover:bg-white/5"}`}
+              class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${cur === v ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5"}`}
             >{v}</button>
           {/each}
         </div>
         {#if "--sf-object-fit" in overrides}
-          <button onclick={() => onReset("--sf-object-fit")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
+          <button onclick={() => onReset("--sf-object-fit")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer">reset</button>
         {/if}
       </div>
       <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Position</span>
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Position</span>
         <input
           type="text"
           value={overrides["--sf-object-position"] ?? ""}
@@ -451,16 +451,16 @@
             const v = (e.target as HTMLInputElement).value.trim();
             v ? onSet("--sf-object-position", v) : onReset("--sf-object-position");
           }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
         />
         {#if "--sf-object-position" in overrides}
-          <button onclick={() => onReset("--sf-object-position")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          <button onclick={() => onReset("--sf-object-position")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SAFE AREA INSETS -->
   <section class="space-y-3">
@@ -473,8 +473,8 @@
       <span class="text-[10px] text-slate-500">{showSafeArea ? "▲" : "▼"}</span>
     </button>
     {#if showSafeArea}
-      <p class="text-[9px] text-slate-600 leading-relaxed">
-        Default to the device's <span class="font-mono text-slate-400">env(safe-area-inset-*)</span>. Override only if you need fixed padding regardless of notch/home-indicator.
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
+        Default to the device's <span class="font-mono text-slate-600 dark:text-slate-400">env(safe-area-inset-*)</span>. Override only if you need fixed padding regardless of notch/home-indicator.
       </p>
       <div class="space-y-1.5">
         {#each [
@@ -484,7 +484,7 @@
           { label: "Left",   token: "--sf-safe-left",   placeholder: "env(safe-area-inset-left, 0px)" },
         ] as row (row.token)}
           <div class="flex items-center gap-2">
-            <span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0">{row.label}</span>
+            <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-14 shrink-0">{row.label}</span>
             <input
               type="text"
               value={overrides[row.token] ?? ""}
@@ -493,10 +493,10 @@
                 const v = (e.target as HTMLInputElement).value.trim();
                 v ? onSet(row.token, v) : onReset(row.token);
               }}
-              class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+              class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
             />
             {#if row.token in overrides}
-              <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+              <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
             {/if}
           </div>
         {/each}
@@ -504,7 +504,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- PRINT -->
   <section class="space-y-3">
@@ -517,15 +517,15 @@
       <span class="text-[10px] text-slate-500">{showPrint ? "▲" : "▼"}</span>
     </button>
     {#if showPrint}
-      <p class="text-[9px] text-slate-600">Applied inside <span class="font-mono text-slate-400">@media print</span> via <span class="font-mono text-slate-400">optional/print.css</span>.</p>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600">Applied inside <span class="font-mono text-slate-600 dark:text-slate-400">@media print</span> via <span class="font-mono text-slate-600 dark:text-slate-400">optional/print.css</span>.</p>
       <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Page size</span>
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Page size</span>
         <div class="flex gap-1 flex-1">
           {#each ["a4","letter","legal","a3"] as v (v)}
             {@const cur = overrides["--sf-print-page-size"] ?? "a4"}
             <button
               onclick={() => v === "a4" ? onReset("--sf-print-page-size") : onSet("--sf-print-page-size", v)}
-              class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${cur === v ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" : "border-white/8 text-slate-400 hover:bg-white/5"}`}
+              class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${cur === v ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5"}`}
             >{v}</button>
           {/each}
         </div>
@@ -535,7 +535,7 @@
         { label: "Page margin", token: "--sf-print-page-margin", placeholder: "2cm" },
       ] as row (row.token)}
         <div class="flex items-center gap-2">
-          <span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">{row.label}</span>
+          <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">{row.label}</span>
           <input
             type="text"
             value={overrides[row.token] ?? ""}
@@ -544,17 +544,17 @@
               const v = (e.target as HTMLInputElement).value.trim();
               v ? onSet(row.token, v) : onReset(row.token);
             }}
-            class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+            class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
           />
           {#if row.token in overrides}
-            <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+            <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
           {/if}
         </div>
       {/each}
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- STATE FLAGS -->
   <section class="space-y-3">
@@ -567,7 +567,7 @@
       <span class="text-[10px] text-slate-500">{showStateFlags ? "▲" : "▼"}</span>
     </button>
     {#if showStateFlags}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles.
         Overriding globally forces all matching elements into that state — useful for testing and demos.
       </p>
@@ -585,20 +585,20 @@
               aria-label={f.label}
               aria-pressed={cur === "1"}
               onclick={() => cur === "1" ? onReset(f.token) : onSet(f.token, "1")}
-              class={`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${cur === "1" ? "bg-indigo-600" : "bg-white/10"}`}
+              class={`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${cur === "1" ? "bg-indigo-600" : "bg-black/10 dark:bg-white/10"}`}
             >
               <div class={`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${cur === "1" ? "translate-x-4" : "translate-x-0.5"}`}></div>
             </button>
-            <span class="text-[9px] font-mono text-slate-300 w-24 shrink-0">{f.label}</span>
-            <span class="text-[9px] text-slate-600 flex-1">{f.note}</span>
+            <span class="text-[9px] font-mono text-slate-700 dark:text-slate-300 w-24 shrink-0">{f.label}</span>
+            <span class="text-[9px] text-slate-400 dark:text-slate-600 flex-1">{f.note}</span>
             {#if f.token in overrides}
-              <button onclick={() => onReset(f.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+              <button onclick={() => onReset(f.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
             {/if}
           </div>
         {/each}
       </div>
       <div class="flex items-center gap-2 pt-1">
-        <span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Required marker</span>
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Required marker</span>
         <input
           type="text"
           value={overrides["--sf-field-required-marker"] ?? ""}
@@ -607,23 +607,23 @@
             const v = (e.target as HTMLInputElement).value;
             v ? onSet("--sf-field-required-marker", v) : onReset("--sf-field-required-marker");
           }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
         />
         {#if "--sf-field-required-marker" in overrides}
-          <button onclick={() => onReset("--sf-field-required-marker")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          <button onclick={() => onReset("--sf-field-required-marker")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- PREVIEW NOTE -->
-  <div class="rounded-lg bg-white/3 border border-white/6 p-3">
+  <div class="rounded-lg bg-black/3 dark:bg-white/3 border border-black/6 dark:border-white/6 p-3">
     <p class="text-[10px] text-slate-500 leading-relaxed">
       Selection colors, caret, links, focus ring, borders and sizes all render in the
-      live preview (try the <span class="text-slate-400 font-semibold">Components</span> template).
-      <span class="text-slate-400 font-semibold">Scroll behavior</span> applies to the page
+      live preview (try the <span class="text-slate-600 dark:text-slate-400 font-semibold">Components</span> template).
+      <span class="text-slate-600 dark:text-slate-400 font-semibold">Scroll behavior</span> applies to the page
       itself and can't be shown in the static canvas.
     </p>
   </div>
diff --git a/configurator/src/components/panels/MotionPanel.svelte b/configurator/src/components/panels/MotionPanel.svelte
index b25dff18..172b6820 100644
--- a/configurator/src/components/panels/MotionPanel.svelte
+++ b/configurator/src/components/panels/MotionPanel.svelte
@@ -94,9 +94,9 @@
 <div class="p-4 space-y-5">
 
   <!-- Quick toggle -->
-  <div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8">
+  <div class="flex items-center justify-between p-3 rounded-xl bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8">
     <div>
-      <div class="text-[11px] font-semibold text-slate-200">Disable motion</div>
+      <div class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Disable motion</div>
       <div class="text-[9px] text-slate-500 mt-0.5">Respects prefers-reduced-motion</div>
     </div>
     <button
@@ -106,7 +106,7 @@
         else onSet("--sf-motion-scale", "0");
       }}
       class={`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${
-        motionDisabled ? "bg-indigo-600" : "bg-white/10"
+        motionDisabled ? "bg-indigo-600" : "bg-black/10 dark:bg-white/10"
       }`}
     >
       <div class={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${
@@ -117,7 +117,7 @@
 
   {#if motionDisabled}
     <div class="rounded-lg bg-amber-500/10 border border-amber-500/20 p-2.5">
-      <p class="text-[10px] text-amber-300">Motion is disabled — duration & easing have no effect while scale is 0.</p>
+      <p class="text-[10px] text-amber-700 dark:text-amber-300">Motion is disabled — duration & easing have no effect while scale is 0.</p>
     </div>
   {/if}
 
@@ -125,7 +125,7 @@
        easing/duration edit can be previewed immediately. -->
   <section class="space-y-3">
     <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Live preview</div>
-    <div class="bg-white/4 rounded-xl border border-white/8 p-4 space-y-3">
+    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 space-y-3">
       <div class="relative h-10 overflow-hidden rounded">
         <div
           class="absolute top-1 h-8 w-8 bg-indigo-500 rounded-lg"
@@ -137,7 +137,7 @@
           value={demoEase}
           aria-label="Preview easing"
           onchange={(e) => { demoEase = (e.target as HTMLSelectElement).value; }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
         >
           {#each EASINGS as e (e.token)}
             <option value={e.token} style="background:#16161e;">{e.label}</option>
@@ -147,7 +147,7 @@
           value={demoDuration}
           aria-label="Preview duration"
           onchange={(e) => { demoDuration = (e.target as HTMLSelectElement).value; }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
         >
           {#each DURATIONS as d (d.token)}
             <option value={d.token} style="background:#16161e;">{d.label}</option>
@@ -156,13 +156,13 @@
         <button
           onclick={playDemo}
           disabled={animating}
-          class="px-3 py-1.5 rounded-lg text-[10px] font-bold border border-indigo-500/40 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20 transition-all cursor-pointer disabled:opacity-40 shrink-0"
+          class="px-3 py-1.5 rounded-lg text-[10px] font-bold border border-indigo-500/40 bg-indigo-500/10 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-500/20 transition-all cursor-pointer disabled:opacity-40 shrink-0"
         >{animating ? "…" : "▶ Play"}</button>
       </div>
     </div>
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- DURATIONS (with inline preview) -->
   <section class="space-y-3">
@@ -175,9 +175,9 @@
       <span class="text-[10px] text-slate-500">{showDurations ? "▲" : "▼"}</span>
     </button>
     {#if showDurations}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Named duration tokens. Drag to set an absolute ms value, overriding the global scale.
-        {#if motionDisabled}<span class="text-amber-400"> (No effect while motion is disabled.)</span>{/if}
+        {#if motionDisabled}<span class="text-amber-600 dark:text-amber-400"> (No effect while motion is disabled.)</span>{/if}
       </p>
       {#each DURATIONS as d (d.token)}
         {@const computed = getDuration(d.token, d.base)}
@@ -194,12 +194,12 @@
         />
       {/each}
       <!-- Duration preview, inside the group it refers to -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-4 space-y-3">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 space-y-3">
         {#each DURATIONS as d (d.label)}
           {@const actual = getDuration(d.token, d.base)}
           <div class="flex items-center gap-3">
             <span class="text-[10px] text-slate-500 w-14 shrink-0">{d.label}</span>
-            <div class="flex-1 h-1 bg-white/8 rounded-full overflow-hidden">
+            <div class="flex-1 h-1 bg-black/8 dark:bg-white/8 rounded-full overflow-hidden">
               <div class="h-full bg-indigo-500 rounded-full" style={`width: ${Math.min((actual / 1200) * 100, 100)}%`}></div>
             </div>
             <span class="text-[9px] font-mono text-slate-500 w-10 text-right">{actual}ms</span>
@@ -209,7 +209,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- EASING — editable -->
   <section class="space-y-3">
@@ -222,16 +222,16 @@
       <span class="text-[10px] text-slate-500">{showEasing ? "▲" : "▼"}</span>
     </button>
     {#if showEasing}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Edit the named easing tokens. Accepts any CSS timing function —
-        <span class="font-mono text-slate-400">cubic-bezier(…)</span> or
-        <span class="font-mono text-slate-400">linear(…)</span>. Use “Live preview” above to feel a curve.
+        <span class="font-mono text-slate-600 dark:text-slate-400">cubic-bezier(…)</span> or
+        <span class="font-mono text-slate-600 dark:text-slate-400">linear(…)</span>. Use “Live preview” above to feel a curve.
       </p>
       <div class="space-y-2">
         {#each EASINGS as e (e.token)}
           {@const isOverridden = e.token in overrides}
           <div class={`p-2.5 rounded-xl border transition-all ${
-            isOverridden ? "bg-indigo-500/10 border-indigo-500/30" : "border-white/8 bg-white/3"
+            isOverridden ? "bg-indigo-500/10 border-indigo-500/30" : "border-black/8 dark:border-white/8 bg-black/3 dark:bg-white/3"
           }`}>
             <div class="flex items-center gap-2.5">
               <svg width="40" height="28" viewBox="0 0 40 28" class="overflow-visible shrink-0">
@@ -239,14 +239,14 @@
               </svg>
               <div class="flex-1 min-w-0">
                 <div class="flex items-center justify-between mb-1">
-                  <span class="text-[10px] font-semibold text-slate-300">{e.label}</span>
+                  <span class="text-[10px] font-semibold text-slate-700 dark:text-slate-300">{e.label}</span>
                   <div class="flex items-center gap-1.5">
                     <button
                       onclick={() => { demoEase = e.token; playDemo(); }}
-                      class="text-[8px] text-slate-500 hover:text-indigo-400 cursor-pointer"
+                      class="text-[8px] text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 cursor-pointer"
                     >preview</button>
                     {#if isOverridden}
-                      <button onclick={() => onReset(e.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
+                      <button onclick={() => onReset(e.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer">reset</button>
                     {/if}
                   </div>
                 </div>
@@ -258,7 +258,7 @@
                     const v = (ev.target as HTMLInputElement).value.trim();
                     v ? onSet(e.token, v) : onReset(e.token);
                   }}
-                  class="w-full bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+                  class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
                 />
               </div>
             </div>
@@ -268,7 +268,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- STAGGER -->
   <section class="space-y-3">
@@ -281,14 +281,14 @@
       <span class="text-[10px] text-slate-500">{showStagger ? "▲" : "▼"}</span>
     </button>
     {#if showStagger}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).
       </p>
       <div class="group">
         <div class="flex items-center justify-between mb-1.5">
-          <span class="text-[11px] font-semibold text-slate-200">Stagger base</span>
+          <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Stagger base</span>
           {#if STAGGER_TOKENS.some(t => t in overrides)}
-            <button onclick={resetStagger} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+            <button onclick={resetStagger} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
           {/if}
         </div>
         <SliderRow
@@ -299,12 +299,12 @@
           onReset={resetStagger}
         />
       </div>
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1">
         {#each [1,2,3,4,5] as n (n)}
           {@const delayMs = Math.round(staggerBase * n)}
           <div class="flex items-center gap-2">
-            <span class="text-[9px] font-mono text-slate-600 w-6">–{n}</span>
-            <div class="flex-1 h-1.5 bg-white/8 rounded-full">
+            <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6">–{n}</span>
+            <div class="flex-1 h-1.5 bg-black/8 dark:bg-white/8 rounded-full">
               <div class="h-full bg-indigo-500 rounded-full" style={`width: ${Math.min((delayMs / 600) * 100, 100)}%`}></div>
             </div>
             <span class="text-[9px] font-mono text-slate-500 w-10 text-right">{delayMs}ms</span>
@@ -314,14 +314,14 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ADVANCED — global scale power knob, theme transition, scroll timeline -->
   <section class="space-y-4">
     <button
       onclick={() => { showAdvanced = !showAdvanced; }}
       aria-expanded={showAdvanced}
-      class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"
+      class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
     >
       <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
       <span class="text-[10px]">{showAdvanced ? "▲" : "▼"}</span>
@@ -349,16 +349,16 @@
 
       <!-- Scroll timeline range -->
       <div class="space-y-2">
-        <p class="text-[10px] text-slate-600 leading-relaxed">
+        <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
           Default animation-range for scroll-driven animations using the
-          <span class="font-mono text-slate-400">.sf-scroll-timeline</span> utility.
+          <span class="font-mono text-slate-600 dark:text-slate-400">.sf-scroll-timeline</span> utility.
         </p>
         {#each [
           { label: "Range start", token: "--sf-scroll-timeline-range-start", placeholder: "entry 0%" },
           { label: "Range end",   token: "--sf-scroll-timeline-range-end",   placeholder: "cover 30%" },
         ] as r (r.token)}
           <div class="flex items-center gap-2">
-            <div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">{r.label}</div>
+            <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">{r.label}</div>
             <input
               type="text"
               value={overrides[r.token] ?? ""}
@@ -367,10 +367,10 @@
                 const v = (e.target as HTMLInputElement).value.trim();
                 v ? onSet(r.token, v) : onReset(r.token);
               }}
-              class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+              class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
             />
             {#if r.token in overrides}
-              <button onclick={() => onReset(r.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+              <button onclick={() => onReset(r.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
             {/if}
           </div>
         {/each}
diff --git a/configurator/src/components/panels/ShadowsPanel.svelte b/configurator/src/components/panels/ShadowsPanel.svelte
index 145d62bf..f6110ad1 100644
--- a/configurator/src/components/panels/ShadowsPanel.svelte
+++ b/configurator/src/components/panels/ShadowsPanel.svelte
@@ -27,19 +27,19 @@
 <div class="p-4 space-y-5">
 
   <!-- Elevation preview — category-wide, reflects strength, lightness, color & glow -->
-  <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-4 flex-wrap items-end justify-center">
+  <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex gap-4 flex-wrap items-end justify-center">
     {#each SHADOW_STEPS as step, i (step)}
       <div class="flex flex-col items-center gap-2">
         <div
-          class="bg-[#1a1a2e] border border-white/8 rounded-lg"
+          class="bg-white dark:bg-[#1a1a2e] border border-black/8 dark:border-white/8 rounded-lg"
           style={`width: ${40 + i * 4}px; height: ${40 + i * 4}px; box-shadow: var(--sf-shadow-${step})`}
         ></div>
-        <span class="text-[8px] font-mono text-slate-600">{step}</span>
+        <span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">{step}</span>
       </div>
     {/each}
   </div>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SHADOW LIGHTNESS -->
   <SliderRow
@@ -50,7 +50,7 @@
     onReset={() => onReset("--sf-shadow-lightness")}
   />
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SHADOW COLOR -->
   <section class="space-y-4">
@@ -64,7 +64,7 @@
     </button>
     {#if showShadowColor}
       <div>
-        <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Shadow color</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Shadow color</div>
         <ColorInput
           token="--sf-shadow-color"
           value={shadowColor}
@@ -73,12 +73,12 @@
           onSet={(v) => onSet("--sf-shadow-color", v)}
           onReset={() => onReset("--sf-shadow-color")}
         />
-        <p class="text-[9px] text-slate-600 mt-1">Warm, cool or brand-tinted shadows. Default uses neutral hue.</p>
+        <p class="text-[9px] text-slate-400 dark:text-slate-600 mt-1">Warm, cool or brand-tinted shadows. Default uses neutral hue.</p>
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- GLOW -->
   <section class="space-y-3">
@@ -92,9 +92,9 @@
     </button>
     {#if showGlow}
       <!-- Glow toggle -->
-      <div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8">
+      <div class="flex items-center justify-between p-3 rounded-xl bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8">
         <div>
-          <div class="text-[11px] font-semibold text-slate-200">Shadow glow</div>
+          <div class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Shadow glow</div>
           <div class="text-[9px] text-slate-500 mt-0.5">Ambient glow on elevated surfaces</div>
         </div>
         <button
@@ -104,7 +104,7 @@
             else onSet("--sf-shadow-glow", "none");
           }}
           class={`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${
-            !glowDisabled ? "bg-indigo-600" : "bg-white/10"
+            !glowDisabled ? "bg-indigo-600" : "bg-black/10 dark:bg-white/10"
           }`}
         >
           <div class={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${
@@ -115,7 +115,7 @@
 
       {#if !glowDisabled}
         <div>
-          <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Glow color</div>
+          <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Glow color</div>
           <ColorInput
             token="--sf-shadow-glow-color"
             value={shadowGlowColor}
@@ -124,31 +124,31 @@
             onSet={(v) => onSet("--sf-shadow-glow-color", v)}
             onReset={() => onReset("--sf-shadow-glow-color")}
           />
-          <p class="text-[9px] text-slate-600 mt-1">Which brand color radiates the glow. Defaults to primary.</p>
+          <p class="text-[9px] text-slate-400 dark:text-slate-600 mt-1">Which brand color radiates the glow. Defaults to primary.</p>
         </div>
       {/if}
 
       <!-- Glow preview — uses --sf-shadow-glow directly so colour/toggle changes show -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-6 flex items-center justify-center">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-6 flex items-center justify-center">
         <div
-          class="w-16 h-16 bg-[#1a1a2e] border border-white/8 rounded-xl"
+          class="w-16 h-16 bg-white dark:bg-[#1a1a2e] border border-black/8 dark:border-white/8 rounded-xl"
           style={`box-shadow: ${glowDisabled ? "none" : "var(--sf-shadow-glow)"}`}
         ></div>
       </div>
       {#if glowDisabled}
-        <p class="text-[9px] text-slate-600 text-center">Glow disabled.</p>
+        <p class="text-[9px] text-slate-400 dark:text-slate-600 text-center">Glow disabled.</p>
       {/if}
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ADVANCED (power knob, de-emphasised, at end) -->
   <section class="space-y-3">
     <button
       onclick={() => { showAdvanced = !showAdvanced; }}
       aria-expanded={showAdvanced}
-      class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"
+      class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
     >
       <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
       <span class="text-[10px]">{showAdvanced ? "▲" : "▼"}</span>
diff --git a/configurator/src/components/panels/SpacingPanel.svelte b/configurator/src/components/panels/SpacingPanel.svelte
index 1f988581..e9d716a6 100644
--- a/configurator/src/components/panels/SpacingPanel.svelte
+++ b/configurator/src/components/panels/SpacingPanel.svelte
@@ -51,7 +51,7 @@
   <!-- SPACE SCALE PREVIEW — category-wide, at the top -->
   <section>
     <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Space scale preview</div>
-    <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2">
+    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-2">
       {#each SPACE_STEPS as step, i (step)}
         {@const midBase = (baseMin + baseMax) / 2}
         {@const ratio = (ratioMin + ratioMax) / 2}
@@ -60,7 +60,7 @@
         {@const scaled = rawRem * spaceScale}
         {@const barWidth = Math.min(scaled * 28, 240)}
         <div class="flex items-center gap-2">
-          <span class="text-[9px] font-mono text-slate-600 w-6 text-right shrink-0">{step}</span>
+          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 text-right shrink-0">{step}</span>
           <div class="bg-indigo-500/50 rounded shrink-0 h-3" style={`width: ${barWidth}px; min-width: 3px`}></div>
           <span class="text-[9px] font-mono text-slate-500 shrink-0">{scaled.toFixed(2)}rem</span>
         </div>
@@ -68,7 +68,7 @@
     </div>
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- GAP TOKENS — most used, at the top -->
   <section class="space-y-3">
@@ -81,7 +81,7 @@
       <span class="text-[10px] text-slate-500">{showLayoutGap ? "▲" : "▼"}</span>
     </button>
     {#if showLayoutGap}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).
       </p>
       <SliderRow
@@ -117,7 +117,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- FLUID SCALE -->
   <section class="space-y-4">
@@ -130,7 +130,7 @@
       <span class="text-[10px] text-slate-500">{showModularScale ? "▲" : "▼"}</span>
     </button>
     {#if showModularScale}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Utopia-style fluid scale — viewport width, base unit and ratio per endpoint.
         The viewport range is shared with the type scale.
       </p>
@@ -165,14 +165,14 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ADVANCED (power knobs, de-emphasised, at end) -->
   <section class="space-y-3">
     <button
       onclick={() => { showAdvanced = !showAdvanced; }}
       aria-expanded={showAdvanced}
-      class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"
+      class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
     >
       <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
       <span class="text-[10px]">{showAdvanced ? "▲" : "▼"}</span>
diff --git a/configurator/src/components/panels/ThemesPanel.svelte b/configurator/src/components/panels/ThemesPanel.svelte
index 5c95a3aa..d06e78c0 100644
--- a/configurator/src/components/panels/ThemesPanel.svelte
+++ b/configurator/src/components/panels/ThemesPanel.svelte
@@ -36,32 +36,32 @@
 
 <div class="p-4 space-y-5 overflow-y-auto flex-1 h-full">
   <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Themes</div>
-  <p class="text-[11px] text-slate-400 leading-relaxed">
+  <p class="text-[11px] text-slate-600 dark:text-slate-400 leading-relaxed">
     Save your current configuration as a named theme, then re-apply it any time.
     Themes are stored in this browser.
   </p>
 
   <!-- Save current as a new theme -->
-  <div class="rounded-xl border border-white/8 bg-white/4 p-3 space-y-2">
-    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Save current</div>
+  <div class="rounded-xl border border-black/8 dark:border-white/8 bg-black/4 dark:bg-white/4 p-3 space-y-2">
+    <div class="text-[10px] font-bold text-slate-600 dark:text-slate-400 uppercase tracking-widest">Save current</div>
     <div class="flex items-center gap-2">
       <input
         type="text"
         bind:value={newName}
         placeholder="Theme name"
         onkeydown={(e) => { if (e.key === "Enter") handleSave(); }}
-        class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
       />
       <button
         onclick={handleSave}
         disabled={overridesCount === 0}
-        class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer shrink-0 disabled:opacity-40 disabled:cursor-not-allowed"
+        class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer shrink-0 disabled:opacity-40 disabled:cursor-not-allowed"
       >
         <Save class="w-3 h-3" />
         Save
       </button>
     </div>
-    <p class="text-[9px] text-slate-600">
+    <p class="text-[9px] text-slate-400 dark:text-slate-600">
       {#if overridesCount === 0}
         No active overrides yet — adjust some tokens first.
       {:else}
@@ -73,9 +73,9 @@
   <!-- Saved themes -->
   <div class="space-y-2">
     {#if themes.length === 0}
-      <div class="rounded-xl border border-dashed border-white/10 p-6 text-center">
+      <div class="rounded-xl border border-dashed border-black/10 dark:border-white/10 p-6 text-center">
         <p class="text-[11px] text-slate-500">No saved themes yet.</p>
-        <p class="text-[10px] text-slate-600 mt-1">Configure your tokens, then save them above.</p>
+        <p class="text-[10px] text-slate-400 dark:text-slate-600 mt-1">Configure your tokens, then save them above.</p>
       </div>
     {:else}
       {#each themes as theme (theme.id)}
@@ -83,15 +83,15 @@
         <div class={`group rounded-xl border transition-all overflow-hidden ${
           activeId === theme.id
             ? "border-indigo-500/40 bg-indigo-500/10"
-            : "border-white/8 bg-white/4 hover:bg-white/6 hover:border-white/14"
+            : "border-black/8 dark:border-white/8 bg-black/4 dark:bg-white/4 hover:bg-black/6 dark:hover:bg-white/6 hover:border-black/14 dark:hover:border-white/14"
         }`}>
           <div class="flex items-start gap-3 p-4">
             <span class="text-2xl leading-none shrink-0 mt-0.5">{theme.icon}</span>
             <div class="flex-1 min-w-0">
-              <div class="text-[12px] font-bold text-slate-200 flex items-center gap-1.5">
+              <div class="text-[12px] font-bold text-slate-800 dark:text-slate-200 flex items-center gap-1.5">
                 {theme.name}
                 {#if activeId === theme.id}
-                  <Check class="w-3 h-3 text-indigo-400" />
+                  <Check class="w-3 h-3 text-indigo-600 dark:text-indigo-400" />
                 {/if}
               </div>
               <div class="text-[10px] text-slate-500 mt-0.5 font-mono">{tokenCount} override{tokenCount === 1 ? "" : "s"}</div>
@@ -99,12 +99,12 @@
             <div class="flex items-center gap-1.5 shrink-0">
               <button
                 onclick={() => onApplyTheme(theme.overrides)}
-                class="px-3 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer"
+                class="px-3 py-1.5 rounded-lg text-[11px] font-bold bg-indigo-600/20 border border-indigo-500/30 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-600/30 transition-all cursor-pointer"
               >Apply</button>
               <button
                 aria-label="Delete theme"
                 onclick={() => handleDelete(theme.id)}
-                class="p-1.5 rounded-lg border border-white/8 text-slate-500 hover:text-rose-400 hover:border-rose-500/30 transition-all cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
+                class="p-1.5 rounded-lg border border-black/8 dark:border-white/8 text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 hover:border-rose-500/30 transition-all cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
               ><Trash2 class="w-3.5 h-3.5" /></button>
             </div>
           </div>
@@ -112,15 +112,15 @@
           {#if tokenCount > 0}
             <div class="px-4 pb-3 flex flex-wrap gap-1">
               {#each Object.entries(theme.overrides).slice(0, 5) as [k, v] (k)}
-                <div class="flex items-center gap-1 bg-white/4 rounded px-1.5 py-0.5">
+                <div class="flex items-center gap-1 bg-black/4 dark:bg-white/4 rounded px-1.5 py-0.5">
                   {#if k.includes("color") || k.includes("source")}
-                    <div class="w-2.5 h-2.5 rounded-full border border-white/10 shrink-0" style:background={v}></div>
+                    <div class="w-2.5 h-2.5 rounded-full border border-black/10 dark:border-white/10 shrink-0" style:background={v}></div>
                   {/if}
-                  <span class="text-[8px] font-mono text-slate-600">{k.replace("--sf-", "")}</span>
+                  <span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">{k.replace("--sf-", "")}</span>
                 </div>
               {/each}
               {#if tokenCount > 5}
-                <span class="text-[8px] text-slate-600 px-1.5 py-0.5">+{tokenCount - 5} more</span>
+                <span class="text-[8px] text-slate-400 dark:text-slate-600 px-1.5 py-0.5">+{tokenCount - 5} more</span>
               {/if}
             </div>
           {/if}
@@ -133,7 +133,7 @@
   {#if overridesCount > 0}
     <button
       onclick={onResetAll}
-      class="w-full py-2 rounded-lg text-[11px] font-bold border border-rose-500/30 text-rose-400 hover:bg-rose-500/10 transition-all cursor-pointer"
+      class="w-full py-2 rounded-lg text-[11px] font-bold border border-rose-500/30 text-rose-600 dark:text-rose-400 hover:bg-rose-500/10 transition-all cursor-pointer"
     >Reset all overrides</button>
   {/if}
 </div>
diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index 4ac839e6..bd4f5097 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -265,14 +265,14 @@
       { label: "Mono", token: "--sf-font-mono", current: currentMonoFont, opts: MONO_STACKS },
     ] as f (f.token)}
       <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0">{f.label}</span>
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-14 shrink-0">{f.label}</span>
         <select
           value={f.current}
           onchange={(e) => {
             const v = (e.target as HTMLSelectElement).value;
             v ? onSet(f.token, v) : onReset(f.token);
           }}
-          class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+          class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
           style={`font-family: ${f.current || "inherit"}`}
         >
           {#each f.opts as o (o.label)}
@@ -283,19 +283,19 @@
           {/if}
         </select>
         {#if f.token in overrides}
-          <button onclick={() => onReset(f.token)} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          <button onclick={() => onReset(f.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
     {/each}
 
     <!-- Google font loader (dropdown + custom) -->
-    <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2">
-      <div class="text-[10px] font-semibold text-slate-400">Google Font</div>
+    <div class="rounded-xl bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8 p-3 space-y-2">
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Google Font</div>
       <div class="flex gap-2">
         <select
           value={googleFontChoice}
           onchange={(e) => { googleFontChoice = (e.target as HTMLSelectElement).value; }}
-          class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+          class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
         >
           <option value="" style="background:#16161e;">Pick a font…</option>
           {#each GOOGLE_FONTS as g (g)}
@@ -305,11 +305,11 @@
         <div class="flex gap-1 shrink-0">
           <button
             onclick={() => { customFontTarget = "body"; }}
-            class={`px-2 rounded text-[10px] border transition-all cursor-pointer ${customFontTarget === "body" ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" : "border-white/8 text-slate-400"}`}
+            class={`px-2 rounded text-[10px] border transition-all cursor-pointer ${customFontTarget === "body" ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400"}`}
           >Body</button>
           <button
             onclick={() => { customFontTarget = "heading"; }}
-            class={`px-2 rounded text-[10px] border transition-all cursor-pointer ${customFontTarget === "heading" ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" : "border-white/8 text-slate-400"}`}
+            class={`px-2 rounded text-[10px] border transition-all cursor-pointer ${customFontTarget === "heading" ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400"}`}
           >Heading</button>
         </div>
       </div>
@@ -318,11 +318,11 @@
         placeholder="…or type any Google font name"
         oninput={(e) => { googleFontChoice = (e.target as HTMLInputElement).value; }}
         value={googleFontChoice}
-        class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
       />
       <button
         onclick={() => applyCustomFont(googleFontChoice, customFontTarget)}
-        class="w-full py-1.5 rounded-lg bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 text-[11px] font-bold cursor-pointer hover:bg-indigo-600/30 transition-all"
+        class="w-full py-1.5 rounded-lg bg-indigo-600/20 border border-indigo-500/30 text-indigo-700 dark:text-indigo-300 text-[11px] font-bold cursor-pointer hover:bg-indigo-600/30 transition-all"
       >
         Load &amp; apply to {customFontTarget}
       </button>
@@ -330,7 +330,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- PER-TYPE (body + h1–h6) -->
   <section class="space-y-3">
@@ -345,13 +345,13 @@
     {#if showPerType}
 
     <!-- Level selector -->
-    <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5">
+    <div class="flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
       {#each TYPE_LEVELS as lvl (lvl.id)}
         {@const isOv = (lvl.size in overrides) || (lvl.lh in overrides) || (lvl.wt in overrides) || (!!lvl.ls && lvl.ls in overrides)}
         <button
           onclick={() => { activeLevelId = lvl.id; }}
           class={`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${
-            activeLevelId === lvl.id ? "bg-white/12 text-white" : "text-slate-500 hover:text-slate-300"
+            activeLevelId === lvl.id ? "bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
           }`}
         >
           {lvl.label}
@@ -361,9 +361,9 @@
     </div>
 
     <!-- Live sample -->
-    <div class="bg-white/4 rounded-xl border border-white/8 px-3 py-3 overflow-hidden">
+    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 px-3 py-3 overflow-hidden">
       <div
-        class="text-white/85 truncate"
+        class="text-slate-900/85 dark:text-white/85 truncate"
         style={`font-size:${sampleSize}rem; font-weight:${sampleWeight}; letter-spacing:${sampleTracking}em; line-height:${sampleLeading}; font-family:${activeLevel.id === "body" ? (currentBodyFont || "inherit") : (currentHeadingFont || currentBodyFont || "inherit")}`}
       >The quick brown fox
       </div>
@@ -371,11 +371,11 @@
 
     <!-- Size -->
     <div class="flex items-center gap-2">
-      <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Size</span>
+      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Size</span>
       <select
         value={levelVal(activeLevel.size, activeLevel.dSize)}
         onchange={(e) => setLevel(activeLevel.size, (e.target as HTMLSelectElement).value, activeLevel.dSize)}
-        class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+        class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
       >
         {#each SIZE_OPTIONS as o (o.value)}
           <option value={o.value} style="background:#16161e;">{o.label}</option>
@@ -388,11 +388,11 @@
 
     <!-- Line height -->
     <div class="flex items-center gap-2">
-      <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Line height</span>
+      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Line height</span>
       <select
         value={levelVal(activeLevel.lh, activeLevel.dLh)}
         onchange={(e) => setLevel(activeLevel.lh, (e.target as HTMLSelectElement).value, activeLevel.dLh)}
-        class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+        class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
       >
         {#each LEADING_OPTIONS as o (o.value)}
           <option value={o.value} style="background:#16161e;">{o.label} · {o.num}</option>
@@ -405,7 +405,7 @@
 
     <!-- Weight -->
     <div>
-      <span class="text-[10px] font-semibold text-slate-400">Weight</span>
+      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400">Weight</span>
       <div class="flex gap-1 mt-1">
         {#each WEIGHT_OPTIONS as w (w)}
           {@const cur = levelVal(activeLevel.wt, activeLevel.dWt)}
@@ -413,7 +413,7 @@
             onclick={() => setLevel(activeLevel.wt, w, activeLevel.dWt)}
             style={`font-weight:${parseInt(w)}`}
             class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
-              cur === w ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+              cur === w ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
             }`}
           >{w}</button>
         {/each}
@@ -423,11 +423,11 @@
     <!-- Letter spacing (headings only) -->
     {#if activeLevel.ls}
       <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Tracking</span>
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Tracking</span>
         <select
           value={levelVal(activeLevel.ls, activeLevel.dLs)}
           onchange={(e) => setLevel(activeLevel.ls, (e.target as HTMLSelectElement).value, activeLevel.dLs)}
-          class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
+          class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
         >
           {#each TRACKING_OPTIONS as o (o.value)}
             <option value={o.value} style="background:#16161e;">{o.label}</option>
@@ -443,7 +443,7 @@
     {#if activeLevel.id !== "body"}
       {@const maxWidthToken = `--sf-${activeLevel.id}-max-width`}
       <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Max width</span>
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Max width</span>
         <input
           type="text"
           value={overrides[maxWidthToken] ?? ""}
@@ -452,10 +452,10 @@
             const v = (e.target as HTMLInputElement).value.trim();
             v ? onSet(maxWidthToken, v) : onReset(maxWidthToken);
           }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
         />
         {#if maxWidthToken in overrides}
-          <button onclick={() => onReset(maxWidthToken)} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          <button onclick={() => onReset(maxWidthToken)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
     {/if}
@@ -468,14 +468,14 @@
             if (activeLevel.ls) patch[activeLevel.ls] = null;
             onBulkChange(patch);
           }}
-          class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer"
+          class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer"
         >reset {activeLevel.label}</button>
       {/if}
     </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- BODY TEXT -->
   <section class="space-y-4">
@@ -499,9 +499,9 @@
       {@const isOverridden = row.tokenName in overrides}
       <div class="group">
         <div class="flex items-center justify-between mb-1.5">
-          <span class="text-[11px] font-semibold text-slate-200">{row.label} weight</span>
+          <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{row.label} weight</span>
           {#if isOverridden}
-            <button onclick={() => onReset(row.tokenName)} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
+            <button onclick={() => onReset(row.tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
           {/if}
         </div>
         <div class="flex gap-1">
@@ -511,8 +511,8 @@
               style={`font-weight: ${parseInt(w)}`}
               class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
                 current === w
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                  : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
               }`}
             >{w}</button>
           {/each}
@@ -522,7 +522,7 @@
 
     <!-- Em style toggle -->
     <div>
-      <div class="text-[10px] font-semibold text-slate-400 mb-2">Emphasis style</div>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Emphasis style</div>
       <div class="flex gap-1">
         {#each [["Italic", "italic"], ["Normal", "normal"]] as [label, val] (val)}
           {@const current = overrides["--sf-body-em-style"] ?? "italic"}
@@ -530,8 +530,8 @@
             onclick={() => val === "italic" ? onReset("--sf-body-em-style") : onSet("--sf-body-em-style", val)}
             class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
               current === val
-                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
             }`}
           ><span style={`font-style: ${val}`}>{label}</span></button>
         {/each}
@@ -554,15 +554,15 @@
     ] as row (row.token)}
       {@const current = overrides[row.token] ?? row.defaultVal}
       <div>
-        <div class="text-[10px] font-semibold text-slate-400 mb-1.5">{row.label}</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">{row.label}</div>
         <div class="flex gap-1">
           {#each WRAP_OPTIONS as o (o.value)}
             <button
               onclick={() => o.value === row.defaultVal && !(row.token in overrides) ? undefined : (o.value === row.defaultVal ? onReset(row.token) : onSet(row.token, o.value))}
               class={`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${
                 current === o.value
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                  : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
               }`}
             >{o.label}</button>
           {/each}
@@ -572,7 +572,7 @@
 
     <!-- Link external marker -->
     <div class="flex items-center gap-2">
-      <span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">External marker</span>
+      <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">External marker</span>
       <input
         type="text"
         value={overrides["--sf-link-external-marker"] ?? ""}
@@ -581,16 +581,16 @@
           const v = (e.target as HTMLInputElement).value;
           v ? onSet("--sf-link-external-marker", v) : onReset("--sf-link-external-marker");
         }}
-        class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
       />
       {#if "--sf-link-external-marker" in overrides}
-        <button onclick={() => onReset("--sf-link-external-marker")} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+        <button onclick={() => onReset("--sf-link-external-marker")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
       {/if}
     </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- FONT WEIGHT SCALE -->
   <section class="space-y-3">
@@ -603,7 +603,7 @@
       <span class="text-[10px] text-slate-500">{showFontWeights ? "▲" : "▼"}</span>
     </button>
     {#if showFontWeights}
-      <p class="text-[9px] text-slate-600 leading-relaxed">Named weight tokens. Override if your font uses non-standard axis values.</p>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">Named weight tokens. Override if your font uses non-standard axis values.</p>
       {#each [
         { label: "Light",    token: "--sf-font-weight-light",    def: 300 },
         { label: "Normal",   token: "--sf-font-weight-normal",   def: 400 },
@@ -613,9 +613,9 @@
       ] as row (row.token)}
         <div class="group">
           <div class="flex items-center justify-between mb-1">
-            <span class="text-[10px] font-semibold text-slate-200">{row.label}</span>
+            <span class="text-[10px] font-semibold text-slate-800 dark:text-slate-200">{row.label}</span>
             {#if row.token in overrides}
-              <button onclick={() => onReset(row.token)} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+              <button onclick={() => onReset(row.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
             {/if}
           </div>
           <div class="flex gap-1">
@@ -626,8 +626,8 @@
                 style={`font-weight:${parseInt(w)}`}
                 class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
                   cur === w
-                    ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                    : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                    ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                    : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
                 }`}
               >{w}</button>
             {/each}
@@ -637,7 +637,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- DISPLAY TYPE -->
   <section class="space-y-4">
@@ -669,7 +669,7 @@
         { label: "Display M line-height", token: "--sf-display-m-line-height", def: 1.05 },
       ] as row (row.token)}
         <div>
-          <div class="text-[9px] text-slate-600 mb-1">{row.label}</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">{row.label}</div>
           <SliderRow
             label="" value={num(row.token, row.def)} min={0.8} max={1.5} step={0.025}
             overridden={row.token in overrides}
@@ -690,9 +690,9 @@
       {@const isOverridden = row.tokenName in overrides}
       <div class="group">
         <div class="flex items-center justify-between mb-1.5">
-          <span class="text-[11px] font-semibold text-slate-200">{row.label} weight</span>
+          <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{row.label} weight</span>
           {#if isOverridden}
-            <button onclick={() => onReset(row.tokenName)} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
+            <button onclick={() => onReset(row.tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
           {/if}
         </div>
         <div class="flex gap-1">
@@ -702,8 +702,8 @@
               style={`font-weight: ${parseInt(w)}`}
               class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
                 current === w
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                  : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
               }`}
             >{w}</button>
           {/each}
@@ -713,7 +713,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- FINE-TUNE (type ramp clamp + rhythm + tracking) -->
   <section class="space-y-4">
@@ -726,7 +726,7 @@
       <span class="text-[10px] text-slate-500">{showModularScale ? "▲" : "▼"}</span>
     </button>
     {#if showModularScale}
-    <p class="text-[10px] text-slate-600 leading-relaxed">
+    <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
       Utopia-style fluid scale. Each endpoint has three values — viewport width,
       base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.
     </p>
@@ -762,7 +762,7 @@
 
     <!-- Line height scale -->
     <div>
-      <div class="text-[10px] font-semibold text-slate-400 mb-2">Line height scale</div>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Line height scale</div>
       <div class="space-y-2">
         {#each LEADING_TOKENS as t (t.token)}
           <SliderRow
@@ -786,17 +786,17 @@
 
     <!-- Letter-spacing scale -->
     <div>
-      <div class="text-[10px] font-semibold text-slate-400 mb-2">Letter-spacing scale</div>
-      <p class="text-[9px] text-slate-600 mb-2">
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Letter-spacing scale</div>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 mb-2">
         Overriding these propagates to heading sizes that reference them.
       </p>
       <div class="space-y-2">
         {#each TRACKING_TOKENS as t (t.token)}
           <div class="group">
             <div class="flex items-center justify-between mb-1">
-              <span class="text-[10px] font-semibold text-slate-200">{t.label}</span>
+              <span class="text-[10px] font-semibold text-slate-800 dark:text-slate-200">{t.label}</span>
               {#if t.token in overrides}
-                <button onclick={() => onReset(t.token)} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
+                <button onclick={() => onReset(t.token)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100">reset</button>
               {/if}
             </div>
             <RangeWithNumber
@@ -814,7 +814,7 @@
       <button
         onclick={() => { showScaleAdvanced = !showScaleAdvanced; }}
         aria-expanded={showScaleAdvanced}
-        class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer"
+        class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
       >
         <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
         <span class="text-[10px]">{showScaleAdvanced ? "▲" : "▼"}</span>
@@ -834,7 +834,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SCALE PREVIEW -->
   <section>
@@ -847,26 +847,26 @@
       <span class="text-[10px] text-slate-500">{showScalePreview ? "▲" : "▼"}</span>
     </button>
     {#if showScalePreview}
-    <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1 overflow-hidden">
+    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1 overflow-hidden">
       {#each [...TEXT_STEPS].reverse() as { label, factor } (label)}
         {@const midBase = (baseMin + baseMax) / 2}
         {@const size = midBase * factor * textScale}
         <div class="flex items-baseline gap-2">
-          <span class="text-[9px] font-mono text-slate-600 w-6 shrink-0 text-right">{label}</span>
+          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 shrink-0 text-right">{label}</span>
           <span
-            class="text-white/80 font-medium leading-none truncate"
+            class="text-slate-900/80 dark:text-white/80 font-medium leading-none truncate"
             style={`font-size: ${Math.min(size, 2.5)}rem; font-family: ${currentBodyFont || "inherit"}`}
           >
             Aa
           </span>
-          <span class="text-[9px] font-mono text-slate-600 ml-auto shrink-0">{size.toFixed(2)}rem</span>
+          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{size.toFixed(2)}rem</span>
         </div>
       {/each}
     </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- LINE LENGTHS -->
   <section class="space-y-3">
@@ -879,8 +879,8 @@
       <span class="text-[10px] text-slate-500">{showLineLengths ? "▲" : "▼"}</span>
     </button>
     {#if showLineLengths}
-      <p class="text-[9px] text-slate-600 leading-relaxed">
-        Per-text-size max-width caps on <span class="font-mono text-slate-400">.sf-text-*</span> elements. Set to <span class="font-mono text-slate-400">none</span> to remove the constraint; use <span class="font-mono text-slate-400">ch</span> units for character-based measures.
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
+        Per-text-size max-width caps on <span class="font-mono text-slate-600 dark:text-slate-400">.sf-text-*</span> elements. Set to <span class="font-mono text-slate-600 dark:text-slate-400">none</span> to remove the constraint; use <span class="font-mono text-slate-600 dark:text-slate-400">ch</span> units for character-based measures.
       </p>
       <div class="space-y-1.5">
         {#each [
@@ -895,7 +895,7 @@
           { label: "4xl", token: "--sf-text-4xl-max-width", def: "none" },
         ] as row (row.token)}
           <div class="flex items-center gap-2">
-            <span class="text-[9px] font-mono text-slate-400 w-6 shrink-0">{row.label}</span>
+            <span class="text-[9px] font-mono text-slate-600 dark:text-slate-400 w-6 shrink-0">{row.label}</span>
             <input
               type="text"
               value={overrides[row.token] ?? ""}
@@ -904,10 +904,10 @@
                 const v = (e.target as HTMLInputElement).value.trim();
                 v ? onSet(row.token, v) : onReset(row.token);
               }}
-              class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+              class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
             />
             {#if row.token in overrides}
-              <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+              <button onclick={() => onReset(row.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
             {/if}
           </div>
         {/each}
@@ -915,7 +915,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ADVANCED TYPOGRAPHY -->
   <section class="space-y-3">
@@ -928,11 +928,11 @@
       <span class="text-[10px] text-slate-500">{showAdvancedType ? "▲" : "▼"}</span>
     </button>
     {#if showAdvancedType}
-      <p class="text-[9px] text-slate-600 leading-relaxed">Advanced OpenType and variable-font axes. Leave as <span class="font-mono text-slate-400">normal</span> unless your font supports these features.</p>
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">Advanced OpenType and variable-font axes. Leave as <span class="font-mono text-slate-600 dark:text-slate-400">normal</span> unless your font supports these features.</p>
 
       <!-- font-numeric -->
       <div>
-        <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Numeric figures</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Numeric figures</div>
         <div class="flex gap-1">
           {#each [["tabular-nums", "tabular-nums (default)"], ["proportional-nums", "proportional-nums"], ["normal", "normal"]] as [val, label] (val)}
             {@const cur = overrides["--sf-font-numeric"] ?? "tabular-nums"}
@@ -940,8 +940,8 @@
               onclick={() => val === "tabular-nums" ? onReset("--sf-font-numeric") : onSet("--sf-font-numeric", val)}
               class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${
                 cur === val
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                  : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
               }`}
             >{label}</button>
           {/each}
@@ -950,7 +950,7 @@
 
       <!-- optical-sizing -->
       <div>
-        <div class="text-[10px] font-semibold text-slate-400 mb-1.5">Optical sizing</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Optical sizing</div>
         <div class="flex gap-1">
           {#each [["auto", "auto (default)"], ["none", "none"]] as [val, label] (val)}
             {@const cur = overrides["--sf-optical-sizing"] ?? "auto"}
@@ -958,8 +958,8 @@
               onclick={() => val === "auto" ? onReset("--sf-optical-sizing") : onSet("--sf-optical-sizing", val)}
               class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
                 cur === val
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
-                  : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
               }`}
             >{label}</button>
           {/each}
@@ -968,7 +968,7 @@
 
       <!-- font-features -->
       <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Font features</span>
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Font features</span>
         <input
           type="text"
           value={overrides["--sf-font-features"] ?? ""}
@@ -977,16 +977,16 @@
             const v = (e.target as HTMLInputElement).value.trim();
             v ? onSet("--sf-font-features", v) : onReset("--sf-font-features");
           }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
         />
         {#if "--sf-font-features" in overrides}
-          <button onclick={() => onReset("--sf-font-features")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          <button onclick={() => onReset("--sf-font-features")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
 
       <!-- font-variation -->
       <div class="flex items-center gap-2">
-        <span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Variation</span>
+        <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Variation</span>
         <input
           type="text"
           value={overrides["--sf-font-variation"] ?? ""}
@@ -995,10 +995,10 @@
             const v = (e.target as HTMLInputElement).value.trim();
             v ? onSet("--sf-font-variation", v) : onReset("--sf-font-variation");
           }}
-          class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
         />
         {#if "--sf-font-variation" in overrides}
-          <button onclick={() => onReset("--sf-font-variation")} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          <button onclick={() => onReset("--sf-font-variation")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
     {/if}
diff --git a/configurator/src/components/panels/WcagPanel.svelte b/configurator/src/components/panels/WcagPanel.svelte
index 4ec93076..c9108ee5 100644
--- a/configurator/src/components/panels/WcagPanel.svelte
+++ b/configurator/src/components/panels/WcagPanel.svelte
@@ -84,10 +84,10 @@
   }
 
   function levelOf(ratio: number): { tag: string; cls: string } {
-    if (ratio >= 7)   return { tag: "AAA",  cls: "bg-emerald-500/25 text-emerald-200" };
-    if (ratio >= 4.5) return { tag: "AA",   cls: "bg-emerald-500/15 text-emerald-300" };
-    if (ratio >= 3)   return { tag: "AA-L", cls: "bg-amber-500/20 text-amber-300" };
-    return { tag: "Fail", cls: "bg-rose-500/20 text-rose-300" };
+    if (ratio >= 7)   return { tag: "AAA",  cls: "bg-emerald-500/25 text-emerald-800 dark:text-emerald-200" };
+    if (ratio >= 4.5) return { tag: "AA",   cls: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300" };
+    if (ratio >= 3)   return { tag: "AA-L", cls: "bg-amber-500/20 text-amber-700 dark:text-amber-300" };
+    return { tag: "Fail", cls: "bg-rose-500/20 text-rose-700 dark:text-rose-300" };
   }
 
   let pairRatio = $derived(ratioOf(fg.expr, bg.expr));
@@ -160,7 +160,7 @@
 <div class="p-4 space-y-6">
   <section class="space-y-1">
     <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Contrast checker</div>
-    <p class="text-[10px] text-slate-600 leading-relaxed">
+    <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
       Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.
     </p>
   </section>
@@ -179,73 +179,73 @@
     <div class="grid grid-cols-[1fr_auto_1fr] gap-2 items-end">
       <div>
         <div class="text-[9px] text-slate-500 mb-1">Foreground</div>
-        <select bind:value={fgLabel} class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer">
+        <select bind:value={fgLabel} class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer">
           {#each ALL_OPTS as o (o.label)}<option value={o.label} style="background:#16161e;">{o.label}</option>{/each}
         </select>
       </div>
-      <button onclick={swap} title="Swap" class="mb-0.5 px-2 py-1.5 rounded-lg border border-white/10 text-slate-400 hover:text-slate-200 hover:bg-white/5 cursor-pointer text-[12px]">⇄</button>
+      <button onclick={swap} title="Swap" class="mb-0.5 px-2 py-1.5 rounded-lg border border-black/10 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer text-[12px]">⇄</button>
       <div>
         <div class="text-[9px] text-slate-500 mb-1">Background</div>
-        <select bind:value={bgLabel} class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer">
+        <select bind:value={bgLabel} class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer">
           {#each ALL_OPTS as o (o.label)}<option value={o.label} style="background:#16161e;">{o.label}</option>{/each}
         </select>
       </div>
     </div>
 
     <!-- Sample + result -->
-    <div class="rounded-xl border border-white/8 overflow-hidden">
+    <div class="rounded-xl border border-black/8 dark:border-white/8 overflow-hidden">
       <div class="h-24 flex items-center justify-center" style={`background:${paint(bg.expr)}`}>
         <span class="text-[26px] font-bold" style={`color:${paint(fg.expr)}`}>Aa Bb Cc</span>
       </div>
       {#if pairRatio !== null}
         {@const lvl = levelOf(pairRatio)}
-        <div class="flex items-center gap-2 p-2.5 bg-white/4">
-          <span class="text-[15px] font-mono font-bold text-slate-100">{pairRatio.toFixed(2)}:1</span>
+        <div class="flex items-center gap-2 p-2.5 bg-black/4 dark:bg-white/4">
+          <span class="text-[15px] font-mono font-bold text-slate-900 dark:text-slate-100">{pairRatio.toFixed(2)}:1</span>
           <span class={`text-[10px] font-bold px-2 py-0.5 rounded ${lvl.cls}`}>{lvl.tag}</span>
           <div class="flex-1"></div>
           <div class="grid grid-cols-2 gap-x-2 gap-y-0.5 text-[9px]">
-            <span class={pairRatio >= 4.5 ? "text-emerald-300" : "text-rose-300"}>{pairRatio >= 4.5 ? "✓" : "✗"} AA normal</span>
-            <span class={pairRatio >= 3 ? "text-emerald-300" : "text-rose-300"}>{pairRatio >= 3 ? "✓" : "✗"} AA large</span>
-            <span class={pairRatio >= 7 ? "text-emerald-300" : "text-rose-300"}>{pairRatio >= 7 ? "✓" : "✗"} AAA normal</span>
-            <span class={pairRatio >= 4.5 ? "text-emerald-300" : "text-rose-300"}>{pairRatio >= 4.5 ? "✓" : "✗"} AAA large</span>
+            <span class={pairRatio >= 4.5 ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300"}>{pairRatio >= 4.5 ? "✓" : "✗"} AA normal</span>
+            <span class={pairRatio >= 3 ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300"}>{pairRatio >= 3 ? "✓" : "✗"} AA large</span>
+            <span class={pairRatio >= 7 ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300"}>{pairRatio >= 7 ? "✓" : "✗"} AAA normal</span>
+            <span class={pairRatio >= 4.5 ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300"}>{pairRatio >= 4.5 ? "✓" : "✗"} AAA large</span>
           </div>
         </div>
       {:else}
-        <div class="p-2.5 bg-white/4 text-[10px] text-slate-500">Waiting for live preview…</div>
+        <div class="p-2.5 bg-black/4 dark:bg-white/4 text-[10px] text-slate-500">Waiting for live preview…</div>
       {/if}
     </div>
 
     <!-- Auto-fix -->
-    <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2">
+    <div class="rounded-xl bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8 p-3 space-y-2">
       <div class="flex items-center justify-between">
-        <span class="text-[10px] font-bold text-slate-300">Auto-fix to pass <span class="text-slate-600 font-normal">(for {getActiveTheme()} mode)</span></span>
-        <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5">
+        <span class="text-[10px] font-bold text-slate-700 dark:text-slate-300">Auto-fix to pass <span class="text-slate-400 dark:text-slate-600 font-normal">(for {getActiveTheme()} mode)</span></span>
+        <div class="flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
           {#each ["AA", "AAA"] as t (t)}
-            <button onclick={() => { targetLevel = t as "AA" | "AAA"; }} class={`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${targetLevel === t ? "bg-white/12 text-white" : "text-slate-500 hover:text-slate-300"}`}>{t}</button>
+            <button onclick={() => { targetLevel = t as "AA" | "AAA"; }} class={`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${targetLevel === t ? "bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"}`}>{t}</button>
           {/each}
         </div>
       </div>
       {#if !fg.editKey}
-        <p class="text-[9px] text-slate-600">Pick an editable brand/status <span class="font-mono">(base)</span> color as the foreground to enable auto-fix.</p>
+        <p class="text-[9px] text-slate-400 dark:text-slate-600">Pick an editable brand/status <span class="font-mono">(base)</span> color as the foreground to enable auto-fix.</p>
       {:else if pairRatio !== null && pairRatio >= (targetLevel === "AAA" ? 7 : 4.5)}
-        <p class="text-[9px] text-emerald-300">Already passes {targetLevel}. 🎉</p>
+        <p class="text-[9px] text-emerald-700 dark:text-emerald-300">Already passes {targetLevel}. 🎉</p>
       {:else if suggestion}
         <div class="flex items-center gap-2">
-          <span class="w-7 h-7 rounded border border-white/10 shrink-0" style={`background:${paint(suggestion.value)}`}></span>
+          <span class="w-7 h-7 rounded border border-black/10 dark:border-white/10 shrink-0" style={`background:${paint(suggestion.value)}`}></span>
           <div class="flex-1 min-w-0">
-            <div class="text-[9px] font-mono text-slate-400 truncate">{suggestion.value}</div>
-            <div class="text-[9px] text-emerald-300">→ {suggestion.ratio.toFixed(2)}:1 ({targetLevel} ✓)</div>
+            <div class="text-[9px] font-mono text-slate-600 dark:text-slate-400 truncate">{suggestion.value}</div>
+            <div class="text-[9px] text-emerald-700 dark:text-emerald-300">→ {suggestion.ratio.toFixed(2)}:1 ({targetLevel} ✓)</div>
           </div>
-          <button onclick={applyFix} class="px-2.5 py-1 rounded-lg bg-indigo-600/25 border border-indigo-500/40 text-indigo-200 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/35 shrink-0">Apply</button>
+          <button onclick={applyFix} class="px-2.5 py-1 rounded-lg bg-indigo-600/25 border border-indigo-500/40 text-indigo-800 dark:text-indigo-200 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/35 shrink-0">Apply</button>
         </div>
       {:else}
-        <p class="text-[9px] text-slate-600">No lightness of this hue reaches {targetLevel} on this background — try a different background or hue.</p>
+        <p class="text-[9px] text-slate-400 dark:text-slate-600">No lightness of this hue reaches {targetLevel} on this background — try a different background or hue.</p>
       {/if}
     </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- MATRIX -->
   <section class="space-y-2">
@@ -258,7 +258,7 @@
       <span class="text-[10px] text-slate-500">{showMatrix ? "▲" : "▼"}</span>
     </button>
     {#if showMatrix}
-    <p class="text-[10px] text-slate-600">Foreground (rows) × background (cols). Click a cell to load it above.</p>
+    <p class="text-[10px] text-slate-400 dark:text-slate-600">Foreground (rows) × background (cols). Click a cell to load it above.</p>
     <div class="overflow-x-auto">
       <table class="border-collapse text-[9px]">
         <thead>
@@ -285,7 +285,7 @@
                     >{r.toFixed(1)}</button>
                   </td>
                 {:else}
-                  <td class="p-0.5 text-slate-700 text-center">·</td>
+                  <td class="p-0.5 text-slate-300 dark:text-slate-700 text-center">·</td>
                 {/if}
               {/each}
             </tr>

From 367a37b9fe8d1c82f1c4d23576d9de367366cabc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 3 Jul 2026 09:50:44 +0000
Subject: [PATCH 2/2] fix: derive remaining hardcoded <option> backgrounds from
 chrome theme

Same bug LayoutPanel already fixed in this PR was still present in
MotionPanel, TypographyPanel, and WcagPanel: their <select> controls
got a light-mode text/border treatment but every <option> kept a
hardcoded dark background (#16161e), which native <option> elements
don't accept via a dark: class, so light mode showed unreadable
dark-on-dark dropdown items.

Applies the same fix as LayoutPanel: a themeState-derived optionBg
used in each <option>'s inline style.
---
 .../src/components/panels/MotionPanel.svelte  |  9 +++++--
 .../components/panels/TypographyPanel.svelte  | 25 +++++++++++--------
 .../src/components/panels/WcagPanel.svelte    |  9 +++++--
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/configurator/src/components/panels/MotionPanel.svelte b/configurator/src/components/panels/MotionPanel.svelte
index 172b6820..032435a6 100644
--- a/configurator/src/components/panels/MotionPanel.svelte
+++ b/configurator/src/components/panels/MotionPanel.svelte
@@ -2,6 +2,11 @@
   import { KNOBS_BY_DOMAIN } from '../../lib/powerKnobs';
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import { themeState } from '../../lib/theme.svelte';
+
+  // <option> only reliably accepts a background via inline style (no dark:
+  // variant support), so it's derived from the chrome theme directly.
+  let optionBg = $derived(themeState.value === 'dark' ? '#16161e' : '#ffffff');
 
   let { overrides, onSet, onReset, onBulkChange }: {
     overrides: Record<string, string>;
@@ -140,7 +145,7 @@
           class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
         >
           {#each EASINGS as e (e.token)}
-            <option value={e.token} style="background:#16161e;">{e.label}</option>
+            <option value={e.token} style={`background:${optionBg};`}>{e.label}</option>
           {/each}
         </select>
         <select
@@ -150,7 +155,7 @@
           class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[10px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
         >
           {#each DURATIONS as d (d.token)}
-            <option value={d.token} style="background:#16161e;">{d.label}</option>
+            <option value={d.token} style={`background:${optionBg};`}>{d.label}</option>
           {/each}
         </select>
         <button
diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index bd4f5097..d76bdff3 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -5,6 +5,11 @@
   import SliderRow from '../inputs/SliderRow.svelte';
   import RangeWithNumber from '../inputs/RangeWithNumber.svelte';
   import ClampField from '../inputs/ClampField.svelte';
+  import { themeState } from '../../lib/theme.svelte';
+
+  // <option> only reliably accepts a background via inline style (no dark:
+  // variant support), so it's derived from the chrome theme directly.
+  let optionBg = $derived(themeState.value === 'dark' ? '#16161e' : '#ffffff');
 
   let { overrides, onSet, onReset, onBulkChange }: {
     tokens: SlashedToken[];
@@ -276,10 +281,10 @@
           style={`font-family: ${f.current || "inherit"}`}
         >
           {#each f.opts as o (o.label)}
-            <option value={o.value} style="font-family:inherit;background:#16161e;">{o.label}</option>
+            <option value={o.value} style={`font-family:inherit;background:${optionBg};`}>{o.label}</option>
           {/each}
           {#if f.current && !f.opts.some((o) => o.value === f.current)}
-            <option value={f.current} style="background:#16161e;">Custom: {f.current.split(",")[0].replace(/['"]/g, "")}</option>
+            <option value={f.current} style={`background:${optionBg};`}>Custom: {f.current.split(",")[0].replace(/['"]/g, "")}</option>
           {/if}
         </select>
         {#if f.token in overrides}
@@ -297,9 +302,9 @@
           onchange={(e) => { googleFontChoice = (e.target as HTMLSelectElement).value; }}
           class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
         >
-          <option value="" style="background:#16161e;">Pick a font…</option>
+          <option value="" style={`background:${optionBg};`}>Pick a font…</option>
           {#each GOOGLE_FONTS as g (g)}
-            <option value={g} style="background:#16161e;">{g}</option>
+            <option value={g} style={`background:${optionBg};`}>{g}</option>
           {/each}
         </select>
         <div class="flex gap-1 shrink-0">
@@ -378,10 +383,10 @@
         class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
       >
         {#each SIZE_OPTIONS as o (o.value)}
-          <option value={o.value} style="background:#16161e;">{o.label}</option>
+          <option value={o.value} style={`background:${optionBg};`}>{o.label}</option>
         {/each}
         {#if !SIZE_OPTIONS.some((o) => o.value === levelVal(activeLevel.size, activeLevel.dSize))}
-          <option value={levelVal(activeLevel.size, activeLevel.dSize)} style="background:#16161e;">custom</option>
+          <option value={levelVal(activeLevel.size, activeLevel.dSize)} style={`background:${optionBg};`}>custom</option>
         {/if}
       </select>
     </div>
@@ -395,10 +400,10 @@
         class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
       >
         {#each LEADING_OPTIONS as o (o.value)}
-          <option value={o.value} style="background:#16161e;">{o.label} · {o.num}</option>
+          <option value={o.value} style={`background:${optionBg};`}>{o.label} · {o.num}</option>
         {/each}
         {#if !LEADING_OPTIONS.some((o) => o.value === levelVal(activeLevel.lh, activeLevel.dLh))}
-          <option value={levelVal(activeLevel.lh, activeLevel.dLh)} style="background:#16161e;">custom</option>
+          <option value={levelVal(activeLevel.lh, activeLevel.dLh)} style={`background:${optionBg};`}>custom</option>
         {/if}
       </select>
     </div>
@@ -430,10 +435,10 @@
           class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
         >
           {#each TRACKING_OPTIONS as o (o.value)}
-            <option value={o.value} style="background:#16161e;">{o.label}</option>
+            <option value={o.value} style={`background:${optionBg};`}>{o.label}</option>
           {/each}
           {#if !TRACKING_OPTIONS.some((o) => o.value === levelVal(activeLevel.ls, activeLevel.dLs))}
-            <option value={levelVal(activeLevel.ls, activeLevel.dLs)} style="background:#16161e;">custom</option>
+            <option value={levelVal(activeLevel.ls, activeLevel.dLs)} style={`background:${optionBg};`}>custom</option>
           {/if}
         </select>
       </div>
diff --git a/configurator/src/components/panels/WcagPanel.svelte b/configurator/src/components/panels/WcagPanel.svelte
index c9108ee5..cab1ea2c 100644
--- a/configurator/src/components/panels/WcagPanel.svelte
+++ b/configurator/src/components/panels/WcagPanel.svelte
@@ -5,6 +5,11 @@
     getRelativeLuminance, getContrastRatio,
   } from '../../lib/colorUtils';
   import { resolveColor, resolveRgb, previewVersion, getActiveTheme } from '../../lib/previewResolver.svelte';
+  import { themeState } from '../../lib/theme.svelte';
+
+  // <option> only reliably accepts a background via inline style (no dark:
+  // variant support), so it's derived from the chrome theme directly.
+  let optionBg = $derived(themeState.value === 'dark' ? '#16161e' : '#ffffff');
 
   let { overrides, onSet }: {
     tokens: SlashedToken[];
@@ -180,14 +185,14 @@
       <div>
         <div class="text-[9px] text-slate-500 mb-1">Foreground</div>
         <select bind:value={fgLabel} class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer">
-          {#each ALL_OPTS as o (o.label)}<option value={o.label} style="background:#16161e;">{o.label}</option>{/each}
+          {#each ALL_OPTS as o (o.label)}<option value={o.label} style={`background:${optionBg};`}>{o.label}</option>{/each}
         </select>
       </div>
       <button onclick={swap} title="Swap" class="mb-0.5 px-2 py-1.5 rounded-lg border border-black/10 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer text-[12px]">⇄</button>
       <div>
         <div class="text-[9px] text-slate-500 mb-1">Background</div>
         <select bind:value={bgLabel} class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer">
-          {#each ALL_OPTS as o (o.label)}<option value={o.label} style="background:#16161e;">{o.label}</option>{/each}
+          {#each ALL_OPTS as o (o.label)}<option value={o.label} style={`background:${optionBg};`}>{o.label}</option>{/each}
         </select>
       </div>
     </div>