diff --git a/configurator/src/components/inputs/ClampField.svelte b/configurator/src/components/inputs/ClampField.svelte
index a1d88bd6..09904b07 100644
--- a/configurator/src/components/inputs/ClampField.svelte
+++ b/configurator/src/components/inputs/ClampField.svelte
@@ -6,8 +6,14 @@
    * band, a live clamp readout, an optional min→max preview, and optional
    * modular-scale ratio preset chips folded into the same card.
    */
+  import { themeState } from '../../lib/theme.svelte';
+
   type RatioPreset = { label: string; value: number };
 
+  // <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 {
     title,
     minValue,
@@ -77,17 +83,17 @@
   );
 </script>
 
-<div class={`rounded-xl border p-3 ${overridden ? "bg-indigo-500/8 border-indigo-500/25" : "bg-white/4 border-white/8"}`}>
+<div class={`rounded-xl border p-3 ${overridden ? "bg-indigo-500/8 border-indigo-500/25" : "bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8"}`}>
   <div class="flex items-center justify-between mb-2">
-    <span class="text-[10px] font-bold text-slate-300">{title}</span>
+    <span class="text-[10px] font-bold text-slate-700 dark:text-slate-300">{title}</span>
     <span class="text-[9px] font-mono text-slate-500">
-      clamp(<span class="text-indigo-300">{minValue}{unit}</span> … <span class="text-indigo-300">{maxValue}{unit}</span>)
+      clamp(<span class="text-indigo-700 dark:text-indigo-300">{minValue}{unit}</span> … <span class="text-indigo-700 dark:text-indigo-300">{maxValue}{unit}</span>)
     </span>
   </div>
 
   <!-- Connected dual-thumb track -->
   <div class="clampTrack relative h-5 flex items-center mb-2">
-    <div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div>
+    <div class="absolute inset-x-0 h-1 bg-black/8 dark:bg-white/8 rounded-full"></div>
     <div
       class="absolute h-1 bg-indigo-500 rounded-full"
       style={`left:${Math.min(minPct, maxPct)}%; right:${100 - Math.max(minPct, maxPct)}%`}
@@ -112,13 +118,13 @@
       <span class="text-[9px] text-slate-500 shrink-0">{minLabel}</span>
       <input type="number" {min} {max} {step} value={minValue}
         onchange={(e) => onMinChange(clamp(parseFloat((e.target as HTMLInputElement).value) || min))}
-        class="w-full bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 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 text-[11px] font-mono text-slate-800 dark:text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500" />
     </label>
     <label class="flex items-center gap-1.5">
       <span class="text-[9px] text-slate-500 shrink-0">{maxLabel}</span>
       <input type="number" {min} {max} {step} value={maxValue}
         onchange={(e) => onMaxChange(clamp(parseFloat((e.target as HTMLInputElement).value) || max))}
-        class="w-full bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 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 text-[11px] font-mono text-slate-800 dark:text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500" />
     </label>
   </div>
 
@@ -126,14 +132,14 @@
   {#if previewKind === "type"}
     <div class="flex items-baseline justify-between gap-3 mt-2 px-1 overflow-hidden">
       <span class="text-slate-500 leading-none truncate" style={`font-size:${Math.min(minValue, 2)}rem`}>Aa<span class="text-[8px] font-mono align-middle ml-1">{minLabel.toLowerCase()}</span></span>
-      <span class="text-white/80 leading-none truncate" style={`font-size:${Math.min(maxValue, 2.6)}rem`}>Aa<span class="text-[8px] font-mono align-middle ml-1">{maxLabel.toLowerCase()}</span></span>
+      <span class="text-slate-900/80 dark:text-white/80 leading-none truncate" style={`font-size:${Math.min(maxValue, 2.6)}rem`}>Aa<span class="text-[8px] font-mono align-middle ml-1">{maxLabel.toLowerCase()}</span></span>
     </div>
   {:else if previewKind === "space"}
     <div class="flex items-center gap-2 mt-2 px-1">
       <div class="h-2 bg-indigo-500/40 rounded shrink-0" style={`width:${Math.min(minValue * 28, 120)}px`}></div>
-      <span class="text-[8px] font-mono text-slate-600">min</span>
+      <span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">min</span>
       <div class="h-2 bg-indigo-500/70 rounded shrink-0" style={`width:${Math.min(maxValue * 28, 200)}px`}></div>
-      <span class="text-[8px] font-mono text-slate-600">max</span>
+      <span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">max</span>
     </div>
   {/if}
 
@@ -141,7 +147,7 @@
        Each breakpoint has its own preset dropdown plus an always-visible custom
        number input, so a preset can be picked and then fine-tuned per side. -->
   {#if ratioPresets}
-    <div class="mt-3 pt-3 border-t border-white/6">
+    <div class="mt-3 pt-3 border-t border-black/6 dark:border-white/6">
       <div class="text-[9px] font-semibold text-slate-500 mb-2">Modular scale ratio</div>
       <div class="space-y-2">
         {#each [
@@ -157,20 +163,20 @@
                 const v = parseFloat((e.target as HTMLSelectElement).value);
                 if (Number.isFinite(v)) row.onChange?.(clampRatio(v));
               }}
-              class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded text-[10px] text-slate-200 px-1.5 py-1 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 text-[10px] text-slate-800 dark:text-slate-200 px-1.5 py-1 focus:outline-none focus:border-indigo-500 cursor-pointer"
             >
               {#if row.active === undefined}
-                <option value="" style="background:#16161e;">Custom</option>
+                <option value="" style={`background:${optionBg};`}>Custom</option>
               {/if}
               {#each ratioPresets as p (p.value)}
-                <option value={String(p.value)} style="background:#16161e;">{p.label}</option>
+                <option value={String(p.value)} style={`background:${optionBg};`}>{p.label}</option>
               {/each}
             </select>
             <input
               aria-label={`${row.side} modular scale custom ratio`}
               type="number" min={ratioMin_bound} max={ratioMax_bound} step={0.001} value={row.value}
               onchange={(e) => { const n = parseFloat((e.target as HTMLInputElement).value); if (Number.isFinite(n)) row.onChange?.(clampRatio(n)); }}
-              class="w-16 shrink-0 bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"
+              class="w-16 shrink-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded text-[11px] font-mono text-slate-800 dark:text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"
             />
           </div>
         {/each}
@@ -180,7 +186,7 @@
 
   {#if overridden && onReset}
     <div class="flex justify-end mt-2">
-      <button onclick={onReset} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
+      <button onclick={onReset} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer">reset</button>
     </div>
   {/if}
 </div>
diff --git a/configurator/src/components/inputs/ColorInput.svelte b/configurator/src/components/inputs/ColorInput.svelte
index 1a927f52..ffa66e25 100644
--- a/configurator/src/components/inputs/ColorInput.svelte
+++ b/configurator/src/components/inputs/ColorInput.svelte
@@ -61,7 +61,7 @@
 
 <div class="flex items-center gap-2">
   <!-- Swatch / native picker trigger -->
-  <div class="relative shrink-0 w-7 h-7 rounded border border-white/10 overflow-hidden cursor-pointer">
+  <div class="relative shrink-0 w-7 h-7 rounded border border-black/10 dark:border-white/10 overflow-hidden cursor-pointer">
     <div class="absolute inset-0" style:background={swatchColor}></div>
     {#if !isVar}
       <input
@@ -91,15 +91,15 @@
         if (e.key === "Escape") { cancelBlur = true; editing = false; }
       }}
       placeholder={placeholder ?? "default"}
-      class="flex-1 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none"
+      class="flex-1 bg-black/8 dark:bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none"
     />
   {:else}
     <button
       onclick={() => { editing = true; }}
-      class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-200 truncate cursor-pointer transition-colors"
+      class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 truncate cursor-pointer transition-colors"
     >
       {#if isOverridden}
-        <span class="text-indigo-300">{value}</span>
+        <span class="text-indigo-700 dark:text-indigo-300">{value}</span>
       {:else}
         {placeholder ?? "default"}
       {/if}
@@ -107,6 +107,6 @@
   {/if}
 
   {#if isOverridden}
-    <button onclick={onReset} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+    <button onclick={onReset} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
   {/if}
 </div>
diff --git a/configurator/src/components/inputs/OklchColorDesk.svelte b/configurator/src/components/inputs/OklchColorDesk.svelte
index e63e7fec..efdf3ebe 100644
--- a/configurator/src/components/inputs/OklchColorDesk.svelte
+++ b/configurator/src/components/inputs/OklchColorDesk.svelte
@@ -50,19 +50,19 @@
   }
 </script>
 
-<div class={`rounded-xl border transition-all ${overridden ? "bg-indigo-500/8 border-indigo-500/20" : "bg-white/4 border-white/8 hover:border-white/12"}`}>
+<div class={`rounded-xl border transition-all ${overridden ? "bg-indigo-500/8 border-indigo-500/20" : "bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8 hover:border-black/12 dark:hover:border-white/12"}`}>
   <button
     onclick={() => { expanded = !expanded; }}
     class="w-full flex items-center gap-3 px-3 py-2.5 cursor-pointer"
   >
     <div
-      class="w-8 h-8 rounded-lg border border-white/10 shrink-0 shadow-lg"
+      class="w-8 h-8 rounded-lg border border-black/10 dark:border-white/10 shrink-0 shadow-lg"
       style:background={swatchColor}
     ></div>
     <div class="flex-1 text-left min-w-0">
-      <div class="text-[11px] font-semibold text-slate-200">{label}</div>
+      <div class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label}</div>
       <div class="text-[9px] font-mono text-slate-500">{shortName}</div>
-      <div class="text-[9px] font-mono text-slate-600">{value}</div>
+      <div class="text-[9px] font-mono text-slate-400 dark:text-slate-600">{value}</div>
     </div>
     {#if overridden}
       <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0"></div>
@@ -71,12 +71,12 @@
   </button>
 
   {#if expanded}
-    <div class="px-3 pb-3 border-t border-white/6 pt-3 space-y-3">
+    <div class="px-3 pb-3 border-t border-black/6 dark:border-white/6 pt-3 space-y-3">
       <!-- L slider -->
       <div>
         <div class="flex justify-between mb-1">
-          <span class="text-[10px] font-bold text-slate-400">Lightness (L)</span>
-          <span class="text-[10px] font-mono text-slate-400">{parsed.l.toFixed(3)}</span>
+          <span class="text-[10px] font-bold text-slate-600 dark:text-slate-400">Lightness (L)</span>
+          <span class="text-[10px] font-mono text-slate-600 dark:text-slate-400">{parsed.l.toFixed(3)}</span>
         </div>
         <div
           class="h-4 rounded-full mb-1"
@@ -94,8 +94,8 @@
       <!-- C slider -->
       <div>
         <div class="flex justify-between mb-1">
-          <span class="text-[10px] font-bold text-slate-400">Chroma (C)</span>
-          <span class="text-[10px] font-mono text-slate-400">{parsed.c.toFixed(3)}</span>
+          <span class="text-[10px] font-bold text-slate-600 dark:text-slate-400">Chroma (C)</span>
+          <span class="text-[10px] font-mono text-slate-600 dark:text-slate-400">{parsed.c.toFixed(3)}</span>
         </div>
         <RangeWithNumber
           value={parsed.c}
@@ -109,8 +109,8 @@
       <!-- H slider -->
       <div>
         <div class="flex justify-between mb-1">
-          <span class="text-[10px] font-bold text-slate-400">Hue (H)</span>
-          <span class="text-[10px] font-mono text-slate-400">{parsed.h.toFixed(1)}°</span>
+          <span class="text-[10px] font-bold text-slate-600 dark:text-slate-400">Hue (H)</span>
+          <span class="text-[10px] font-mono text-slate-600 dark:text-slate-400">{parsed.h.toFixed(1)}°</span>
         </div>
         <div
           class="h-4 rounded-full mb-1"
@@ -149,13 +149,13 @@
                 (e.currentTarget as HTMLInputElement).blur();
               }
             }}
-            class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] font-mono text-slate-200 focus:outline-none focus:border-indigo-500"
+            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-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500"
             placeholder="oklch(0.6 0.15 264)"
           />
           {#if overridden}
             <button
               onclick={onReset}
-              class="px-2 py-1 rounded-lg text-[10px] text-rose-400 hover:bg-rose-500/10 border border-rose-500/20 transition-colors cursor-pointer"
+              class="px-2 py-1 rounded-lg text-[10px] text-rose-600 dark:text-rose-400 hover:bg-rose-500/10 border border-rose-500/20 transition-colors cursor-pointer"
             >
               Reset
             </button>
diff --git a/configurator/src/components/inputs/PowerKnobRow.svelte b/configurator/src/components/inputs/PowerKnobRow.svelte
index f6bdaa6b..6d156ca4 100644
--- a/configurator/src/components/inputs/PowerKnobRow.svelte
+++ b/configurator/src/components/inputs/PowerKnobRow.svelte
@@ -28,15 +28,15 @@
 <div class="group">
   <div class="flex items-center justify-between mb-1.5">
     <div class="flex items-center gap-2">
-      <span class="text-[11px] font-semibold text-slate-300">{knob.label}</span>
+      <span class="text-[11px] font-semibold text-slate-700 dark:text-slate-300">{knob.label}</span>
       {#if knob.driving !== undefined}
-        <span class="text-[9px] text-slate-600 font-mono">→ {knob.driving} tokens</span>
+        <span class="text-[9px] text-slate-400 dark:text-slate-600 font-mono">→ {knob.driving} tokens</span>
       {/if}
     </div>
     {#if isOverridden}
       <button
         onclick={handleReset}
-        class="text-[9px] text-slate-500 hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
+        class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
       >
         reset
       </button>
@@ -51,6 +51,6 @@
     onChange={handleChange}
   />
   {#if knob.help}
-    <p class="text-[10px] text-slate-600 mt-1 leading-relaxed">{knob.help}</p>
+    <p class="text-[10px] text-slate-400 dark:text-slate-600 mt-1 leading-relaxed">{knob.help}</p>
   {/if}
 </div>
diff --git a/configurator/src/components/inputs/RangeWithNumber.svelte b/configurator/src/components/inputs/RangeWithNumber.svelte
index d21404c4..f0fb6374 100644
--- a/configurator/src/components/inputs/RangeWithNumber.svelte
+++ b/configurator/src/components/inputs/RangeWithNumber.svelte
@@ -18,7 +18,7 @@
 
 <div class="flex items-center gap-2 w-full">
   <div class="relative flex-1 h-5 flex items-center">
-    <div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div>
+    <div class="absolute inset-x-0 h-1 bg-black/8 dark:bg-white/8 rounded-full"></div>
     <div
       class="absolute left-0 h-1 bg-indigo-500 rounded-full"
       style={`width: ${pct}%`}
@@ -34,7 +34,7 @@
       class="absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed h-full"
     />
     <div
-      class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-white/20 pointer-events-none"
+      class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-black/20 dark:border-white/20 pointer-events-none"
       style={`left: calc(${pct}% - 6px)`}
     ></div>
   </div>
@@ -47,7 +47,7 @@
       {value}
       {disabled}
       onchange={(e) => onChange(clamp(parseFloat((e.target as HTMLInputElement).value) || 0))}
-      class="w-14 bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500 disabled:opacity-40"
+      class="w-14 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded text-[11px] font-mono text-slate-800 dark:text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500 disabled:opacity-40"
     />
     {#if unit}
       <span class="text-[10px] text-slate-500 ml-1 font-mono">{unit}</span>
diff --git a/configurator/src/components/inputs/SliderRow.svelte b/configurator/src/components/inputs/SliderRow.svelte
index 837dc944..a6c9c0ab 100644
--- a/configurator/src/components/inputs/SliderRow.svelte
+++ b/configurator/src/components/inputs/SliderRow.svelte
@@ -45,7 +45,7 @@
 <div class="group">
   <div class="flex items-center justify-between mb-1.5">
     {#if label}
-      <span class="text-[11px] font-semibold text-slate-200">{label}</span>
+      <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label}</span>
     {:else}
       <span></span>
     {/if}
@@ -56,15 +56,15 @@
           title={showRaw ? "Switch to slider" : "Enter raw CSS value"}
           class={`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${
             showRaw
-              ? 'text-indigo-400'
-              : 'opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-400'
+              ? 'text-indigo-600 dark:text-indigo-400'
+              : 'opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400'
           }`}
         >&lt;/&gt;</button>
       {/if}
       {#if overridden}
         <button
           onclick={onReset}
-          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"
+          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>
@@ -85,16 +85,16 @@
         const v = rawDraft.trim();
         if (v && onRawSet) onRawSet(v);
       }}
-      class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-500 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] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-500 focus:outline-none focus:border-indigo-500"
     />
   {:else}
     <RangeWithNumber {value} {min} {max} {step} {unit} {onChange} />
     {#if rawDefault && !overridden}
-      <p class="text-[9px] font-mono text-slate-700 mt-0.5 leading-none">default: {rawDefault}</p>
+      <p class="text-[9px] font-mono text-slate-300 dark:text-slate-700 mt-0.5 leading-none">default: {rawDefault}</p>
     {/if}
   {/if}
 
   {#if help}
-    <p class="text-[10px] text-slate-600 mt-1 leading-relaxed">{help}</p>
+    <p class="text-[10px] text-slate-400 dark:text-slate-600 mt-1 leading-relaxed">{help}</p>
   {/if}
 </div>
diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index 464c9f5b..9699b8df 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -33,12 +33,12 @@
   let swatchColor = $derived(type === "color" ? paintSwatch(displayValue) : "");
 </script>
 
-<div class={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${isOverridden ? "bg-indigo-500/8 border border-indigo-500/15" : "hover:bg-white/4"}`}>
+<div class={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${isOverridden ? "bg-indigo-500/8 border border-indigo-500/15" : "hover:bg-black/4 dark:hover:bg-white/4"}`}>
   <div class={`w-1.5 h-1.5 rounded-full shrink-0 ${isOverridden ? "bg-indigo-500" : "bg-transparent"}`}></div>
 
   {#if type === "color"}
     <div
-      class="w-4 h-4 rounded-sm border border-white/10 shrink-0"
+      class="w-4 h-4 rounded-sm border border-black/10 dark:border-white/10 shrink-0"
       style:background={swatchColor}
     ></div>
   {:else}
@@ -46,11 +46,11 @@
   {/if}
 
   <div class="flex-1 min-w-0">
-    <div class="text-[10px] font-mono text-slate-400 truncate" title={token.name}>
+    <div class="text-[10px] font-mono text-slate-600 dark:text-slate-400 truncate" title={token.name}>
       {shortName}
     </div>
     {#if token.description}
-      <div class="text-[9px] text-slate-600 truncate">{token.description}</div>
+      <div class="text-[9px] text-slate-400 dark:text-slate-600 truncate">{token.description}</div>
     {/if}
   </div>
 
@@ -67,16 +67,16 @@
         if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur();
         if (e.key === "Escape") { expanded = false; }
       }}
-      class="w-28 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none text-right"
+      class="w-28 bg-black/8 dark:bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none text-right"
     />
   {:else}
     <button
       onclick={() => { expanded = true; }}
-      class="text-[10px] font-mono text-slate-500 hover:text-slate-200 truncate max-w-28 text-right cursor-pointer transition-colors"
+      class="text-[10px] font-mono text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 truncate max-w-28 text-right cursor-pointer transition-colors"
       title={displayValue}
     >
       {#if isOverridden}
-        <span class="text-indigo-300">{displayValue}</span>
+        <span class="text-indigo-700 dark:text-indigo-300">{displayValue}</span>
       {:else}
         {displayValue}
       {/if}
@@ -86,7 +86,7 @@
   {#if isOverridden}
     <button
       onclick={onReset}
-      class="text-[9px] text-slate-600 hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 shrink-0"
+      class="text-[9px] text-slate-400 dark:text-slate-600 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 shrink-0"
     >
       ✕
     </button>
diff --git a/configurator/src/components/panels/AllTokensTab.svelte b/configurator/src/components/panels/AllTokensTab.svelte
index f78b1c24..a220d861 100644
--- a/configurator/src/components/panels/AllTokensTab.svelte
+++ b/configurator/src/components/panels/AllTokensTab.svelte
@@ -52,14 +52,14 @@
       placeholder="Search tokens…"
       value={query}
       oninput={(e) => { query = (e.target as HTMLInputElement).value; }}
-      class="w-full bg-white/5 border border-white/10 rounded-lg px-3 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-3 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 dark:placeholder:text-slate-400 focus:outline-none focus:border-indigo-500"
     />
     <div class="flex items-center gap-3">
       <button
         onclick={() => { onlyModified = !onlyModified; }}
-        class={`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${onlyModified ? "text-indigo-400" : "text-slate-600 hover:text-slate-400"}`}
+        class={`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${onlyModified ? "text-indigo-600 dark:text-indigo-400" : "text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400"}`}
       >
-        <div class={`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${onlyModified ? "bg-indigo-600 border-indigo-500" : "border-white/20"}`}>
+        <div class={`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${onlyModified ? "bg-indigo-600 border-indigo-500" : "border-black/20 dark:border-white/20"}`}>
           {#if onlyModified}
             <div class="w-1 h-1 bg-white rounded-sm"></div>
           {/if}
@@ -69,16 +69,16 @@
       <button
         onclick={() => { showInternal = !showInternal; }}
       aria-expanded={showInternal}
-        class={`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${showInternal ? "text-amber-400" : "text-slate-600 hover:text-slate-400"}`}
+        class={`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${showInternal ? "text-amber-600 dark:text-amber-400" : "text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400"}`}
       >
-        <div class={`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${showInternal ? "bg-amber-600 border-amber-500" : "border-white/20"}`}>
+        <div class={`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${showInternal ? "bg-amber-600 border-amber-500" : "border-black/20 dark:border-white/20"}`}>
           {#if showInternal}
             <div class="w-1 h-1 bg-white rounded-sm"></div>
           {/if}
         </div>
         Internal ({internalCount})
       </button>
-      <span class="ml-auto text-[9px] text-slate-700 font-mono">
+      <span class="ml-auto text-[9px] text-slate-300 dark:text-slate-700 font-mono">
         {filtered().length}/{domainTokens.length}
       </span>
     </div>
@@ -87,27 +87,27 @@
     <div class="flex gap-3">
       <div class="flex items-center gap-1">
         <div class="w-1.5 h-1.5 rounded-full bg-slate-500"></div>
-        <span class="text-[8px] text-slate-600">Public ({publicCount})</span>
+        <span class="text-[8px] text-slate-400 dark:text-slate-600">Public ({publicCount})</span>
       </div>
       <div class="flex items-center gap-1">
         <div class="w-1.5 h-1.5 rounded-full bg-amber-600"></div>
-        <span class="text-[8px] text-slate-600">Advanced ({advancedCount})</span>
+        <span class="text-[8px] text-slate-400 dark:text-slate-600">Advanced ({advancedCount})</span>
       </div>
       {#if showInternal}
         <div class="flex items-center gap-1">
           <div class="w-1.5 h-1.5 rounded-full bg-rose-800"></div>
-          <span class="text-[8px] text-slate-600">Internal ({internalCount})</span>
+          <span class="text-[8px] text-slate-400 dark:text-slate-600">Internal ({internalCount})</span>
         </div>
       {/if}
     </div>
   </div>
 
-  <div class="w-full h-px bg-white/6 shrink-0"></div>
+  <div class="w-full h-px bg-black/6 dark:bg-white/6 shrink-0"></div>
 
   <!-- Token list -->
   <div class="flex-1 min-h-0 overflow-y-auto py-1">
     {#if filtered().length === 0}
-      <div class="text-center py-8 text-[11px] text-slate-600">
+      <div class="text-center py-8 text-[11px] text-slate-400 dark:text-slate-600">
         {onlyModified ? "No modified tokens in this domain" : "No tokens found"}
       </div>
     {:else}
diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte
index 67be49da..f480d283 100644
--- a/configurator/src/components/panels/BordersPanel.svelte
+++ b/configurator/src/components/panels/BordersPanel.svelte
@@ -103,13 +103,13 @@
         onSet={(v) => onSet("--sf-color-border", v)}
         onReset={() => onReset("--sf-color-border")}
       />
-      <p class="text-[9px] text-slate-600">
+      <p class="text-[9px] text-slate-400 dark:text-slate-600">
         Drives --sf-color-border--strong, --subtle, --translucent automatically.
       </p>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- BORDER SCALE -->
   <section class="space-y-3">
@@ -145,10 +145,10 @@
       />
 
       <!-- 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 [1, 2, 3, 4] as base (base)}
           <div class="flex items-center gap-3">
-            <span class="text-[9px] font-mono text-slate-600 w-10">{base}px →</span>
+            <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-10">{base}px →</span>
             <div
               class="flex-1 bg-indigo-400/50 rounded"
               style={`height: ${Math.max(base * borderScale, 0.5)}px`}
@@ -162,7 +162,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- LINE STYLES -->
   <section class="space-y-4">
@@ -189,8 +189,8 @@
                   onclick={() => s === row.default ? onReset(row.token) : onSet(row.token, s)}
                   class={`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${
                     current === s
-                      ? "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 class="block mx-auto mb-0.5" style={`width: 20px; height: 0; border-bottom: 2px ${s} currentColor; opacity: 0.7`}></span>
@@ -203,19 +203,19 @@
       </div>
 
       <!-- Combined border preview (width × style × color) -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center gap-3">
+      <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 gap-3">
         <div
-          class="px-4 py-2 rounded-lg text-[11px] text-slate-300 bg-white/4"
+          class="px-4 py-2 rounded-lg text-[11px] text-slate-700 dark:text-slate-300 bg-black/4 dark:bg-white/4"
           style={`border: ${Math.max(borderScale, 0.5)}px ${borderStyle} ${borderColor || "var(--sf-color-border, #64748b)"}`}
         >
           Border sample
         </div>
-        <span class="text-[9px] font-mono text-slate-600">{(1 * borderScale).toFixed(1)}px · {borderStyle}</span>
+        <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600">{(1 * borderScale).toFixed(1)}px · {borderStyle}</span>
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- DIVIDERS -->
   <section class="space-y-3">
@@ -229,7 +229,7 @@
     </button>
     {#if showDividers}
       <div class="flex items-center gap-2">
-        <div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Color</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Color</div>
         <ColorInput
           token="--sf-divider-color"
           value={dividerColor}
@@ -262,7 +262,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 -->
   <section class="space-y-3">
@@ -290,7 +290,7 @@
         onReset={() => onReset("--sf-focus-ring-offset")}
       />
       <div class="flex items-center gap-2">
-        <div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Ring color</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Ring color</div>
         <ColorInput
           token="--sf-focus-ring-color"
           value={focusRingColor}
@@ -301,9 +301,9 @@
         />
       </div>
       <!-- Focus ring 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: ${focusWidth}px solid ${focusRingColor || "oklch(0.7 0.2 235)"}; outline-offset: ${focusOffset}px`}
         >
           Focus preview
@@ -312,7 +312,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- RADIUS -->
   <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius</div>
@@ -322,13 +322,13 @@
     <button
       onclick={() => { showFineTune = !showFineTune; }}
       aria-expanded={showFineTune}
-      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>Fine-tune radius steps</span>
       <span class="text-[10px] text-slate-500">{showFineTune ? "▲" : "▼"}</span>
     </button>
     {#if showFineTune}
-      <div class="mt-2 space-y-2 pl-2 border-l border-white/10">
+      <div class="mt-2 space-y-2 pl-2 border-l border-black/10 dark:border-white/10">
         {#each RADIUS_FINE as r (r.name)}
           <SliderRow
             label={r.step}
@@ -360,7 +360,7 @@
       <span class="text-[10px] text-slate-500">{showRadiusPreview ? "▲" : "▼"}</span>
     </button>
     {#if showRadiusPreview}
-      <div class="bg-white/4 rounded-xl border border-white/8 p-4">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4">
         <div class="flex gap-3 flex-wrap">
           {#each RADIUS_STEPS as step (step)}
             {@const base = BASE_RADII[step] ?? 6}
@@ -370,7 +370,7 @@
                 class="w-10 h-10 bg-indigo-500/40 border border-indigo-500/30"
                 style={`border-radius: ${Math.min(computed, 9999)}px`}
               ></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>
@@ -378,14 +378,14 @@
     {/if}
   </div>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- COMPONENT SHAPE -->
   <div>
     <button
       onclick={() => { showComponents = !showComponents; }}
       aria-expanded={showComponents}
-      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">Component shape</span>
       <span class="text-[10px] text-slate-500">{showComponents ? "▲" : "▼"}</span>
@@ -408,14 +408,14 @@
     {/if}
   </div>
 
-  <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) -->
   <div>
     <button
       onclick={() => { showRadiusScale = !showRadiusScale; }}
       aria-expanded={showRadiusScale}
-      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]">{showRadiusScale ? "▲" : "▼"}</span>
diff --git a/configurator/src/components/panels/CheatsheetPanel.svelte b/configurator/src/components/panels/CheatsheetPanel.svelte
index bff6fee3..6ee5d5e2 100644
--- a/configurator/src/components/panels/CheatsheetPanel.svelte
+++ b/configurator/src/components/panels/CheatsheetPanel.svelte
@@ -69,15 +69,15 @@
   }
 
   const KIND_COLOR: Record<string, string> = {
-    layout: 'text-violet-400',
-    macro: 'text-sky-400',
-    state: 'text-amber-400',
-    accessibility: 'text-emerald-400',
-    motion: 'text-pink-400',
-    print: 'text-slate-400',
-    form: 'text-orange-400',
-    component: 'text-indigo-400',
-    theme: 'text-teal-400',
+    layout: 'text-violet-600 dark:text-violet-400',
+    macro: 'text-sky-600 dark:text-sky-400',
+    state: 'text-amber-600 dark:text-amber-400',
+    accessibility: 'text-emerald-600 dark:text-emerald-400',
+    motion: 'text-pink-600 dark:text-pink-400',
+    print: 'text-slate-600 dark:text-slate-400',
+    form: 'text-orange-600 dark:text-orange-400',
+    component: 'text-indigo-600 dark:text-indigo-400',
+    theme: 'text-teal-600 dark:text-teal-400',
   };
 </script>
 
@@ -89,19 +89,19 @@
       type="search"
       bind:value={query}
       placeholder="Search classes, tokens, descriptions…"
-      class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 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-3 py-2 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
     />
     <!-- Tab switcher -->
-    <div class="flex bg-white/4 border border-white/8 rounded-lg p-0.5 gap-0.5">
+    <div class="flex bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
       <button
         onclick={() => { tab = 'classes'; }}
-        class={`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${tab === 'classes' ? 'bg-indigo-600/30 text-indigo-200 border border-indigo-500/30' : 'text-slate-500 hover:text-slate-300'}`}
+        class={`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${tab === 'classes' ? 'bg-indigo-600/30 text-indigo-800 dark:text-indigo-200 border border-indigo-500/30' : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}`}
       >
         CSS classes ({filteredClasses().length})
       </button>
       <button
         onclick={() => { tab = 'tokens'; }}
-        class={`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${tab === 'tokens' ? 'bg-indigo-600/30 text-indigo-200 border border-indigo-500/30' : 'text-slate-500 hover:text-slate-300'}`}
+        class={`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${tab === 'tokens' ? 'bg-indigo-600/30 text-indigo-800 dark:text-indigo-200 border border-indigo-500/30' : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}`}
       >
         CSS vars ({filteredTokens().length})
       </button>
@@ -112,27 +112,27 @@
   <div class="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
     {#if tab === 'classes'}
       {#if filteredClasses().length === 0}
-        <div class="text-[11px] text-slate-600 py-8 text-center">No classes match "{query}"</div>
+        <div class="text-[11px] text-slate-400 dark:text-slate-600 py-8 text-center">No classes match "{query}"</div>
       {:else}
         {#each [...classGroups.entries()] as [cat, groups] (cat)}
           <div class="mt-4 mb-1">
-            <div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest py-1 border-b border-white/6">{cat}</div>
+            <div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest py-1 border-b border-black/6 dark:border-white/6">{cat}</div>
           </div>
           {#each [...groups.entries()] as [grp, items] (grp)}
             {#if grp}
-              <div class="text-[8px] text-slate-600 uppercase tracking-widest pt-2 pb-1 font-semibold">{grp}</div>
+              <div class="text-[8px] text-slate-400 dark:text-slate-600 uppercase tracking-widest pt-2 pb-1 font-semibold">{grp}</div>
             {/if}
             <div class="space-y-0.5">
               {#each items as cls (cls.name)}
-                <div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors">
+                <div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-black/4 dark:hover:bg-white/4 transition-colors">
                   <div class="flex-1 min-w-0">
                     <div class="flex items-center gap-1.5 flex-wrap">
-                      <span class="font-mono text-[11px] font-semibold text-slate-200">{cls.selector}</span>
+                      <span class="font-mono text-[11px] font-semibold text-slate-800 dark:text-slate-200">{cls.selector}</span>
                       {#if cls.kind}
                         <span class={`text-[8px] font-bold uppercase ${KIND_COLOR[cls.kind] ?? 'text-slate-500'}`}>{cls.kind}</span>
                       {/if}
                       {#if cls.optional}
-                        <span class="text-[8px] text-slate-600 border border-white/10 px-1 rounded">optional</span>
+                        <span class="text-[8px] text-slate-400 dark:text-slate-600 border border-black/10 dark:border-white/10 px-1 rounded">optional</span>
                       {/if}
                     </div>
                     {#if cls.description}
@@ -142,10 +142,10 @@
                   <button
                     onclick={() => copyText(cls.selector)}
                     title="Copy selector"
-                    class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"
+                    class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-black/8 dark:hover:bg-white/8"
                   >
                     {#if copied === cls.selector}
-                      <Check class="w-3 h-3 text-emerald-400" />
+                      <Check class="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
                     {:else}
                       <Copy class="w-3 h-3 text-slate-500" />
                     {/if}
@@ -158,31 +158,31 @@
       {/if}
     {:else}
       {#if filteredTokens().length === 0}
-        <div class="text-[11px] text-slate-600 py-8 text-center">No tokens match "{query}"</div>
+        <div class="text-[11px] text-slate-400 dark:text-slate-600 py-8 text-center">No tokens match "{query}"</div>
       {:else}
         {#each [...tokenGroups.entries()] as [cat, groups] (cat)}
           <div class="mt-4 mb-1">
-            <div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest py-1 border-b border-white/6">{cat}</div>
+            <div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest py-1 border-b border-black/6 dark:border-white/6">{cat}</div>
           </div>
           {#each [...groups.entries()] as [grp, items] (grp)}
             {#if grp}
-              <div class="text-[8px] text-slate-600 uppercase tracking-widest pt-2 pb-1 font-semibold">{grp}</div>
+              <div class="text-[8px] text-slate-400 dark:text-slate-600 uppercase tracking-widest pt-2 pb-1 font-semibold">{grp}</div>
             {/if}
             <div class="space-y-0.5">
               {#each items as tok (tok.name)}
-                <div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors">
+                <div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-black/4 dark:hover:bg-white/4 transition-colors">
                   <div class="flex-1 min-w-0">
                     <div class="flex items-center gap-1.5 flex-wrap">
-                      <span class="font-mono text-[10px] font-semibold text-slate-200">{tok.name}</span>
+                      <span class="font-mono text-[10px] font-semibold text-slate-800 dark:text-slate-200">{tok.name}</span>
                       {#if tok.role === 'knob'}
-                        <span class="text-[8px] font-bold text-indigo-400 uppercase">knob</span>
+                        <span class="text-[8px] font-bold text-indigo-600 dark:text-indigo-400 uppercase">knob</span>
                       {/if}
                       {#if tok.tier === 'PUBLIC-ADVANCED'}
-                        <span class="text-[8px] text-amber-500/80 border border-amber-500/20 px-1 rounded">advanced</span>
+                        <span class="text-[8px] text-amber-700/80 dark:text-amber-500/80 border border-amber-500/20 px-1 rounded">advanced</span>
                       {/if}
                     </div>
                     {#if tok.value}
-                      <div class="font-mono text-[9px] text-slate-600 mt-0.5">{tok.value}</div>
+                      <div class="font-mono text-[9px] text-slate-400 dark:text-slate-600 mt-0.5">{tok.value}</div>
                     {/if}
                     {#if tok.description}
                       <div class="text-[9px] text-slate-500 mt-0.5 leading-relaxed">{tok.description}</div>
@@ -191,10 +191,10 @@
                   <button
                     onclick={() => copyText(`var(${tok.name})`)}
                     title="Copy var()"
-                    class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"
+                    class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-black/8 dark:hover:bg-white/8"
                   >
                     {#if copied === `var(${tok.name})`}
-                      <Check class="w-3 h-3 text-emerald-400" />
+                      <Check class="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
                     {:else}
                       <Copy class="w-3 h-3 text-slate-500" />
                     {/if}
diff --git a/configurator/src/components/panels/ColorsPanel.svelte b/configurator/src/components/panels/ColorsPanel.svelte
index 83073a13..76b787a3 100644
--- a/configurator/src/components/panels/ColorsPanel.svelte
+++ b/configurator/src/components/panels/ColorsPanel.svelte
@@ -465,22 +465,22 @@
   <!-- LIVE SEMANTIC PREVIEW -->
   <section class="space-y-2">
     <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Semantic colors</div>
-    <p class="text-[9px] text-slate-600 leading-relaxed">
+    <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
       Live preview — every semantic role on its on-color text, shown in light and dark. Resolved from the canvas, updates as you edit.
     </p>
     <div class="space-y-2.5">
       {#each SEMANTIC_PREVIEW as grp (grp.heading)}
         <div class="space-y-1">
-          <div class="text-[8px] font-semibold text-slate-600 uppercase tracking-widest">{grp.heading}</div>
+          <div class="text-[8px] font-semibold text-slate-400 dark:text-slate-600 uppercase tracking-widest">{grp.heading}</div>
           {#each ["light", "dark"] as side (side)}
             <div class="flex items-center gap-1">
-              <span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none uppercase">{side === "light" ? "L" : "D"}</span>
+              <span class="text-[7px] text-slate-400 dark:text-slate-600 w-2.5 shrink-0 text-right select-none uppercase">{side === "light" ? "L" : "D"}</span>
               <div class="grid grid-cols-5 gap-1 flex-1">
                 {#each grp.items as it (it.name)}
                   {@const bg = paintTheme(`var(${it.name})`, side as "light" | "dark", "transparent")}
                   {@const fg = paintTheme(`var(${it.fg})`, side as "light" | "dark", "currentColor")}
                   <div
-                    class="rounded-md border border-white/10 px-1 py-1.5 flex flex-col items-center justify-center gap-0.5 min-h-[34px]"
+                    class="rounded-md border border-black/10 dark:border-white/10 px-1 py-1.5 flex flex-col items-center justify-center gap-0.5 min-h-[34px]"
                     style={`background:${bg}; color:${fg}`}
                     title={`${it.name} (${side}) — ${bg}`}
                   >
@@ -496,7 +496,7 @@
     </div>
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- BRAND SOURCES -->
   <section class="space-y-3">
@@ -509,7 +509,7 @@
       <span class="text-[10px] text-slate-500">{showBrandSources ? "▲" : "▼"}</span>
     </button>
     {#if showBrandSources}
-    <p class="text-[10px] text-slate-600 leading-relaxed">
+    <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
       OKLCH source values — all 200+ derived color steps are computed automatically. Tints (50–400) mix toward Base
       (the "Surface" color) and shades (600–950) mix toward Text (driven by Neutral) — so editing Base or Neutral below
       will shift every family's tints/shades too. That's expected, not a bug.
@@ -526,8 +526,8 @@
                 onclick={() => toggleDarkMode(light.colorKey, dark, light.name)}
                 class={`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${
                   isAutoMode
-                    ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-300"
-                    : "border-white/10 text-slate-500 hover:text-slate-300"
+                    ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300"
+                    : "border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
                 }`}
               >{isAutoMode ? "Auto dark" : "Manual dark"}</button>
             {/if}
@@ -552,12 +552,12 @@
             {@const dText = getDarkText()}
             <div class="mt-1 pl-1 space-y-px">
               <div class="flex items-center gap-1">
-                <span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">L</span>
+                <span class="text-[7px] text-slate-400 dark:text-slate-600 w-2.5 shrink-0 text-right select-none">L</span>
                 <div class="flex gap-0.5">
                   {#each SWATCH_STEPS as step (step)}
                     {@const resolved = paletteSwatch(light.colorKey, lightSrcVal, step, lSurface, lText)}
                     <div
-                      class="group relative w-5 h-3 rounded-t border-x border-t border-white/10"
+                      class="group relative w-5 h-3 rounded-t border-x border-t border-black/10 dark:border-white/10"
                       style:background={resolved}
                       title={`${light.colorKey}-${step} (light) — ${resolved}`}
                     >{@render swatchTip(`${light.colorKey}-${step}`)}</div>
@@ -565,12 +565,12 @@
                 </div>
               </div>
               <div class="flex items-center gap-1">
-                <span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">D</span>
+                <span class="text-[7px] text-slate-400 dark:text-slate-600 w-2.5 shrink-0 text-right select-none">D</span>
                 <div class="flex gap-0.5">
                   {#each SWATCH_STEPS as step (step)}
                     {@const resolved = paletteSwatch(light.colorKey, darkSrcVal, step, dSurface, dText)}
                     <div
-                      class="group relative w-5 h-3 rounded-b border-x border-b border-white/10"
+                      class="group relative w-5 h-3 rounded-b border-x border-b border-black/10 dark:border-white/10"
                       style:background={resolved}
                       title={`${light.colorKey}-${step} (dark) — ${resolved}`}
                     >{@render swatchTip(`${light.colorKey}-${step}`)}</div>
@@ -579,7 +579,7 @@
               </div>
             </div>
             {#if light.colorKey === "base"}
-              <p class="text-[8px] text-slate-600 leading-snug pl-1">
+              <p class="text-[8px] text-slate-400 dark:text-slate-600 leading-snug pl-1">
                 Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve.
                 Light and dark use the <em>same</em> L per step, so at the default near-zero chroma the two rows look almost
                 identical — add chroma above to see them diverge by hue.
@@ -597,9 +597,9 @@
             />
           {:else if dark && isAutoMode}
             {@const derivedDark = deriveDarkFromLight(sourceValue(light), light.colorKey)}
-            <div class="flex items-center gap-1.5 text-[9px] text-slate-600 pl-1">
+            <div class="flex items-center gap-1.5 text-[9px] text-slate-400 dark:text-slate-600 pl-1">
               <span
-                class="w-3.5 h-3.5 rounded border border-white/10 shrink-0"
+                class="w-3.5 h-3.5 rounded border border-black/10 dark:border-white/10 shrink-0"
                 style:background={paint(derivedDark, derivedDark)}
                 title={derivedDark}
               ></span>
@@ -612,7 +612,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- LUMLOCKER -->
   <section class="space-y-3">
@@ -625,7 +625,7 @@
       <span class="text-[10px] text-slate-500">{showLumlocker ? "▲" : "▼"}</span>
     </button>
     {#if showLumlocker}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH
         lightness — useful for always-stable sections. Enable on canvas to preview.
       </p>
@@ -638,8 +638,8 @@
       />
 
       <!-- Before / after preview for every lockable color -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2">
-        <div class="flex items-center text-[8px] font-mono text-slate-600 uppercase tracking-widest">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-2">
+        <div class="flex items-center text-[8px] font-mono text-slate-400 dark:text-slate-600 uppercase tracking-widest">
           <span class="w-16 shrink-0">Color</span>
           <span class="flex-1 text-center">Current</span>
           <span class="flex-1 text-center">Locked</span>
@@ -649,10 +649,10 @@
             {@const cur = paintTheme(`var(--sf-color-${lk.key}-source-${side})`, side as "light" | "dark", "")}
             {@const locked = lockedColor(lk.key, side as "light" | "dark")}
             <div class="flex items-center gap-1">
-              <span class="text-[9px] text-slate-500 w-16 shrink-0">{lk.label} <span class="text-slate-600">{side === "light" ? "L" : "D"}</span></span>
-              <span class="flex-1 h-5 rounded border border-white/10" style={`background:${cur || `var(--sf-color-${lk.key})`}`}></span>
-              <span class="text-slate-600 text-[10px] px-1">→</span>
-              <span class="flex-1 h-5 rounded border border-white/10" style={`background:${paint(locked, locked)}`} title={locked}></span>
+              <span class="text-[9px] text-slate-500 w-16 shrink-0">{lk.label} <span class="text-slate-400 dark:text-slate-600">{side === "light" ? "L" : "D"}</span></span>
+              <span class="flex-1 h-5 rounded border border-black/10 dark:border-white/10" style={`background:${cur || `var(--sf-color-${lk.key})`}`}></span>
+              <span class="text-slate-400 dark:text-slate-600 text-[10px] px-1">→</span>
+              <span class="flex-1 h-5 rounded border border-black/10 dark:border-white/10" style={`background:${paint(locked, locked)}`} title={locked}></span>
             </div>
           {/each}
         {/each}
@@ -663,14 +663,14 @@
         onclick={() => { lumlockerPreview.value = !lumlockerPreview.value; }}
         class={`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${
           lumlockerPreview.value
-            ? "bg-indigo-600/25 border-indigo-500/40 text-indigo-200"
-            : "border-white/10 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+            ? "bg-indigo-600/25 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+            : "border-black/10 dark:border-white/10 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"
         }`}
       >{lumlockerPreview.value ? "✓ LumLocker active on canvas — click to disable" : "Preview LumLocker on live canvas"}</button>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- STATUS SOURCES -->
   <section class="space-y-3">
@@ -683,7 +683,7 @@
       <span class="text-[10px] text-slate-500">{showStatus ? "▲" : "▼"}</span>
     </button>
     {#if showStatus}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Dark mode is auto-derived from each light source by default. Switch to
         Manual dark to set a bespoke dark value.
       </p>
@@ -699,8 +699,8 @@
                   onclick={() => toggleDarkMode(light.colorKey, dark, light.name)}
                   class={`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${
                     isAutoMode
-                      ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-300"
-                      : "border-white/10 text-slate-500 hover:text-slate-300"
+                      ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300"
+                      : "border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
                   }`}
                 >{isAutoMode ? "Auto dark" : "Manual dark"}</button>
               {/if}
@@ -724,9 +724,9 @@
               />
             {:else if dark && isAutoMode}
               {@const derivedDark = deriveDarkFromLight(sourceValue(light), light.colorKey)}
-              <div class="flex items-center gap-1.5 text-[9px] text-slate-600 pl-1">
+              <div class="flex items-center gap-1.5 text-[9px] text-slate-400 dark:text-slate-600 pl-1">
                 <span
-                  class="w-3.5 h-3.5 rounded border border-white/10 shrink-0"
+                  class="w-3.5 h-3.5 rounded border border-black/10 dark:border-white/10 shrink-0"
                   style:background={paint(derivedDark, derivedDark)}
                   title={derivedDark}
                 ></span>
@@ -740,18 +740,18 @@
                 <span class="w-2.5 shrink-0"></span>
                 <div class="flex gap-0.5">
                   {#each STATUS_VARIANTS as v (v.label)}
-                    <span class="w-9 text-center text-[6px] font-mono text-slate-600 uppercase tracking-wide">{v.label}</span>
+                    <span class="w-9 text-center text-[6px] font-mono text-slate-400 dark:text-slate-600 uppercase tracking-wide">{v.label}</span>
                   {/each}
                 </div>
               </div>
               {#each [["L", "light"], ["D", "dark"]] as [tag, side] (tag)}
                 <div class="flex items-center gap-1">
-                  <span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">{tag}</span>
+                  <span class="text-[7px] text-slate-400 dark:text-slate-600 w-2.5 shrink-0 text-right select-none">{tag}</span>
                   <div class="flex gap-0.5">
                     {#each STATUS_VARIANTS as v (v.label)}
                       {@const resolved = paintTheme(v.expr(light.colorKey), side as "light" | "dark", "")}
                       <div
-                        class="group relative w-9 h-4 rounded-sm border border-white/10"
+                        class="group relative w-9 h-4 rounded-sm border border-black/10 dark:border-white/10"
                         style:background={resolved}
                         title={`${light.colorKey}-${v.label.toLowerCase()} (${side}) — ${resolved}`}
                       >{@render swatchTip(`${light.colorKey}-${v.label.toLowerCase()}`)}</div>
@@ -760,7 +760,7 @@
                 </div>
               {/each}
             </div>
-            <p class="text-[8px] text-slate-600 leading-snug pl-1">
+            <p class="text-[8px] text-slate-400 dark:text-slate-600 leading-snug pl-1">
               Status colors don't ride the brand mix curve — only the resolved color plus subtle/muted alpha washes and
               a strong shade are derived. There's no -50…-950 ramp for success/warning/info/danger.
             </p>
@@ -770,7 +770,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- TEXT CONTRAST -->
   <section class="space-y-4">
@@ -783,7 +783,7 @@
       <span class="text-[10px] text-slate-500">{showTextContrast ? "▲" : "▼"}</span>
     </button>
     {#if showTextContrast}
-    <p class="text-[10px] text-slate-600 leading-relaxed">
+    <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
       Controls whether text on brand-coloured surfaces is light or dark.
     </p>
     {#each contrastKnobs as k (k.name)}
@@ -795,18 +795,18 @@
     {/each}
 
     <!-- Live contrast summary (links to the full WCAG tool) -->
-    <div class="rounded-lg bg-white/4 border border-white/8 p-2.5 space-y-2">
+    <div class="rounded-lg bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8 p-2.5 space-y-2">
       {#each KEY_CONTRAST_PAIRS as pair (pair.label)}
         {@const ratio = pairRatio(pair.fg, pair.bg)}
         {#if ratio !== null}
           <div class="flex items-center gap-2">
             <span
-              class="w-6 h-6 rounded border border-white/10 shrink-0 flex items-center justify-center text-[10px] font-bold"
+              class="w-6 h-6 rounded border border-black/10 dark:border-white/10 shrink-0 flex items-center justify-center text-[10px] font-bold"
               style={`background:${paint(pair.bg, pair.bg)}; color:${paint(pair.fg, pair.fg)}`}
             >Aa</span>
             <span class="text-[9px] text-slate-500 flex-1 truncate">{pair.label}</span>
-            <span class="text-[10px] font-mono font-bold text-slate-200">{ratio.toFixed(2)}:1</span>
-            <span class={`text-[9px] font-bold px-1.5 py-0.5 rounded ${ratio >= 4.5 ? "bg-emerald-500/20 text-emerald-300" : "bg-amber-500/20 text-amber-300"}`}>
+            <span class="text-[10px] font-mono font-bold text-slate-800 dark:text-slate-200">{ratio.toFixed(2)}:1</span>
+            <span class={`text-[9px] font-bold px-1.5 py-0.5 rounded ${ratio >= 4.5 ? "bg-emerald-500/20 text-emerald-700 dark:text-emerald-300" : "bg-amber-500/20 text-amber-700 dark:text-amber-300"}`}>
               {ratio >= 4.5 ? "AA" : ratio >= 3 ? "AA-L" : "✗"}
             </span>
           </div>
@@ -815,7 +815,7 @@
       {#if onSelectDomain}
         <button
           onclick={() => onSelectDomain?.("wcag")}
-          class="w-full mt-1 py-1.5 rounded-lg bg-indigo-600/15 border border-indigo-500/30 text-indigo-300 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/25 transition-all"
+          class="w-full mt-1 py-1.5 rounded-lg bg-indigo-600/15 border border-indigo-500/30 text-indigo-700 dark:text-indigo-300 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/25 transition-all"
         >Open contrast tool →</button>
       {/if}
     </div>
@@ -831,7 +831,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SHADE CURVE -->
   <section class="space-y-4">
@@ -854,7 +854,7 @@
     {@const _curveText = curvePreviewSide === "light" ? getLightText() : getDarkText()}
     {@const _miniSurface = curvePreviewSide === "light" ? getLightSurface() : getDarkSurface()}
     {@const _miniText = curvePreviewSide === "light" ? getLightText() : getDarkText()}
-    <p class="text-[10px] text-slate-600 leading-relaxed">
+    <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
       Controls how much color is mixed into each palette step. Step 500 is always the source color.
     </p>
 
@@ -864,8 +864,8 @@
           onclick={() => onBulkChange(p.patch as Record<string, string | null>)}
           class={`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${
             activeCurvePreset?.label === p.label
-              ? "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 class="text-[11px] font-bold">{p.label}</span>
@@ -876,7 +876,7 @@
 
     <!-- Tints -->
     <div>
-      <div class="text-[10px] font-semibold text-slate-400 mb-2">Tints (50–400) — mixed toward surface</div>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Tints (50–400) — mixed toward surface</div>
       <div class="space-y-2">
         {#each MIX_STEPS.filter((s) => s.step === "tint") as s (s.name)}
           <SliderRow
@@ -893,7 +893,7 @@
 
     <!-- Shades -->
     <div>
-      <div class="text-[10px] font-semibold text-slate-400 mb-2">Shades (600–950) — mixed toward text</div>
+      <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Shades (600–950) — mixed toward text</div>
       <div class="space-y-2">
         {#each MIX_STEPS.filter((s) => s.step === "shade") as s (s.name)}
           <SliderRow
@@ -910,15 +910,15 @@
 
     <!-- Curve preview = live palette. Each step shows the real resolved swatch
          AND the mix amount as a height bar, so the curve doubles as a palette. -->
-    <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="flex items-center justify-between mb-2">
-        <span class="text-[9px] text-slate-600">Palette &amp; curve preview</span>
-        <div class="flex bg-white/5 border border-white/8 rounded p-0.5 gap-0.5">
+        <span class="text-[9px] text-slate-400 dark:text-slate-600">Palette &amp; curve preview</span>
+        <div class="flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded p-0.5 gap-0.5">
           {#each ["light", "dark"] as side (side)}
             <button
               onclick={() => { curvePreviewSide = side as "light" | "dark"; }}
               class={`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${
-                curvePreviewSide === side ? "bg-white/12 text-white" : "text-slate-500 hover:text-slate-300"
+                curvePreviewSide === side ? "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"
               }`}
             >{side === "light" ? "Light" : "Dark"}</button>
           {/each}
@@ -930,29 +930,29 @@
           {@const step = s.label}
           {@const swatch = computePaletteSwatch(_curvePrimSrc, step, _curveSurface, _curveText)}
           <div class="flex-1 flex flex-col items-center gap-0.5 h-full justify-end">
-            <span class="text-[7px] font-mono text-slate-600">{Math.round(val)}</span>
+            <span class="text-[7px] font-mono text-slate-400 dark:text-slate-600">{Math.round(val)}</span>
             <div
-              class="group relative w-full rounded-sm border-x border-t border-white/10"
+              class="group relative w-full rounded-sm border-x border-t border-black/10 dark:border-white/10"
               style={`background:${swatch}; height: ${Math.max((val / 100) * 56, 6)}px`}
               title={`primary-${step} (${curvePreviewSide}) · mix ${Math.round(val)}%`}
             >{@render swatchTip(`primary-${step}`)}</div>
-            <span class="text-[7px] font-mono text-slate-600">{step}</span>
+            <span class="text-[7px] font-mono text-slate-400 dark:text-slate-600">{step}</span>
           </div>
         {/each}
       </div>
-      <p class="text-[8px] text-slate-600 mt-2">Bar height = mix amount · fill = the resolved primary palette swatch at each step</p>
+      <p class="text-[8px] text-slate-400 dark:text-slate-600 mt-2">Bar height = mix amount · fill = the resolved primary palette swatch at each step</p>
     </div>
 
     <!-- Mini palettes: all brand colors × all steps, reactive to light/dark toggle -->
-    <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">
       <div class="flex items-center justify-between mb-1">
-        <span class="text-[9px] text-slate-600">Mini palettes — all brand colors</span>
-        <div class="flex bg-white/5 border border-white/8 rounded p-0.5 gap-0.5">
+        <span class="text-[9px] text-slate-400 dark:text-slate-600">Mini palettes — all brand colors</span>
+        <div class="flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded p-0.5 gap-0.5">
           {#each ["light", "dark"] as side (side)}
             <button
               onclick={() => { curvePreviewSide = side as "light" | "dark"; }}
               class={`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${
-                curvePreviewSide === side ? "bg-white/12 text-white" : "text-slate-500 hover:text-slate-300"
+                curvePreviewSide === side ? "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"
               }`}
             >{side === "light" ? "Light" : "Dark"}</button>
           {/each}
@@ -966,12 +966,12 @@
           : (BRAND_SOURCES.find(s => s.name === miniDOvKey)?.default ?? deriveDarkFromLight(miniLSrc, colorKey)))}
         {@const miniSrc = curvePreviewSide === "light" ? miniLSrc : miniDSrc}
         <div class="flex items-center gap-1.5">
-          <span class="text-[7px] font-mono text-slate-600 w-12 shrink-0 truncate">{colorKey}</span>
+          <span class="text-[7px] font-mono text-slate-400 dark:text-slate-600 w-12 shrink-0 truncate">{colorKey}</span>
           <div class="flex gap-0.5 flex-1">
             {#each SWATCH_STEPS as step (step)}
               {@const swatch = computePaletteSwatch(miniSrc, step, _miniSurface, _miniText)}
               <div
-                class="group relative flex-1 h-4 rounded-sm border border-white/10"
+                class="group relative flex-1 h-4 rounded-sm border border-black/10 dark:border-white/10"
                 style={`background:${swatch}`}
                 title={`${colorKey}-${step} (${curvePreviewSide})`}
               >{@render swatchTip(`${colorKey}-${step}`)}</div>
@@ -983,7 +983,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- GRADIENTS -->
   <section class="space-y-3">
@@ -996,7 +996,7 @@
       <span class="text-[10px] text-slate-500">{showGradients ? "▲" : "▼"}</span>
     </button>
     {#if showGradients}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Auto-derived from your brand colors. Use the angle/direction and stop
         controls, or edit the raw value for full control.
       </p>
@@ -1006,13 +1006,13 @@
           {#each GRADIENT_TOKENS.filter((g) => g.group === grp) as g (g.name)}
             {@const expr = `var(${g.name})`}
             {@const e = gradEdit(g)}
-            <div class="rounded-lg border border-white/8 bg-white/3 overflow-hidden">
+            <div class="rounded-lg border border-black/8 dark:border-white/8 bg-black/3 dark:bg-white/3 overflow-hidden">
               <div class="h-9 w-full" style={`background:${paintBg(expr, expr)}`}></div>
               <div class="px-2 py-1.5 space-y-1.5">
                 <div class="flex items-center gap-2">
-                  <span class="text-[10px] font-semibold text-slate-300 flex-1">{g.label}</span>
+                  <span class="text-[10px] font-semibold text-slate-700 dark:text-slate-300 flex-1">{g.label}</span>
                   {#if g.name in overrides}
-                    <button onclick={() => { delete gradientEdits[g.name]; onReset(g.name); }} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+                    <button onclick={() => { delete gradientEdits[g.name]; onReset(g.name); }} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
                   {/if}
                 </div>
 
@@ -1024,7 +1024,7 @@
                       <button
                         onclick={() => setGradientPart(g, "dir", d)}
                         class={`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${
-                          e.dir === d ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" : "border-white/8 text-slate-400 hover:bg-white/5"
+                          e.dir === d ? "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"
                         }`}
                       >{d}</button>
                     {/each}
@@ -1037,7 +1037,7 @@
                       oninput={(ev) => setGradientPart(g, "angle", parseInt((ev.target as HTMLInputElement).value))}
                       class="flex-1 accent-indigo-500"
                     />
-                    <span class="text-[9px] font-mono text-slate-400 w-9 text-right shrink-0">{e.angle}°</span>
+                    <span class="text-[9px] font-mono text-slate-600 dark:text-slate-400 w-9 text-right shrink-0">{e.angle}°</span>
                   </div>
                 {/if}
 
@@ -1046,17 +1046,17 @@
                   <input
                     type="text" value={e.stop1}
                     onchange={(ev) => setGradientPart(g, "stop1", (ev.target as HTMLInputElement).value.trim())}
-                    class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-300 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-0.5 text-[8px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500"
                   />
                   <input
                     type="text" value={e.stop2}
                     onchange={(ev) => setGradientPart(g, "stop2", (ev.target as HTMLInputElement).value.trim())}
-                    class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-300 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-0.5 text-[8px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500"
                   />
                 </div>
 
                 <!-- Default formula reference -->
-                <div class="text-[8px] font-mono text-slate-600 leading-snug break-all">
+                <div class="text-[8px] font-mono text-slate-400 dark:text-slate-600 leading-snug break-all">
                   <span class="text-slate-500">default:</span> {g.formula}
                 </div>
 
@@ -1070,7 +1070,7 @@
                     delete gradientEdits[g.name];
                     v ? onSet(g.name, v) : onReset(g.name);
                   }}
-                  class="w-full bg-white/5 border border-white/10 rounded px-1.5 py-0.5 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-0.5 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
                 />
               </div>
             </div>
@@ -1080,7 +1080,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- COLOR SCHEME -->
   <section class="space-y-3">
@@ -1093,8 +1093,8 @@
       <span class="text-[10px] text-slate-500">{showColorScheme ? "▲" : "▼"}</span>
     </button>
     {#if showColorScheme}
-      <p class="text-[9px] text-slate-600 leading-relaxed">
-        --sf-color-scheme — sets the CSS <span class="font-mono text-slate-400">color-scheme</span> property on the root, controlling browser UI (scrollbars, inputs) and default background.
+      <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
+        --sf-color-scheme — sets the CSS <span class="font-mono text-slate-600 dark:text-slate-400">color-scheme</span> property on the root, controlling browser UI (scrollbars, inputs) and default background.
       </p>
       <div class="flex gap-1">
         {#each [["light dark", "light dark (default)"], ["light", "Light only"], ["dark", "Dark only"]] as [val, label] (val)}
@@ -1103,8 +1103,8 @@
             onclick={() => val === "light dark" ? onReset("--sf-color-scheme") : onSet("--sf-color-scheme", val)}
             class={`flex-1 py-1.5 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"
             }`}
           >{label}</button>
         {/each}
@@ -1112,7 +1112,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SEMANTIC OVERRIDES -->
   <section class="space-y-3">
@@ -1125,14 +1125,14 @@
       <span class="text-[10px] text-slate-500">{showSemanticOverrides ? "▲" : "▼"}</span>
     </button>
     {#if showSemanticOverrides}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Direct color overrides for tokens the framework auto-derives. Use for edge cases.
       </p>
       <div class="space-y-2">
         {#each SEMANTIC_OVERRIDES as s (s.name)}
           {@const resolved = paint(`var(${s.name})`, "")}
           <div>
-            <div class="text-[10px] font-semibold text-slate-400 mb-1">{s.label}</div>
+            <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1">{s.label}</div>
             <ColorInput
               token={s.name}
               value={overrides[s.name] ?? ""}
@@ -1147,9 +1147,9 @@
     {/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> — override individual color steps (50–950), semantic aliases, or surface tokens directly.
+      <span class="text-slate-600 dark:text-slate-400 font-semibold">All tokens tab</span> — override individual color steps (50–950), semantic aliases, or surface tokens directly.
     </p>
   </div>
 </div>
diff --git a/configurator/src/components/panels/EffectsPanel.svelte b/configurator/src/components/panels/EffectsPanel.svelte
index 9f565690..338fa6c2 100644
--- a/configurator/src/components/panels/EffectsPanel.svelte
+++ b/configurator/src/components/panels/EffectsPanel.svelte
@@ -66,23 +66,23 @@
         onReset={() => onReset("--sf-blur")}
       />
       <!-- Blur preview -->
-      <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-3 items-center justify-center overflow-hidden relative">
+      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 flex gap-3 items-center justify-center overflow-hidden relative">
         <div class="absolute inset-0 grid grid-cols-4 grid-rows-3 gap-px opacity-30">
           {#each Array.from({ length: 12 }) as _, i (i)}
             <div class={i % 3 === 0 ? "bg-indigo-500/50" : i % 3 === 1 ? "bg-purple-500/40" : "bg-blue-500/30"}></div>
           {/each}
         </div>
         <div
-          class="relative z-10 w-20 h-12 rounded-lg border border-white/20 bg-white/10 flex items-center justify-center"
+          class="relative z-10 w-20 h-12 rounded-lg border border-black/20 dark:border-white/20 bg-black/10 dark:bg-white/10 flex items-center justify-center"
           style={`backdrop-filter: blur(${blur}px)`}
         >
-          <span class="text-[9px] font-mono text-white/70">{blur}px</span>
+          <span class="text-[9px] font-mono text-slate-900/70 dark:text-white/70">{blur}px</span>
         </div>
       </div>
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- OPACITY -->
   <section class="space-y-4">
@@ -117,14 +117,14 @@
         onReset={() => onReset("--sf-state-pending-opacity")}
       />
       <!-- Opacity 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: "muted", val: opacityMuted },
           { label: "disabled", val: opacityDisabled },
           { label: "pending", val: pendingOpacity },
         ] as row (row.label)}
           <div class="flex items-center gap-3">
-            <span class="text-[9px] text-slate-600 w-14">{row.label}</span>
+            <span class="text-[9px] text-slate-400 dark:text-slate-600 w-14">{row.label}</span>
             <div class="flex-1 h-4 bg-indigo-400 rounded" style={`opacity: ${row.val}`}></div>
             <span class="text-[9px] font-mono text-slate-500 w-8">{row.val}</span>
           </div>
@@ -133,7 +133,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-4">
@@ -146,13 +146,13 @@
       <span class="text-[10px] text-slate-500">{showScrim ? "▲" : "▼"}</span>
     </button>
     {#if showScrim}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
-        Gradient overlay for hero images and media content. Used by the <code class="text-slate-400">.sf-scrim</code> macro.
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
+        Gradient overlay for hero images and media content. Used by the <code class="text-slate-600 dark:text-slate-400">.sf-scrim</code> macro.
       </p>
 
       <!-- Scrim color -->
       <div class="flex items-center gap-2">
-        <div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Color</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Color</div>
         <ColorInput
           token="--sf-scrim-color"
           value={scrimColor}
@@ -164,15 +164,15 @@
       </div>
 
       <div>
-        <div class="text-[10px] font-semibold text-slate-400 mb-2">Direction</div>
+        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Direction</div>
         <div class="grid grid-cols-2 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-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${
                 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}
@@ -182,7 +182,7 @@
       </div>
 
       <!-- Scrim preview -->
-      <div class="rounded-xl overflow-hidden border border-white/8" style="height: 80px">
+      <div class="rounded-xl overflow-hidden border border-black/8 dark:border-white/8" style="height: 80px">
         <div
           class="w-full h-full relative"
           style="background: linear-gradient(135deg, oklch(0.3 0.15 264), oklch(0.25 0.1 300))"
@@ -197,7 +197,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SCROLLBAR -->
   <section class="space-y-3">
@@ -215,7 +215,7 @@
         { label: "Track color", token: "--sf-scrollbar-track", val: scrollbarTrack },
       ] as row (row.token)}
         <div class="flex items-center gap-2">
-          <div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">{row.label}</div>
+          <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">{row.label}</div>
           <ColorInput
             token={row.token}
             value={row.val}
@@ -227,16 +227,16 @@
         </div>
       {/each}
       <!-- Scrollbar strip preview -->
-      <div class="flex items-center gap-2 p-2 rounded-lg bg-white/4 border border-white/8">
+      <div class="flex items-center gap-2 p-2 rounded-lg bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8">
         <div class="w-16 h-3 rounded-full" style:background={scrollbarTrack || "rgba(255,255,255,0.08)"}>
           <div class="w-6 h-3 rounded-full" style:background={scrollbarThumb || "oklch(0.52 0.025 260)"}></div>
         </div>
-        <span class="text-[9px] text-slate-600">Scrollbar preview</span>
+        <span class="text-[9px] text-slate-400 dark:text-slate-600">Scrollbar preview</span>
       </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">
@@ -259,7 +259,7 @@
     {/if}
   </section>
 
-  <div class="h-px bg-white/6"></div>
+  <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- TEXT SHADOW PRESETS -->
   <section class="space-y-3">
@@ -272,14 +272,14 @@
       <span class="text-[10px] text-slate-500">{showTextShadow ? "▲" : "▼"}</span>
     </button>
     {#if showTextShadow}
-      <p class="text-[10px] text-slate-600 leading-relaxed">
-        Controls text legibility over images. Applied via <code class="text-slate-400">text-shadow: var(--sf-text-shadow-m)</code>.
-        Edit each token directly — use <code class="text-slate-400">none</code> to disable.
+      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
+        Controls text legibility over images. Applied via <code class="text-slate-600 dark:text-slate-400">text-shadow: var(--sf-text-shadow-m)</code>.
+        Edit each token directly — use <code class="text-slate-600 dark:text-slate-400">none</code> to disable.
       </p>
       <div class="space-y-2">
         {#each TEXT_SHADOW_TOKENS as t (t.token)}
           <div class="flex items-center gap-2">
-            <div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">{t.label}</div>
+            <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">{t.label}</div>
             <input
               type="text"
               value={overrides[t.token] ?? ""}
@@ -289,10 +289,10 @@
                 const trimmed = v.trim();
                 trimmed ? onSet(t.token, trimmed) : onReset(t.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 t.token in overrides}
-              <button onclick={() => onReset(t.token)} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+              <button onclick={() => onReset(t.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/ExportPanel.svelte b/configurator/src/components/panels/ExportPanel.svelte
index c25ef76a..07cbdefc 100644
--- a/configurator/src/components/panels/ExportPanel.svelte
+++ b/configurator/src/components/panels/ExportPanel.svelte
@@ -72,7 +72,7 @@
 <div class="p-4 space-y-4 overflow-y-auto flex-1 h-full">
   <div>
     <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Export</div>
-    <p class="text-[11px] text-slate-400 leading-relaxed">
+    <p class="text-[11px] text-slate-600 dark:text-slate-400 leading-relaxed">
       {count > 0
         ? `${count} override${count !== 1 ? "s" : ""} ready to export.`
         : "No overrides yet. Customise tokens, then export."}
@@ -83,11 +83,11 @@
   <button
     onclick={handleCopyLink}
     disabled={count === 0}
-    class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[11px] font-bold text-slate-300 hover:bg-white/8 hover:text-white transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+    class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-black/8 dark:border-white/8 bg-black/4 dark:bg-white/4 text-[11px] font-bold text-slate-700 dark:text-slate-300 hover:bg-black/8 dark:hover:bg-white/8 hover:text-slate-900 dark:hover:text-white transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
   >
     {#if copiedLink}
-      <Check class="w-3 h-3 text-emerald-400" />
-      <span class="text-emerald-400">Link copied!</span>
+      <Check class="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
+      <span class="text-emerald-600 dark:text-emerald-400">Link copied!</span>
     {:else}
       <Link class="w-3 h-3" />
       Copy shareable link
@@ -97,16 +97,16 @@
   <!-- Output mode toggle -->
   <div>
     <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">CSS output</div>
-    <div class="flex bg-white/5 border border-white/8 rounded-lg p-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">
       <button
         onclick={() => { outputMode = "layer"; }}
-        class={`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${outputMode === "layer" ? "bg-indigo-600 text-white" : "text-slate-400 hover:text-slate-200"}`}
+        class={`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${outputMode === "layer" ? "bg-indigo-600 text-white" : "text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"}`}
       >
         @layer
       </button>
       <button
         onclick={() => { outputMode = "root"; }}
-        class={`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${outputMode === "root" ? "bg-indigo-600 text-white" : "text-slate-400 hover:text-slate-200"}`}
+        class={`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${outputMode === "root" ? "bg-indigo-600 text-white" : "text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"}`}
       >
         :root
       </button>
@@ -115,22 +115,22 @@
 
   <!-- CSS output -->
   <div class="relative">
-    <pre class="bg-[#06060a] border border-white/8 rounded-xl p-4 text-[10px] font-mono text-slate-300 overflow-x-auto max-h-80 whitespace-pre-wrap">{css || "/* No overrides */"}</pre>
+    <pre class="bg-slate-100 dark:bg-[#06060a] border border-black/8 dark:border-white/8 rounded-xl p-4 text-[10px] font-mono text-slate-700 dark:text-slate-300 overflow-x-auto max-h-80 whitespace-pre-wrap">{css || "/* No overrides */"}</pre>
     <div class="absolute top-2 right-2 flex gap-1">
       <button
         onclick={handleCopy}
-        class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8"
+        class="p-1.5 rounded-lg bg-black/5 dark:bg-white/5 hover:bg-black/12 dark:hover:bg-white/12 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-all cursor-pointer border border-black/8 dark:border-white/8"
         title="Copy to clipboard"
       >
         {#if copied}
-          <Check class="w-3 h-3 text-emerald-400" />
+          <Check class="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
         {:else}
           <Copy class="w-3 h-3" />
         {/if}
       </button>
       <button
         onclick={handleDownload}
-        class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8"
+        class="p-1.5 rounded-lg bg-black/5 dark:bg-white/5 hover:bg-black/12 dark:hover:bg-white/12 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-all cursor-pointer border border-black/8 dark:border-white/8"
         title="Download .css"
       >
         <Download class="w-3 h-3" />
@@ -142,15 +142,15 @@
   <button
     onclick={handleDownloadW3C}
     disabled={count === 0}
-    class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[10px] font-bold text-slate-400 hover:bg-white/8 hover:text-slate-200 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+    class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-black/8 dark:border-white/8 bg-black/4 dark:bg-white/4 text-[10px] font-bold text-slate-600 dark:text-slate-400 hover:bg-black/8 dark:hover:bg-white/8 hover:text-slate-800 dark:hover:text-slate-200 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
   >
     <Download class="w-3 h-3" />
     Download W3C Design Tokens (.json)
   </button>
 
   <div class="rounded-lg bg-indigo-500/8 border border-indigo-500/15 p-3 space-y-2">
-    <div class="text-[10px] font-bold text-indigo-300">Usage</div>
-    <div class="text-[10px] text-slate-400 leading-relaxed">
+    <div class="text-[10px] font-bold text-indigo-700 dark:text-indigo-300">Usage</div>
+    <div class="text-[10px] text-slate-600 dark:text-slate-400 leading-relaxed">
       Paste this CSS into your project after the SLASHED import.
     </div>
     <pre class="text-[9px] font-mono text-slate-500 bg-black/30 rounded p-2 overflow-x-auto">{`@import 'slashed/slashed.full.css';
diff --git a/configurator/src/components/panels/GenericTokenPanel.svelte b/configurator/src/components/panels/GenericTokenPanel.svelte
index 40d72fbc..317c56ab 100644
--- a/configurator/src/components/panels/GenericTokenPanel.svelte
+++ b/configurator/src/components/panels/GenericTokenPanel.svelte
@@ -33,7 +33,7 @@
   <div class="flex items-center justify-between">
     <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest capitalize">{domain} tokens</div>
     {#if modifiedCount > 0}
-      <span class="text-[9px] font-bold text-indigo-400 font-mono">{modifiedCount} modified</span>
+      <span class="text-[9px] font-bold text-indigo-600 dark:text-indigo-400 font-mono">{modifiedCount} modified</span>
     {/if}
   </div>
 
@@ -42,11 +42,11 @@
     placeholder={`Search ${domain} tokens…`}
     value={query}
     oninput={(e) => { query = (e.target as HTMLInputElement).value; }}
-    class="w-full bg-white/5 border border-white/10 rounded-lg px-3 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-3 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 dark:placeholder:text-slate-400 focus:outline-none focus:border-indigo-500"
   />
 
   {#if filtered().length === 0}
-    <p class="text-[11px] text-slate-600 text-center py-8">No tokens found</p>
+    <p class="text-[11px] text-slate-400 dark:text-slate-600 text-center py-8">No tokens found</p>
   {:else}
     <div class="space-y-0.5">
       {#each filtered().slice(0, 60) as t (t.name)}
@@ -58,7 +58,7 @@
         />
       {/each}
       {#if filtered().length > 60}
-        <p class="text-[10px] text-slate-600 text-center py-2">
+        <p class="text-[10px] text-slate-400 dark:text-slate-600 text-center py-2">
           {filtered().length - 60} more — refine your search
         </p>
       {/if}
diff --git a/configurator/src/components/panels/HomePanel.svelte b/configurator/src/components/panels/HomePanel.svelte
index 3a695283..48218a06 100644
--- a/configurator/src/components/panels/HomePanel.svelte
+++ b/configurator/src/components/panels/HomePanel.svelte
@@ -68,13 +68,13 @@
   <!-- Welcome -->
   <div class="rounded-xl bg-gradient-to-br from-indigo-600/20 to-purple-600/10 border border-indigo-500/20 p-4">
     <div class="flex items-center gap-2 mb-2">
-      <Sparkles class="w-4 h-4 text-indigo-400" />
-      <span class="text-[11px] font-bold text-indigo-300 uppercase tracking-widest">SLASHED Studio</span>
+      <Sparkles class="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
+      <span class="text-[11px] font-bold text-indigo-700 dark:text-indigo-300 uppercase tracking-widest">SLASHED Studio</span>
     </div>
-    <p class="text-[12px] text-slate-300 leading-relaxed">
+    <p class="text-[12px] text-slate-700 dark:text-slate-300 leading-relaxed">
       Configure every SLASHED design token visually. Changes appear live in the preview.
       {#if overridesCount > 0}
-        You have <span class="text-indigo-300 font-bold">{overridesCount} active override{overridesCount !== 1 ? "s" : ""}</span>.
+        You have <span class="text-indigo-700 dark:text-indigo-300 font-bold">{overridesCount} active override{overridesCount !== 1 ? "s" : ""}</span>.
       {:else}
         Pick any domain below to get started.
       {/if}
@@ -82,7 +82,7 @@
     {#if overridesCount > 0}
       <button
         onclick={onResetAll}
-        class="mt-2 text-[10px] text-rose-400 hover:text-rose-300 transition-colors cursor-pointer"
+        class="mt-2 text-[10px] text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 transition-colors cursor-pointer"
       >
         Reset all overrides →
       </button>
@@ -98,19 +98,19 @@
         {@const DomainIcon = d.icon}
         <button
           onclick={() => onSelect(d.id)}
-          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/6 transition-colors cursor-pointer group text-left"
+          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-black/6 dark:hover:bg-white/6 transition-colors cursor-pointer group text-left"
         >
-          <div class="text-slate-500 group-hover:text-slate-300 transition-colors shrink-0">
+          <div class="text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300 transition-colors shrink-0">
             <DomainIcon class="w-4 h-4" />
           </div>
           <div class="flex-1 min-w-0">
-            <div class="text-[11px] font-semibold text-slate-300 group-hover:text-white transition-colors">{d.label}</div>
-            <div class="text-[9px] text-slate-600">{d.desc}</div>
+            <div class="text-[11px] font-semibold text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{d.label}</div>
+            <div class="text-[9px] text-slate-400 dark:text-slate-600">{d.desc}</div>
           </div>
           {#if count > 0}
-            <span class="text-[9px] font-bold text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0">{count}</span>
+            <span class="text-[9px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0">{count}</span>
           {/if}
-          <span class="text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
+          <span class="text-slate-300 dark:text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
         </button>
       {/each}
     </div>
@@ -124,16 +124,16 @@
         {@const ToolIcon = t.icon}
         <button
           onclick={() => onSelect(t.id)}
-          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/6 transition-colors cursor-pointer group text-left"
+          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-black/6 dark:hover:bg-white/6 transition-colors cursor-pointer group text-left"
         >
-          <div class="text-slate-500 group-hover:text-slate-300 transition-colors shrink-0">
+          <div class="text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300 transition-colors shrink-0">
             <ToolIcon class="w-4 h-4" />
           </div>
           <div class="flex-1 min-w-0">
-            <div class="text-[11px] font-semibold text-slate-300 group-hover:text-white transition-colors">{t.label}</div>
-            <div class="text-[9px] text-slate-600">{t.desc}</div>
+            <div class="text-[11px] font-semibold text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t.label}</div>
+            <div class="text-[9px] text-slate-400 dark:text-slate-600">{t.desc}</div>
           </div>
-          <span class="text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
+          <span class="text-slate-300 dark:text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
         </button>
       {/each}
     </div>
@@ -145,7 +145,7 @@
       <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Saved themes</div>
       <button
         onclick={() => onSelect("themes")}
-        class="text-[10px] text-slate-500 hover:text-indigo-400 transition-colors cursor-pointer"
+        class="text-[10px] text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors cursor-pointer"
       >Manage →</button>
     </div>
 
@@ -155,28 +155,28 @@
         bind:value={newName}
         placeholder="Save current as…"
         onkeydown={(e) => { if (e.key === "Enter") handleQuickSave(); }}
-        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={handleQuickSave}
         disabled={overridesCount === 0}
         aria-label="Save current theme"
-        class="flex items-center gap-1 px-2.5 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 px-2.5 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" /></button>
     </div>
 
     {#if savedThemes.length === 0}
-      <p class="text-[10px] text-slate-600">No saved themes yet. Configure tokens, then save.</p>
+      <p class="text-[10px] text-slate-400 dark:text-slate-600">No saved themes yet. Configure tokens, then save.</p>
     {:else}
       <div class="grid grid-cols-2 gap-2">
         {#each savedThemes.slice(0, 6) as theme (theme.id)}
           <button
             onclick={() => onApplyTheme(theme.overrides)}
-            class="flex items-start gap-2 p-3 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/14 transition-all cursor-pointer text-left group"
+            class="flex items-start gap-2 p-3 rounded-xl bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8 hover:bg-black/8 dark:hover:bg-white/8 hover:border-black/14 dark:hover:border-white/14 transition-all cursor-pointer text-left group"
           >
             <span class="text-lg leading-none shrink-0">{theme.icon}</span>
             <div class="min-w-0">
-              <div class="text-[11px] font-semibold text-slate-200 group-hover:text-white transition-colors truncate">{theme.name}</div>
+              <div class="text-[11px] font-semibold text-slate-800 dark:text-slate-200 group-hover:text-slate-900 dark:group-hover:text-white transition-colors truncate">{theme.name}</div>
               <div class="text-[9px] text-slate-500 mt-0.5 font-mono">{theme.blurb}</div>
             </div>
           </button>
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..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>;
@@ -94,9 +99,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 +111,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 +122,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 +130,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,32 +142,32 @@
           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>
+            <option value={e.token} style={`background:${optionBg};`}>{e.label}</option>
           {/each}
         </select>
         <select
           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>
+            <option value={d.token} style={`background:${optionBg};`}>{d.label}</option>
           {/each}
         </select>
         <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 +180,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 +199,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 +214,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 +227,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 +244,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 +263,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 +273,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 +286,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 +304,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 +319,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 +354,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 +372,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..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[];
@@ -265,51 +270,51 @@
       { 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)}
-            <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}
-          <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>
+          <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">
           <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 +323,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 +335,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 +350,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 +366,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,41 +376,41 @@
 
     <!-- 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>
+          <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>
 
     <!-- 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>
+          <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>
 
     <!-- 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 +418,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,17 +428,17 @@
     <!-- 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>
+            <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>
@@ -443,7 +448,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 +457,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 +473,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 +504,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 +516,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 +527,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 +535,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 +559,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 +577,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 +586,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 +608,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 +618,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 +631,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 +642,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 +674,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 +695,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 +707,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 +718,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 +731,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 +767,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 +791,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 +819,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 +839,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 +852,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 +884,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 +900,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 +909,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 +920,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 +933,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 +945,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 +955,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 +963,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 +973,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 +982,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 +1000,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..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[];
@@ -84,10 +89,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 +165,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 +184,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">
-          {#each ALL_OPTS as o (o.label)}<option value={o.label} style="background:#16161e;">{o.label}</option>{/each}
+        <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:${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-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">
-          {#each ALL_OPTS as o (o.label)}<option value={o.label} style="background:#16161e;">{o.label}</option>{/each}
+        <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:${optionBg};`}>{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 +263,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 +290,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>