fix: subtle-light theme parity for lightbox panel and media surfaces

In subtle-light, the lightbox dragged its whole surface (including the metadata
panel) dark via media-dark-surface, while conventional-dark themed the panel
normally. Scope the dark surface to the media canvas and re-light the panel by
remapping --color-* variables on a .lightbox-panel wrapper (Tailwind v4 resolves
every colour utility through these vars, so this re-themes the subtree —
including accents — with no !important). Mark gallery/duplicate media tiles as
media-dark-surface so their on-image overlays stay light-on-dark, and theme the
window restore icon via var(--color-gray-950) instead of a hardcoded hex.

src/components/DuplicateFinder.tsx

@@ -71,7 +71,7 @@ function DuplicateGroupCard({ group }: { group: DuplicateGroup }) {
           return (
             <button
               key={image.id}
-              className={`group relative overflow-hidden rounded-xl border transition-all ${
+              className={`media-dark-surface group relative overflow-hidden rounded-xl border transition-all ${
                 isSelected
                   ? "border-red-400/50 ring-1 ring-red-400/30"
                   : "border-white/8 hover:border-white/20"

src/components/Gallery.tsx

@@ -124,7 +124,7 @@ export function ImageTile({
 
   return (
     <button
-      className="group relative overflow-hidden rounded-xl bg-white/[0.04] text-left focus:outline-none"
+      className="media-dark-surface group relative overflow-hidden rounded-xl bg-white/[0.04] text-left focus:outline-none"
       style={{ width: "100%", aspectRatio: "1 / 1" }}
       onClick={onClick}
       onContextMenu={onContextMenu}

src/components/Lightbox.tsx

@@ -496,7 +496,7 @@ export function Lightbox() {
                 </AnimatePresence>
               </div>
 
-              <div className="flex w-72 shrink-0 flex-col border-l border-white/5 bg-gray-900/95">
+              <div className="lightbox-panel flex w-72 shrink-0 flex-col border-l border-white/5 bg-gray-900/95">
                 <div className="flex shrink-0 items-center justify-between px-5 pt-5 pb-4">
                   <div className="min-w-0">
                     <p className="truncate text-sm font-medium text-white">{selectedImage.filename}</p>

src/components/TitleBar.tsx

@@ -24,7 +24,7 @@ function RestoreIcon() {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
       <rect x="2.5" y="0.5" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1" />
-      <rect x="0.5" y="2.5" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1" fill="#030712" />
+      <rect x="0.5" y="2.5" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1" fill="var(--color-gray-950)" />
     </svg>
   );
 }

src/index.css

@@ -61,6 +61,36 @@ html[data-theme="subtle-light"] .media-dark-surface {
   --color-gray-100: #f3f4f6;
 }
 
+/* The lightbox keeps its dark canvas + backdrop (via .media-dark-surface on the
+   root), but the metadata panel is chrome and should follow the active theme.
+   In subtle-light it lives inside the dark-surface root, so re-light it here by
+   remapping the palette on the panel itself. Tailwind v4 resolves every colour
+   utility through a --color-* variable, so remapping the variables re-themes the
+   whole subtree — including accents — without a single !important. */
+html[data-theme="subtle-light"] .lightbox-panel {
+  --color-white: #18202c;
+  --color-gray-950: #e9e7e2;
+  --color-gray-900: #dedbd4;
+  --color-gray-800: #cfcbc3;
+  --color-gray-700: #aea99f;
+  --color-gray-600: #817b72;
+  --color-gray-500: #655f57;
+  --color-gray-400: #514b44;
+  --color-gray-300: #403b35;
+  --color-gray-200: #302c28;
+  --color-gray-100: #24211e;
+  /* Pastel accents are tuned for a dark panel; darken them for the light one. */
+  --color-amber-300: #b45309;
+  --color-amber-400: #b45309;
+  --color-sky-300: #0369a1;
+  --color-emerald-300: #047857;
+  --color-rose-300: #be123c;
+  --color-rose-400: #be123c;
+  --color-red-300: #b91c1c;
+  --color-violet-300: #6d28d9;
+  --color-violet-400: #6d28d9;
+}
+
 html[data-theme="subtle-light"] .settings-modal {
   background: #f4f2ea !important;
   border-color: #d6d1c7 !important;