fix(ui): promote modal overlay to token, lift modal above grain, dedupe FilesPage drop-zone

- Add --color-overlay-dim token to app.css @theme (rgba(15,14,12,0.7) dark, rgba(26,24,22,0.55) light); mirror as --overlay-dim in design-system/colors_and_type.css.
- MorningTriageModal: replace inlined rgba scrim with var(--color-overlay-dim), drop backdrop-blur-sm (brand opposes glassmorphism by default), bump container to z-[60] so it sits above the .grain z-50 overlay.
- FilesPage: collapse two near-identical drop-zone blocks into one bordered region with conditional inner content; preserves isDragOver hover behaviour and aria region.

src/app.css

@@ -69,6 +69,10 @@
   --color-danger: #e87171;
   --color-warning: #e8c86e;
 
+  /* Overlays — used by modal scrims. Derived from --color-bg #0f0e0c at
+     0.7 alpha so the dim sits on the brand neutral, not pure black. */
+  --color-overlay-dim: rgba(15, 14, 12, 0.7);
+
   /* Layout */
   --color-sidebar: #13120f;
   --color-nav-active: #201e1a;
@@ -136,6 +140,10 @@
   --color-sidebar: #f5f2ed;
   --color-nav-active: #eae6e0;
   --color-hover: #ede9e3;
+
+  /* Warm dim for modal scrims in light theme. Lower alpha so the cream
+     surface still reads through softly. */
+  --color-overlay-dim: rgba(26, 24, 22, 0.55);
 }
 
 :root[data-theme="light"] ::-webkit-scrollbar-thumb {

src/design-system/colors_and_type.css

@@ -89,6 +89,9 @@
   --danger: #e87171;
   --warning: #e8c86e;
 
+  /* — Overlays — modal scrim. Derived from --bg #0f0e0c at 0.7 alpha. — */
+  --overlay-dim: rgba(15, 14, 12, 0.7);
+
   /* — Radii — */
   --radius-sm: 6px;
   --radius-md: 8px;
@@ -177,6 +180,9 @@
   --success: #2f7549;
   --danger: #a83838;
   --warning: #b89a3e;
+
+  /* Warm dim for modal scrim in light theme. */
+  --overlay-dim: rgba(26, 24, 22, 0.55);
 }
 
 /* ============================================================

src/lib/components/MorningTriageModal.svelte

@@ -258,14 +258,14 @@
 
 {#if open}
   <!--
-    Pure-black-white taste fix: replaced `bg-black/50` overlay with the brand
+    Overlay sits on `--color-overlay-dim` (defined in app.css @theme), warm
-    deep-neutral `#1a1816` at 50% alpha. TODO: promote this colour to a
+    deep-neutral derived from --color-bg. No backdrop-blur: the brand opposes
-    `--color-overlay` token in app.css so the value isn't inlined per-modal.
+    glassmorphism as a default. z-[60] sits above the .grain overlay (z-50).
   -->
   <div
     bind:this={dialogEl}
-    class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm animate-fade-in"
+    class="fixed inset-0 z-[60] flex items-center justify-center animate-fade-in"
-    style="background: rgba(26, 24, 22, 0.5)"
+    style="background: var(--color-overlay-dim)"
     role="dialog"
     aria-modal="true"
     aria-labelledby="triage-title"

src/lib/pages/FilesPage.svelte

@@ -155,7 +155,6 @@
   <!-- Drop zone -->
   <div class="px-7 pb-3">
     <Card>
-      {#if !fileTranscript && !transcribing}
       <div
         class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3
           {isDragOver
@@ -164,34 +163,23 @@
         style="transition-duration: var(--duration-ui)"
         role="region"
       >
+        {#if !fileTranscript && !transcribing}
           <EmptyState
             icon={Upload}
             message="Drop an audio file or click to browse"
           />
-          <p class="text-[11px] text-text-tertiary text-center mt-1.5">
-            MP3, WAV, M4A, MP4, FLAC, OGG
-          </p>
-        </div>
         {:else}
-        <div
-          class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3
-            {isDragOver
-              ? 'border-accent bg-accent-subtle scale-[1.01]'
-              : 'border-border hover:border-text-tertiary'}"
-          style="transition-duration: var(--duration-ui)"
-          role="region"
-        >
           <div class="w-10 h-10 rounded-full bg-bg-elevated flex items-center justify-center mb-3">
             <Upload size={20} class="text-text-tertiary" aria-hidden="true" />
           </div>
           <p class="text-[13px] text-text-secondary text-center">
             Drop audio or video files here
           </p>
+        {/if}
         <p class="text-[11px] text-text-tertiary text-center mt-1.5">
           MP3, WAV, M4A, MP4, FLAC, OGG
         </p>
       </div>
-      {/if}
     </Card>
   </div>