diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index 49aca477..888f8b1c 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import type { PreviewTemplate, PresetTheme, SlashedToken } from './types';
   import StudioHeader from './components/shell/StudioHeader.svelte';
   import SidebarNav from './components/shell/SidebarNav.svelte';
@@ -56,7 +56,7 @@
   }
 
   // Save state — hasPendingChanges is derived so undo/redo update it automatically.
-  let lastSavedOverrides = $state<Record<string, string>>({ ...overrides });
+  let lastSavedOverrides = $state<Record<string, string>>(untrack(() => ({ ...overrides })));
   let saveState = $state<'idle' | 'saving' | 'saved'>('idle');
   let hasPendingChanges = $derived(!shallowEq(overrides, lastSavedOverrides));
   let saveStateTimer: ReturnType<typeof setTimeout> | null = null;
diff --git a/configurator/src/components/CommandPalette.svelte b/configurator/src/components/CommandPalette.svelte
index ffecea20..60aa4caa 100644
--- a/configurator/src/components/CommandPalette.svelte
+++ b/configurator/src/components/CommandPalette.svelte
@@ -72,6 +72,7 @@
   role="dialog"
   aria-modal="true"
   aria-label="Token search"
+  tabindex="-1"
   onmousedown={(e) => { if (e.target === e.currentTarget) onClose(); }}
 >
   <!-- Panel -->
diff --git a/configurator/src/components/inputs/ClampField.svelte b/configurator/src/components/inputs/ClampField.svelte
index dfab4656..a1d88bd6 100644
--- a/configurator/src/components/inputs/ClampField.svelte
+++ b/configurator/src/components/inputs/ClampField.svelte
@@ -22,14 +22,14 @@
     onMaxChange,
     overridden = false,
     onReset,
-    // Optional ratio block
+    // Optional ratio block — independent mobile (ratioMin) / desktop (ratioMax)
+    // modular-scale ratios. Each breakpoint gets its own preset selector and an
+    // always-visible custom number input.
     ratioPresets,
-    activeRatioValue,
     ratioMin,
     ratioMax,
     ratioMin_bound = 1.05,
     ratioMax_bound = 1.8,
-    onRatioPreset,
     onRatioMinChange,
     onRatioMaxChange,
     // Optional preview renderer (e.g. type sample / spacing block)
@@ -49,12 +49,10 @@
     overridden?: boolean;
     onReset?: () => void;
     ratioPresets?: RatioPreset[];
-    activeRatioValue?: number | undefined;
     ratioMin?: number;
     ratioMax?: number;
     ratioMin_bound?: number;
     ratioMax_bound?: number;
-    onRatioPreset?: (v: number) => void;
     onRatioMinChange?: (v: number) => void;
     onRatioMaxChange?: (v: number) => void;
     previewKind?: "none" | "type" | "space";
@@ -65,7 +63,18 @@
   }
   let minPct = $derived(((minValue - min) / (max - min)) * 100);
   let maxPct = $derived(((maxValue - min) / (max - min)) * 100);
-  let customRatioOpen = $derived(!!ratioPresets && activeRatioValue === undefined);
+
+  function clampRatio(v: number) {
+    return Math.min(ratioMax_bound, Math.max(ratioMin_bound, v));
+  }
+  // Which preset (if any) each breakpoint currently matches, computed per side
+  // so mobile and desktop highlight independently.
+  let activeRatioMin = $derived(
+    ratioPresets?.find((p) => ratioMin !== undefined && Math.abs(p.value - ratioMin) < 0.0015)?.value
+  );
+  let activeRatioMax = $derived(
+    ratioPresets?.find((p) => ratioMax !== undefined && Math.abs(p.value - ratioMax) < 0.0015)?.value
+  );
 </script>
 
 <div class={`rounded-xl border p-3 ${overridden ? "bg-indigo-500/8 border-indigo-500/25" : "bg-white/4 border-white/8"}`}>
@@ -128,38 +137,44 @@
     </div>
   {/if}
 
-  <!-- Ratio presets (optional) -->
+  <!-- Modular-scale ratio (optional) — independent mobile & desktop ratios.
+       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="text-[9px] font-semibold text-slate-500 mb-1.5">Modular scale ratio</div>
-      <div class="grid grid-cols-2 gap-1">
-        {#each ratioPresets as p (p.value)}
-          <button
-            onclick={() => onRatioPreset?.(p.value)}
-            class={`px-2 py-1 rounded-md text-[10px] border transition-all cursor-pointer text-left ${
-              activeRatioValue === 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"
-            }`}
-          >{p.label}</button>
+      <div class="text-[9px] font-semibold text-slate-500 mb-2">Modular scale ratio</div>
+      <div class="space-y-2">
+        {#each [
+          { side: minLabel, value: ratioMin, active: activeRatioMin, onChange: onRatioMinChange },
+          { side: maxLabel, value: ratioMax, active: activeRatioMax, onChange: onRatioMaxChange },
+        ] as row (row.side)}
+          <div class="flex items-center gap-2">
+            <span class="text-[9px] text-slate-500 w-14 shrink-0">{row.side}</span>
+            <select
+              aria-label={`${row.side} modular scale ratio preset`}
+              value={row.active !== undefined ? String(row.active) : ""}
+              onchange={(e) => {
+                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"
+            >
+              {#if row.active === undefined}
+                <option value="" style="background:#16161e;">Custom</option>
+              {/if}
+              {#each ratioPresets as p (p.value)}
+                <option value={String(p.value)} style="background:#16161e;">{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"
+            />
+          </div>
         {/each}
       </div>
-      {#if customRatioOpen}
-        <div class="grid grid-cols-2 gap-2 mt-2 pl-2 border-l border-amber-500/25">
-          <label class="flex items-center gap-1.5">
-            <span class="text-[9px] text-slate-500 shrink-0">{minLabel.toLowerCase()}</span>
-            <input type="number" min={ratioMin_bound} max={ratioMax_bound} step={0.001} value={ratioMin}
-              onchange={(e) => { const n = parseFloat((e.target as HTMLInputElement).value); if (Number.isFinite(n)) onRatioMinChange?.(Math.min(ratioMax_bound, Math.max(ratioMin_bound, n))); }}
-              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" />
-          </label>
-          <label class="flex items-center gap-1.5">
-            <span class="text-[9px] text-slate-500 shrink-0">{maxLabel.toLowerCase()}</span>
-            <input type="number" min={ratioMin_bound} max={ratioMax_bound} step={0.001} value={ratioMax}
-              onchange={(e) => { const n = parseFloat((e.target as HTMLInputElement).value); if (Number.isFinite(n)) onRatioMaxChange?.(Math.min(ratioMax_bound, Math.max(ratioMin_bound, n))); }}
-              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" />
-          </label>
-        </div>
-      {/if}
     </div>
   {/if}
 
diff --git a/configurator/src/components/inputs/ColorInput.svelte b/configurator/src/components/inputs/ColorInput.svelte
index 87af50b3..d4b82f01 100644
--- a/configurator/src/components/inputs/ColorInput.svelte
+++ b/configurator/src/components/inputs/ColorInput.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import { resolveColor, previewVersion } from '../../lib/previewResolver.svelte';
 
   let {
@@ -19,6 +20,13 @@
 
   let editing = $state(false);
   let cancelBlur = $state(false);
+  let editInput = $state<HTMLInputElement | null>(null);
+
+  $effect(() => {
+    if (editing) {
+      tick().then(() => editInput?.focus());
+    }
+  });
 
   // Bare "--token" is a UI shorthand; normalize to "var(--token)" before resolving or storing.
   function normalize(v: string): string {
@@ -69,8 +77,8 @@
   <!-- Text display / editable input -->
   {#if editing}
     <input
+      bind:this={editInput}
       value={value}
-      autofocus
       onblur={(e) => {
         if (cancelBlur) { cancelBlur = false; editing = false; return; }
         const v = normalize((e.target as HTMLInputElement).value);
diff --git a/configurator/src/components/inputs/SliderRow.svelte b/configurator/src/components/inputs/SliderRow.svelte
index 35a6a730..0b58b2a6 100644
--- a/configurator/src/components/inputs/SliderRow.svelte
+++ b/configurator/src/components/inputs/SliderRow.svelte
@@ -22,16 +22,17 @@
 
   let userRawMode = $state(false);
 
+  // Local draft so typing is never interrupted by re-renders. Declared before
+  // the derived below so `isEditing` is in scope where `showRaw` reads it.
+  let rawDraft = $state('');
+  let isEditing = $state(false);
+
   // Auto raw mode when override value is a CSS expression
   let isRawOverride = $derived(
     !!currentRaw && /^(var|calc|clamp|min|max|env)\(/.test(currentRaw.trim())
   );
 
-  let showRaw = $derived(!!(rawDefault && onRawSet && (userRawMode || isRawOverride)));
-
-  // Local draft so typing is never interrupted by re-renders
-  let rawDraft = $state(currentRaw ?? '');
-  let isEditing = $state(false);
+  let showRaw = $derived(!!(rawDefault && onRawSet && (userRawMode || isRawOverride || isEditing)));
 
   // Sync draft from external currentRaw changes only when user is not actively editing
   $effect(() => {
@@ -75,15 +76,14 @@
       value={rawDraft}
       placeholder={rawDefault}
       onfocus={() => { isEditing = true; }}
-      onblur={() => { isEditing = false; }}
+      onblur={() => {
+        isEditing = false;
+        if (!rawDraft.trim()) onReset();
+      }}
       oninput={(e) => {
         rawDraft = (e.target as HTMLInputElement).value;
         const v = rawDraft.trim();
-        if (!v) {
-          onReset();
-        } else if (onRawSet) {
-          onRawSet(v);
-        }
+        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"
     />
diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte
index d7f2fcc8..292efcb9 100644
--- a/configurator/src/components/panels/BordersPanel.svelte
+++ b/configurator/src/components/panels/BordersPanel.svelte
@@ -72,14 +72,16 @@
     const raw = overrides[r.name];
     if (!raw) return r.default;
     if (/^(var|calc|clamp)\(/.test(raw.trim())) return r.default;
-    return parseFloat(raw) || r.default;
+    const parsed = parseFloat(raw);
+    return isNaN(parsed) ? r.default : parsed;
   }
 
   function getComponentVal(t: typeof COMPONENT_TOKENS[0]): number {
     const raw = overrides[t.token];
     if (!raw) return t.default;
     if (/^(var|calc|clamp)\(/.test(raw.trim())) return t.default;
-    return parseFloat(raw) || t.default;
+    const parsed = parseFloat(raw);
+    return isNaN(parsed) ? t.default : parsed;
   }
 </script>
 
diff --git a/configurator/src/components/panels/ShadowsPanel.svelte b/configurator/src/components/panels/ShadowsPanel.svelte
index 0300475e..0f3da6ad 100644
--- a/configurator/src/components/panels/ShadowsPanel.svelte
+++ b/configurator/src/components/panels/ShadowsPanel.svelte
@@ -119,6 +119,7 @@
           <div class="text-[9px] text-slate-500 mt-0.5">Ambient glow on elevated surfaces</div>
         </div>
         <button
+          aria-label={glowDisabled ? "Enable shadow glow" : "Disable shadow glow"}
           onclick={() => {
             if (glowDisabled) onReset("--sf-shadow-glow");
             else onSet("--sf-shadow-glow", "none");
diff --git a/configurator/src/components/panels/SpacingPanel.svelte b/configurator/src/components/panels/SpacingPanel.svelte
index cc754e16..8a2945f1 100644
--- a/configurator/src/components/panels/SpacingPanel.svelte
+++ b/configurator/src/components/panels/SpacingPanel.svelte
@@ -48,10 +48,6 @@
   let vwMin      = $derived(num("--sf-fluid-min-vw", 22.5));
   let vwMax      = $derived(num("--sf-fluid-max-vw", 90));
 
-  let activeRatio = $derived(RATIO_PRESETS.find(
-    (p) => Math.abs(p.value - ratioMin) < 0.0015 && Math.abs(p.value - ratioMax) < 0.0015
-  ));
-
   let activeDensity = $derived(DENSITY_PRESETS.find((d) =>
     Object.entries(d.patch).every(([k, v]) =>
       v === null ? !(k in overrides) : overrides[k] === v
@@ -184,10 +180,8 @@
         onMinChange={(v) => onSet("--sf-space-base-min", String(v))}
         onMaxChange={(v) => onSet("--sf-space-base-max", String(v))}
         ratioPresets={RATIO_PRESETS}
-        activeRatioValue={activeRatio?.value}
         ratioMin={ratioMin} ratioMax={ratioMax}
         ratioMin_bound={1.1} ratioMax_bound={1.8}
-        onRatioPreset={(v) => onBulkChange({ "--sf-space-ratio-min": String(v), "--sf-space-ratio-max": String(v) })}
         onRatioMinChange={(v) => onSet("--sf-space-ratio-min", String(v))}
         onRatioMaxChange={(v) => onSet("--sf-space-ratio-max", String(v))}
       />
diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index 6fc95439..8d1fe2da 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -161,10 +161,6 @@
   let vwMin     = $derived(num("--sf-fluid-min-vw", 22.5));
   let vwMax     = $derived(num("--sf-fluid-max-vw", 90));
 
-  let activeRatio = $derived(RATIO_PRESETS.find(
-    (p) => Math.abs(p.value - ratioMin) < 0.0015 && Math.abs(p.value - ratioMax) < 0.0015
-  ));
-
   let showFontFamilies  = $state(false);
   let showPerType       = $state(false);
   let showBodyText      = $state(false);
@@ -757,10 +753,8 @@
       onMinChange={(v) => onSet("--sf-text-base-min", String(v))}
       onMaxChange={(v) => onSet("--sf-text-base-max", String(v))}
       ratioPresets={RATIO_PRESETS}
-      activeRatioValue={activeRatio?.value}
       ratioMin={ratioMin} ratioMax={ratioMax}
       ratioMin_bound={1.05} ratioMax_bound={1.8}
-      onRatioPreset={(v) => onBulkChange({ "--sf-text-ratio-min": String(v), "--sf-text-ratio-max": String(v) })}
       onRatioMinChange={(v) => onSet("--sf-text-ratio-min", String(v))}
       onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
     />
diff --git a/configurator/src/components/shell/PreviewPanel.svelte b/configurator/src/components/shell/PreviewPanel.svelte
index c1f2799d..014e370c 100644
--- a/configurator/src/components/shell/PreviewPanel.svelte
+++ b/configurator/src/components/shell/PreviewPanel.svelte
@@ -2,6 +2,7 @@
   import { Sun, Moon, Smartphone, Tablet, Monitor, RefreshCw, ExternalLink, Columns2 } from 'lucide-svelte';
   import type { PreviewTemplate } from '../../types';
   import { fa } from '../../lib/codec';
+  import { computeDerivedOverrides } from '../../lib/persistence';
   import { registerPreviewDoc, bumpPreviewVersion } from '../../lib/previewResolver.svelte';
   import { lumlockerPreview } from '../../lib/lumlockerPreview.svelte';
   // Import the built framework CSS at Vite compile time — always in sync with badges/.
@@ -21,6 +22,12 @@
     onTemplateChange: (t: PreviewTemplate) => void;
   } = $props();
 
+  function withDerivedOverrides(ov: Record<string, string>): Record<string, string> {
+    const reduceMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const derived = computeDerivedOverrides(ov, { reduceMotion });
+    return Object.keys(derived).length > 0 ? { ...derived, ...ov } : ov;
+  }
+
   const TEMPLATES: { id: PreviewTemplate; label: string }[] = [
     { id: "marketing", label: "Marketing" },
     { id: "docs", label: "Docs" },
@@ -468,7 +475,7 @@
     template: PreviewTemplate,
     frameworkCSS: string,
   ): string {
-    const css = fa(ov, { mode: "root", banner: false });
+    const css = fa(withDerivedOverrides(ov), { mode: "root", banner: false });
     const motionCSS =
       motion === "slow"
         ? "*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }"
@@ -549,7 +556,7 @@ ${BODIES[template]}
 
     const styleEl = doc.getElementById("slashed-overrides");
     if (styleEl) {
-      styleEl.textContent = fa(_ov, { mode: "root", banner: false });
+      styleEl.textContent = fa(withDerivedOverrides(_ov), { mode: "root", banner: false });
     }
 
     injectFontsIntoDoc(doc, _ov);
@@ -572,7 +579,7 @@ ${BODIES[template]}
     const _lightCount = splitLightLoadCount;
     const _darkCount = splitDarkLoadCount;
     const _lock = lumlockerPreview.value;
-    const css = fa(_ov, { mode: "root", banner: false });
+    const css = fa(withDerivedOverrides(_ov), { mode: "root", banner: false });
 
     const applyLock = (doc: Document) => {
       if (_lock) doc.documentElement.setAttribute("data-lumlocker", "");
diff --git a/configurator/src/lib/persistence.ts b/configurator/src/lib/persistence.ts
index b89fde33..e5cb0c83 100644
--- a/configurator/src/lib/persistence.ts
+++ b/configurator/src/lib/persistence.ts
@@ -17,6 +17,157 @@ import { Ja, Ga, fa } from "./codec";
 
 const LS_KEY = "slashed-studio/overrides/v2";
 
+// ---------------------------------------------------------------------------
+// Modular-scale derived-token computation
+//
+// When source tokens (--sf-text-base-min etc.) are in the overrides map, we
+// pre-compute all derived output tokens in JS using the same formula the CSS
+// framework uses, then inject them as *unlayered* :root CSS alongside the
+// source tokens. Unlayered CSS beats any @layer, so these computed values
+// override hardcoded clamp declarations a legacy WP settings page may have
+// emitted inside @layer slashed.overrides, giving accurate live preview.
+// ---------------------------------------------------------------------------
+
+const TEXT_SCALE_SRC = new Set([
+  '--sf-text-base-min', '--sf-text-base-max',
+  '--sf-text-ratio-min', '--sf-text-ratio-max',
+  '--sf-text-scale', '--sf-text-display-base-min',
+  '--sf-text-display-base-max', '--sf-text-display-scale',
+  '--sf-fluid-min-vw', '--sf-fluid-max-vw',
+]);
+const SPACE_SCALE_SRC = new Set([
+  '--sf-space-base-min', '--sf-space-base-max',
+  '--sf-space-ratio-min', '--sf-space-ratio-max',
+  '--sf-space-scale', '--sf-fluid-min-vw', '--sf-fluid-max-vw',
+]);
+
+const TEXT_STEPS: [string, number][] = [
+  ['2xs', -3], ['xs', -2], ['s', -1], ['m', 0],
+  ['l', 1], ['xl', 2], ['2xl', 3], ['3xl', 4], ['4xl', 5],
+];
+const DISPLAY_STEPS: [string, number][] = [
+  ['display-s', 0], ['display-m', 1], ['display-l', 2],
+];
+const SPACE_STEPS: [string, number][] = [
+  ['2xs', -3], ['xs', -2], ['s', -1], ['m', 0],
+  ['l', 1], ['xl', 2], ['2xl', 3], ['3xl', 4], ['4xl', 5],
+];
+const RADIUS_STEPS: [string, number][] = [
+  ['2xs', 1], ['xs', 2], ['s', 4], ['m', 8],
+  ['l', 12], ['xl', 16], ['2xl', 24], ['3xl', 32], ['4xl', 48],
+];
+const BORDER_WIDTH_STEPS: [string, number][] = [
+  ['1', 1], ['2', 2], ['3', 3], ['4', 4],
+];
+const DURATION_STEPS: [string, number][] = [
+  ['instant', 100], ['fast', 150], ['normal', 250], ['slow', 400], ['slower', 600],
+];
+
+function getNum(ov: Record<string, string>, key: string, def: number): number {
+  const v = ov[key];
+  if (v === undefined) return def;
+  const n = parseFloat(v);
+  return isNaN(n) ? def : n;
+}
+
+function fmt(n: number): string {
+  const s = n.toFixed(6);
+  const trimmed = s.replace(/\.?0+$/, '');
+  return trimmed === '' || trimmed === '-' ? '0' : trimmed;
+}
+
+// Mirrors the framework CSS formula: scale distributes linearly so
+// calc(clamp(sMin rem, ..., sMax rem) * scale) == clamp(sMin*scale rem, ..., sMax*scale rem).
+function fluidClamp(
+  baseMin: number, baseMax: number, ratioMin: number, ratioMax: number,
+  vwMin: number, vwMax: number, step: number, scale: number,
+): string {
+  const sMin = baseMin * Math.pow(ratioMin, step) * scale;
+  const sMax = baseMax * Math.pow(ratioMax, step) * scale;
+  if (vwMax <= vwMin || Math.abs(sMin - sMax) < 1e-9) return `${fmt(sMin)}rem`;
+  const slope = (sMax - sMin) / (vwMax - vwMin);
+  return `clamp(${fmt(sMin)}rem, calc(${fmt(slope)} * (100vw - ${fmt(vwMin)}rem) + ${fmt(sMin)}rem), ${fmt(sMax)}rem)`;
+}
+
+export function computeDerivedOverrides(ov: Record<string, string>, { reduceMotion = false } = {}): Record<string, string> {
+  const derived: Record<string, string> = {};
+  const keys = Object.keys(ov);
+  const hasText   = keys.some((k) => TEXT_SCALE_SRC.has(k));
+  const hasSpace  = keys.some((k) => SPACE_SCALE_SRC.has(k));
+  const hasRadius = '--sf-radius-scale' in ov;
+  const hasBorder = '--sf-border-scale' in ov;
+  const hasMotion = '--sf-motion-scale' in ov;
+  if (!hasText && !hasSpace && !hasRadius && !hasBorder && !hasMotion) return derived;
+
+  const vwMin = getNum(ov, '--sf-fluid-min-vw', 22.5);
+  const vwMax = getNum(ov, '--sf-fluid-max-vw', 90);
+
+  if (hasText) {
+    const baseMin   = getNum(ov, '--sf-text-base-min', 1);
+    const baseMax   = getNum(ov, '--sf-text-base-max', 1.25);
+    const ratioMin  = getNum(ov, '--sf-text-ratio-min', 1.25);
+    const ratioMax  = getNum(ov, '--sf-text-ratio-max', 1.333);
+    const scale     = getNum(ov, '--sf-text-scale', 1);
+    for (const [name, step] of TEXT_STEPS) {
+      derived[`--sf-text-${name}`] = fluidClamp(baseMin, baseMax, ratioMin, ratioMax, vwMin, vwMax, step, scale);
+    }
+    const dispMin   = getNum(ov, '--sf-text-display-base-min', 2.4);
+    const dispMax   = getNum(ov, '--sf-text-display-base-max', 3);
+    const dispScale = getNum(ov, '--sf-text-display-scale', 1);
+    for (const [name, step] of DISPLAY_STEPS) {
+      derived[`--sf-text-${name}`] = fluidClamp(dispMin, dispMax, ratioMin, ratioMax, vwMin, vwMax, step, dispScale);
+    }
+  }
+
+  if (hasSpace) {
+    const baseMin  = getNum(ov, '--sf-space-base-min', 1);
+    const baseMax  = getNum(ov, '--sf-space-base-max', 2);
+    const ratioMin = getNum(ov, '--sf-space-ratio-min', 1.25);
+    const ratioMax = getNum(ov, '--sf-space-ratio-max', 1.333);
+    const scale    = getNum(ov, '--sf-space-scale', 1);
+    for (const [name, step] of SPACE_STEPS) {
+      derived[`--sf-space-${name}`] = fluidClamp(baseMin, baseMax, ratioMin, ratioMax, vwMin, vwMax, step, scale);
+    }
+  }
+
+  if (hasRadius) {
+    const scale = getNum(ov, '--sf-radius-scale', 1);
+    for (const [name, base] of RADIUS_STEPS) {
+      derived[`--sf-radius-${name}`] = `${fmt(base * scale)}px`;
+    }
+    derived['--sf-radius-none']  = '0';
+    derived['--sf-radius-full']  = '9999px';
+    // Keep relationship-based — mirrors framework token graph so fine-tune
+    // overrides on --sf-radius-full / --sf-radius-m still win.
+    derived['--sf-radius-pill']  = 'var(--sf-radius-full)';
+    derived['--sf-radius-outer'] = 'calc(var(--sf-radius-m) + var(--sf-component-pad))';
+  }
+
+  if (hasBorder) {
+    const scale = getNum(ov, '--sf-border-scale', 1);
+    for (const [name, base] of BORDER_WIDTH_STEPS) {
+      derived[`--sf-border-width-${name}`] = `${fmt(base * scale)}px`;
+    }
+  }
+
+  // Skip motion tokens when the OS prefers reduced motion — emitting them as
+  // unlayered :root CSS would override the framework's @media
+  // (prefers-reduced-motion: reduce) duration clamps that live inside @layer.
+  if (hasMotion && !reduceMotion) {
+    const scale = getNum(ov, '--sf-motion-scale', 1);
+    for (const [name, base] of DURATION_STEPS) {
+      derived[`--sf-duration-${name}`] = `${fmt(base * scale)}ms`;
+    }
+    derived['--sf-duration-none']             = '0ms';
+    derived['--sf-theme-transition-duration'] = `${fmt(300 * scale)}ms`;
+    for (let i = 1; i <= 5; i += 1) {
+      derived[`--sf-animation-delay-${i}`] = `${fmt(75 * i * scale)}ms`;
+    }
+  }
+
+  return derived;
+}
+
 interface SlashedAppBoot {
   rest?: { url?: string; nonce?: string };
   overrides?: Record<string, string>;
@@ -68,11 +219,21 @@ export function injectLivePreview(ov: Record<string, string>): void {
     styleEl.id = "sf-parent-overrides";
     document.head.appendChild(styleEl);
   }
-  styleEl.textContent = fa(ov, { mode: "root", banner: false });
+  // Include pre-computed derived tokens alongside source tokens so they win
+  // as unlayered CSS over any hardcoded clamp values in @layer slashed.overrides.
+  const reduceMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  const derived = computeDerivedOverrides(ov, { reduceMotion });
+  const preview = Object.keys(derived).length > 0 ? { ...derived, ...ov } : ov;
+  styleEl.textContent = fa(preview, { mode: "root", banner: false });
 }
 
 async function wpSave(rest: { url?: string; nonce?: string }, ov: Record<string, string>): Promise<void> {
-  const url = (rest.url ?? "").replace(/\/$/, "") + "/tokens/overrides";
+  const base = (rest.url ?? "").replace(/\/$/, "");
+  const parsed = new URL(base + "/tokens/overrides", window.location.href);
+  if (parsed.origin !== window.location.origin) {
+    throw new Error("slashed: REST URL must be same-origin");
+  }
+  const url = parsed.href;
   const res = await fetch(url, {
     method: "POST",
     credentials: "same-origin",