Merge: drop dead settings-modal theme CSS

Removes subtle-light .settings-modal overrides that targeted classes no component
on main applies (dead rules), keeping the Settings modal flat and themed via the
global accent variables.

src/index.css

@@ -43,6 +43,28 @@ html[data-theme="subtle-light"] {
   --color-gray-300: #403b35;
   --color-gray-200: #302c28;
   --color-gray-100: #24211e;
+  /* Pastel accent shades are tuned for dark UIs and wash out on the light
+     chrome (e.g. "Update check failed" in amber). Darken the ones used as
+     coloured text/icons so they stay readable. Media surfaces reset these to
+     the bright originals below, so on-photo overlays keep their signal colours.
+     Remapping the variable (not the utility) also covers opacity variants such
+     as text-amber-300/90. */
+  --color-amber-200: #b45309;
+  --color-amber-300: #b45309;
+  --color-amber-400: #b45309;
+  --color-red-200: #b91c1c;
+  --color-red-300: #b91c1c;
+  --color-red-400: #b91c1c;
+  --color-rose-300: #be123c;
+  --color-rose-400: #be123c;
+  --color-emerald-200: #047857;
+  --color-emerald-300: #047857;
+  --color-emerald-400: #047857;
+  --color-sky-300: #0369a1;
+  --color-blue-300: #1d4ed8;
+  --color-blue-400: #1d4ed8;
+  --color-violet-300: #6d28d9;
+  --color-violet-400: #6d28d9;
   background: #e9e7e2;
 }
 
@@ -59,6 +81,25 @@ html[data-theme="subtle-light"] .media-dark-surface {
   --color-gray-300: #d1d5db;
   --color-gray-200: #e5e7eb;
   --color-gray-100: #f3f4f6;
+  /* Restore the bright accent originals the light theme darkened, so coloured
+     overlays on photos/video (ratings, failed badges, the lightbox region tool)
+     keep their signal colours instead of going dark-on-dark. */
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
+  --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-rose-300: oklch(81% 0.117 11.638);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-violet-300: oklch(81.1% 0.111 293.571);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
 }
 
 /* The lightbox keeps its dark canvas + backdrop (via .media-dark-surface on the
@@ -91,107 +132,6 @@ html[data-theme="subtle-light"] .lightbox-panel {
   --color-violet-400: #6d28d9;
 }
 
-html[data-theme="subtle-light"] .settings-modal {
-  background: #f4f2ea !important;
-  border-color: #d6d1c7 !important;
-  color: #1f2937 !important;
-  box-shadow: 0 24px 80px rgb(0 0 0 / 0.24) !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal aside {
-  background: #ece9e1 !important;
-  border-color: #d6d1c7 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal aside > div:first-child {
-  border-color: #d6d1c7 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .settings-nav-active {
-  background: #d8d4ca !important;
-  color: #111827 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .settings-nav-inactive {
-  background: transparent !important;
-  color: #4b5563 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .settings-nav-inactive:hover {
-  background: #e2ded5 !important;
-  color: #111827 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .settings-model-card,
-html[data-theme="subtle-light"] .settings-modal .settings-light-panel {
-  background: #fbfaf6 !important;
-  border-color: #d6d1c7 !important;
-  color: #1f2937 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal button:not([role="switch"]) {
-  background: #fbfaf6 !important;
-  border-color: #cfc8ba !important;
-  color: #374151 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal button:not([role="switch"]):hover {
-  background: #eeeae0 !important;
-  color: #111827 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal input {
-  background: #ffffff !important;
-  border-color: #cfc8ba !important;
-  color: #111827 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .text-white,
-html[data-theme="subtle-light"] .settings-modal .text-gray-200,
-html[data-theme="subtle-light"] .settings-modal .text-gray-300,
-html[data-theme="subtle-light"] .settings-modal .text-gray-400 {
-  color: #111827 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .text-gray-500,
-html[data-theme="subtle-light"] .settings-modal .text-gray-600 {
-  color: #5f5a52 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .text-emerald-200,
-html[data-theme="subtle-light"] .settings-modal .text-emerald-300 {
-  color: #047857 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .text-sky-300 {
-  color: #0369a1 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .text-amber-200,
-html[data-theme="subtle-light"] .settings-modal .text-amber-300 {
-  color: #b45309 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .text-red-200 {
-  color: #b91c1c !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .bg-white\/10,
-html[data-theme="subtle-light"] .settings-modal .bg-white\/5,
-html[data-theme="subtle-light"] .settings-modal .bg-white\/\[0\.025\],
-html[data-theme="subtle-light"] .settings-modal .bg-white\/\[0\.04\],
-html[data-theme="subtle-light"] .settings-modal .bg-white\/\[0\.045\],
-html[data-theme="subtle-light"] .settings-modal .bg-white\/\[0\.055\] {
-  background: #fbfaf6 !important;
-}
-
-html[data-theme="subtle-light"] .settings-modal .border-white\/10,
-html[data-theme="subtle-light"] .settings-modal .border-white\/\[0\.05\],
-html[data-theme="subtle-light"] .settings-modal .border-white\/\[0\.06\],
-html[data-theme="subtle-light"] .settings-modal .border-white\/\[0\.07\] {
-  border-color: #d6d1c7 !important;
-}
-
 html[data-theme="subtle-light"] .explore-view {
   background:
     radial-gradient(ellipse at top, rgb(59 130 246 / 0.08), transparent 48%),