From 5e3a9f9f42fc228c04a43fff180eff66f9964d54 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Thu, 7 May 2026 10:04:30 +0100
Subject: [PATCH] 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                                  |  8 ++++
 src/design-system/colors_and_type.css        |  6 +++
 src/lib/components/MorningTriageModal.svelte | 10 ++---
 src/lib/pages/FilesPage.svelte               | 42 +++++++-------------
 4 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/app.css b/src/app.css
index 45e9649..8a9ffdd 100644
--- a/src/app.css
+++ b/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 {
diff --git a/src/design-system/colors_and_type.css b/src/design-system/colors_and_type.css
index 5f50b8d..a801fe6 100644
--- a/src/design-system/colors_and_type.css
+++ b/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);
 }
 
 /* ============================================================
diff --git a/src/lib/components/MorningTriageModal.svelte b/src/lib/components/MorningTriageModal.svelte
index 2429284..18c9e0b 100644
--- a/src/lib/components/MorningTriageModal.svelte
+++ b/src/lib/components/MorningTriageModal.svelte
@@ -258,14 +258,14 @@
 
 {#if open}
   <!--
-    Pure-black-white taste fix: replaced `bg-black/50` overlay with the brand
-    deep-neutral `#1a1816` at 50% alpha. TODO: promote this colour to a
-    `--color-overlay` token in app.css so the value isn't inlined per-modal.
+    Overlay sits on `--color-overlay-dim` (defined in app.css @theme), warm
+    deep-neutral derived from --color-bg. No backdrop-blur: the brand opposes
+    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"
-    style="background: rgba(26, 24, 22, 0.5)"
+    class="fixed inset-0 z-[60] flex items-center justify-center animate-fade-in"
+    style="background: var(--color-overlay-dim)"
     role="dialog"
     aria-modal="true"
     aria-labelledby="triage-title"
diff --git a/src/lib/pages/FilesPage.svelte b/src/lib/pages/FilesPage.svelte
index 0ef8906..b71ee77 100644
--- a/src/lib/pages/FilesPage.svelte
+++ b/src/lib/pages/FilesPage.svelte
@@ -155,43 +155,31 @@
   <!-- 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
-              ? 'border-accent bg-accent-subtle scale-[1.01]'
-              : 'border-border hover:border-text-tertiary'}"
-          style="transition-duration: var(--duration-ui)"
-          role="region"
-        >
+      <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"
+      >
+        {#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"
-        >
+        {:else}
           <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>
-          <p class="text-[11px] text-text-tertiary text-center mt-1.5">
-            MP3, WAV, M4A, MP4, FLAC, OGG
-          </p>
-        </div>
-      {/if}
+        {/if}
+        <p class="text-[11px] text-text-tertiary text-center mt-1.5">
+          MP3, WAV, M4A, MP4, FLAC, OGG
+        </p>
+      </div>
     </Card>
   </div>