From 6410e1691278b8733c7a14757e33d0a2889a6c6a Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Fri, 29 May 2026 22:10:21 -0400
Subject: [PATCH] fix: Darker modal backdrops for better contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SettingsModal + ArtworkGenerationModal:
- Backdrop: bg-black/60 → bg-black/80 (darker, less bleed-through)
- Backdrop blur: backdrop-blur-sm → backdrop-blur-md (stronger blur effect)
- Modal surface: added lyria-surface color (#1a1a24) to tailwind config
  for solid, opaque modal backgrounds

Result: Background elements are much less visible behind modals,
improving readability and focus.
---
 frontend/src/components/ArtworkGenerationModal.tsx | 2 +-
 frontend/src/components/SettingsModal.tsx          | 2 +-
 frontend/tailwind.config.js                        | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ArtworkGenerationModal.tsx b/frontend/src/components/ArtworkGenerationModal.tsx
index 457e3cd..2a8e2c7 100644
--- a/frontend/src/components/ArtworkGenerationModal.tsx
+++ b/frontend/src/components/ArtworkGenerationModal.tsx
@@ -36,7 +36,7 @@ export default function ArtworkGenerationModal({ isOpen, onClose, onGenerate, tr
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-md"
         onClick={handleClose}
       />
 
diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index 2fa7240..8366443 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -99,7 +99,7 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-md"
         onClick={onClose}
       />
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a106eea..7dc31f6 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -9,6 +9,7 @@ export default {
       colors: {
         'lyria-dark': '#0a0a0f',
         'lyria-panel': '#12121a',
+        'lyria-surface': '#1a1a24',
         'lyria-accent': '#ff6b35',
         'lyria-text': '#e0e0e0',
         'lyria-muted': '#6b6b7b',