diff --git a/src/app.css b/src/app.css
index 68bea42..455a0cd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,16 +1,24 @@
-/* === Bundled Fonts — offline-first === */
+/* === Bundled Fonts — offline-first ===
+   These @font-face declarations are mirrored in
+   src/design-system/colors_and_type.css for the buildless preview pages
+   (which load that file directly without going through Tailwind/Vite).
+   The two copies must keep font-family, font-weight, font-style, and
+   font-display in sync. The src URLs intentionally differ: this file
+   uses root-absolute paths served by Vite, the preview file uses
+   relative paths so the static HTML pages resolve fonts/ alongside. */
 @font-face {
   font-family: 'Lexend';
   src: url('/fonts/lexend-variable.woff2') format('woff2');
   font-weight: 100 900;
+  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Instrument Serif';
   src: url('/fonts/instrument-serif-italic.woff2') format('woff2');
-  font-style: italic;
   font-weight: 400;
+  font-style: italic;
   font-display: swap;
 }
 
@@ -18,13 +26,15 @@
   font-family: 'JetBrains Mono';
   src: url('/fonts/jetbrains-mono.woff2') format('woff2');
   font-weight: 100 800;
+  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Atkinson Hyperlegible Next';
   src: url('/fonts/atkinson-hyperlegible-next.woff2') format('woff2');
-  font-weight: 400 700;
+  font-weight: 200 800;
+  font-style: normal;
   font-display: swap;
 }
 
@@ -32,6 +42,7 @@
   font-family: 'OpenDyslexic';
   src: url('/fonts/opendyslexic.woff2') format('woff2');
   font-weight: 400 700;
+  font-style: normal;
   font-display: swap;
 }
 
@@ -67,6 +78,23 @@
   --color-accent-subtle: #d6845010;
   --color-accent-glow: #d6845025;
 
+  /* Amber shadow scale. Hard-coded rgba shadows in components were tied to
+     the dark-theme accent and stayed off-hue in light mode. These tokens
+     theme-switch with the accent (overrides in :root[data-theme="light"]).
+     Shapes correspond to existing usage sites:
+       sm     = subtle button/toggle glow      (Toggle on-state)
+       md     = lifted card / button drop      (ModelDownloader card)
+       lg     = hero glow under record button  (DictationPage record)
+       glow   = stronger 0.4-alpha emission    (progress-bar glows)
+       pill   = small selected-pill lift       (SegmentedButton, pill rows)
+       raised = soft raised tile               (FilesPage drop tile) */
+  --shadow-accent-sm: 0 0 8px rgba(214, 132, 80, 0.25);
+  --shadow-accent-md: 0 4px 16px rgba(214, 132, 80, 0.3);
+  --shadow-accent-lg: 0 4px 20px rgba(214, 132, 80, 0.3);
+  --shadow-accent-glow: 0 0 8px rgba(214, 132, 80, 0.4);
+  --shadow-accent-pill: 0 1px 4px rgba(214, 132, 80, 0.3);
+  --shadow-accent-raised: 0 2px 8px rgba(214, 132, 80, 0.2);
+
   /* Semantic — Phase 10b: chroma bumped on all three so success/danger/
      warning read as signals, not as cream-tinted body text. AA on bg-card
      (#1b1a17) verified mentally for each. */
@@ -137,6 +165,15 @@
   --color-accent-subtle: #a3683a10;
   --color-accent-glow: #a3683a20;
 
+  /* Light-theme amber shadows. Mirror the dark-theme scale but use the
+     light-theme accent rgba so glows stay on-hue in cream surfaces. */
+  --shadow-accent-sm: 0 0 8px rgba(163, 104, 58, 0.25);
+  --shadow-accent-md: 0 4px 16px rgba(163, 104, 58, 0.3);
+  --shadow-accent-lg: 0 4px 20px rgba(163, 104, 58, 0.3);
+  --shadow-accent-glow: 0 0 8px rgba(163, 104, 58, 0.4);
+  --shadow-accent-pill: 0 1px 4px rgba(163, 104, 58, 0.3);
+  --shadow-accent-raised: 0 2px 8px rgba(163, 104, 58, 0.2);
+
   /* Phase 10a a11y G3: darkened success from #3d8a5a to #2f7549 so success
      text on light surfaces clears AA. Phase 10a a11y FR3 / D4: darkened
      danger from #c44d4d to #a83838 for the same reason. Phase 10b: chroma
diff --git a/src/design-system/colors_and_type.css b/src/design-system/colors_and_type.css
index 96dd4b0..a69e960 100644
--- a/src/design-system/colors_and_type.css
+++ b/src/design-system/colors_and_type.css
@@ -11,7 +11,14 @@
    pages buildless.
    ============================================================ */
 
-/* --- Brand Webfonts (local woff2, shipped with Magnotia) --- */
+/* --- Brand Webfonts (local woff2, shipped with Magnotia) ---
+   Mirrored from src/app.css. Duplication is intentional: this file is
+   loaded directly by buildless preview HTML under design-system/preview/,
+   which does not go through Tailwind/Vite, so the fonts must be declared
+   here as well. The src URLs are relative (fonts/...) because the preview
+   pages live next to this file; the runtime copy in app.css uses
+   root-absolute paths (/fonts/...) served by Vite. Keep font-family,
+   font-weight, font-style, and font-display in sync between both copies. */
 @font-face {
   font-family: 'Lexend';
   src: url('fonts/lexend-variable.woff2') format('woff2-variations'),
@@ -117,6 +124,21 @@
   --shadow-lg: 0 12px 28px rgba(0,0,0,0.35);
   --shadow-accent: 0 4px 20px rgba(214,132,80,0.3);
 
+  /* — Amber shadow scale, theme-aware so glows stay on-hue in light mode.
+     Mirrors the runtime tokens in app.css @theme. Shapes:
+       sm     = subtle button/toggle glow
+       md     = lifted card / button drop
+       lg     = hero glow under the record button (== --shadow-accent)
+       glow   = stronger 0.4-alpha emission (progress bars)
+       pill   = small selected-pill lift
+       raised = soft raised tile — */
+  --shadow-accent-sm: 0 0 8px rgba(214, 132, 80, 0.25);
+  --shadow-accent-md: 0 4px 16px rgba(214, 132, 80, 0.3);
+  --shadow-accent-lg: 0 4px 20px rgba(214, 132, 80, 0.3);
+  --shadow-accent-glow: 0 0 8px rgba(214, 132, 80, 0.4);
+  --shadow-accent-pill: 0 1px 4px rgba(214, 132, 80, 0.3);
+  --shadow-accent-raised: 0 2px 8px rgba(214, 132, 80, 0.2);
+
   /* — Focus ring shadow on inputs. Theme-aware so the ring stays visible
      on the lighter cream surfaces in light theme, where a 0.1 alpha amber
      glow disappears against white. — */
@@ -182,6 +204,15 @@
   --accent-subtle: #a3683a10;
   --accent-glow: #a3683a20;
 
+  /* Light-theme amber shadows — mirror the dark-theme scale but use the
+     light accent rgba so glows stay on-hue against cream surfaces. */
+  --shadow-accent-sm: 0 0 8px rgba(163, 104, 58, 0.25);
+  --shadow-accent-md: 0 4px 16px rgba(163, 104, 58, 0.3);
+  --shadow-accent-lg: 0 4px 20px rgba(163, 104, 58, 0.3);
+  --shadow-accent-glow: 0 0 8px rgba(163, 104, 58, 0.4);
+  --shadow-accent-pill: 0 1px 4px rgba(163, 104, 58, 0.3);
+  --shadow-accent-raised: 0 2px 8px rgba(163, 104, 58, 0.2);
+
   /* Phase 10a a11y G3 / FR3 / D4: success and danger darkened so coloured
      text on light surfaces clears AA. Phase 10b: chroma bumped, lightness
      preserved or slightly darkened to keep AA on cream. */
diff --git a/src/lib/components/ModelDownloader.svelte b/src/lib/components/ModelDownloader.svelte
index 33dac55..29de1d9 100644
--- a/src/lib/components/ModelDownloader.svelte
+++ b/src/lib/components/ModelDownloader.svelte
@@ -82,7 +82,7 @@
         <div class="mb-4">
           <div class="h-[6px] bg-bg-elevated rounded-full overflow-hidden mb-2">
             <div
-              class="h-full bg-accent rounded-full transition-all duration-300 shadow-[0_0_8px_rgba(214,132,80,0.4)]"
+              class="h-full bg-accent rounded-full transition-all duration-300 shadow-[var(--shadow-accent-glow)]"
               style="width: {progress}%"
             ></div>
           </div>
@@ -93,7 +93,7 @@
       {:else}
         <button
           class="px-6 py-2.5 rounded-xl text-[14px] font-medium text-white bg-accent hover:bg-accent-hover
-                 shadow-[0_4px_16px_rgba(214,132,80,0.3)] transition-all duration-150"
+                 shadow-[var(--shadow-accent-md)] transition-all duration-150"
           onclick={startDownload}
         >
           Download Model
diff --git a/src/lib/components/SegmentedButton.svelte b/src/lib/components/SegmentedButton.svelte
index 133e63b..007a154 100644
--- a/src/lib/components/SegmentedButton.svelte
+++ b/src/lib/components/SegmentedButton.svelte
@@ -8,7 +8,7 @@
       class="rounded-lg font-medium
         {size === 'small' ? 'px-2.5 py-1 text-[12px]' : 'px-3.5 py-[6px] text-[12px]'}
         {value === option
-          ? 'bg-accent text-bg shadow-[0_1px_4px_rgba(214,132,80,0.3)]'
+          ? 'bg-accent text-bg shadow-[var(--shadow-accent-pill)]'
           : 'text-text-secondary hover:text-text hover:bg-hover'}"
       style="transition-duration: var(--duration-ui)"
       onclick={() => value = option}
diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
index ec23c09..9335c91 100644
--- a/src/lib/components/Toggle.svelte
+++ b/src/lib/components/Toggle.svelte
@@ -59,7 +59,7 @@
 <div class="flex items-start gap-3 py-2.5">
   <button
     class="relative mt-0.5 w-[38px] min-w-[38px] h-[22px] rounded-full flex-shrink-0
-      {checked ? 'bg-accent shadow-[0_0_8px_rgba(214,132,80,0.25)]' : 'bg-bg-elevated'}
+      {checked ? 'bg-accent shadow-[var(--shadow-accent-sm)]' : 'bg-bg-elevated'}
       {disabled && !busy ? 'opacity-50 cursor-not-allowed' : ''}
       {busy ? 'cursor-wait' : ''}"
     onclick={handleClick}
diff --git a/src/lib/pages/DictationPage.svelte b/src/lib/pages/DictationPage.svelte
index 4daa835..6b0b146 100644
--- a/src/lib/pages/DictationPage.svelte
+++ b/src/lib/pages/DictationPage.svelte
@@ -834,7 +834,7 @@
               ? 'bg-warning opacity-60 cursor-wait'
               : !tauriRuntimeAvailable
                 ? 'bg-bg-elevated text-text-tertiary cursor-not-allowed'
-                : 'bg-accent hover:bg-accent-hover shadow-[0_4px_20px_rgba(214,132,80,0.3)]'}"
+                : 'bg-accent hover:bg-accent-hover shadow-[var(--shadow-accent-lg)]'}"
         onclick={toggleRecording}
         disabled={modelLoading || !tauriRuntimeAvailable}
         aria-label={page.recording ? "Stop recording" : "Start recording"}
diff --git a/src/lib/pages/FilesPage.svelte b/src/lib/pages/FilesPage.svelte
index 6df4fe7..80914de 100644
--- a/src/lib/pages/FilesPage.svelte
+++ b/src/lib/pages/FilesPage.svelte
@@ -189,7 +189,7 @@
   <div class="flex items-center gap-2 px-7 pb-3">
     <button
       class="btn-lg rounded-lg font-medium text-white bg-accent hover:bg-accent-hover
-             shadow-[0_2px_8px_rgba(214,132,80,0.2)]"
+             shadow-[var(--shadow-accent-raised)]"
       onclick={handleBrowse}
       disabled={transcribing}
     >
@@ -215,7 +215,7 @@
     <div class="px-7 pb-3 animate-fade-in">
       <div class="h-[3px] bg-bg-elevated rounded-full overflow-hidden">
         <div
-          class="h-full bg-accent rounded-full shadow-[0_0_8px_rgba(214,132,80,0.4)]"
+          class="h-full bg-accent rounded-full shadow-[var(--shadow-accent-glow)]"
           style="width: {progress}%; transition-duration: var(--duration-ui)"
         ></div>
       </div>
diff --git a/src/lib/pages/SettingsPage.svelte b/src/lib/pages/SettingsPage.svelte
index a94cf32..76a5aec 100644
--- a/src/lib/pages/SettingsPage.svelte
+++ b/src/lib/pages/SettingsPage.svelte
@@ -2386,7 +2386,7 @@
                   <button
                     class="rounded-lg font-medium px-3.5 py-[6px] text-[12px]
                       {$currentLocale === option.code
-                        ? 'bg-accent text-bg shadow-[0_1px_4px_rgba(214,132,80,0.3)]'
+                        ? 'bg-accent text-bg shadow-[var(--shadow-accent-pill)]'
                         : 'text-text-secondary hover:text-text hover:bg-hover'}"
                     style="transition-duration: var(--duration-ui)"
                     onclick={() => setLocale(option.code)}