Add a Settings area with 4 color themes (Aurora, Light, Ocean, Sunset)

Requested directly: "lets add some themeing into it now, perhaps
under the configuration, have white/black, and some more colors."
There was no existing app-wide Settings/Configuration surface -
every prior setting lived in its own panel-specific modal (Fetch
Data Settings, subtitle provider settings) - so this adds the
app's first one: a palette-icon button in the sidebar footer opens
a new Settings modal with a 2x2 grid of theme swatches.

Four themes: Aurora (the existing dark teal/green look, unchanged,
stays the default), Light (a clean white/black theme - the literal
"white/black" ask), Ocean (a cool blue-toned dark variant), and
Sunset (a warm amber-toned dark variant) - the "some more colors"
part. Picking one applies instantly via a `data-theme` attribute on
<html> and persists through new get_theme/save_theme commands
(added to settings.rs/lib.rs alongside delivery 25's movie-naming-
scheme fix), applied on every future launch by a boot-time effect
in App.tsx so it takes effect even if Settings is never reopened.

theme.css's variable set was expanded to cover every place a color
was previously hardcoded outside the existing --dock/--surface/etc.
variables, so the whole app actually re-themes instead of leaving
dark boxes behind on the Light theme: button resting/hover/active
shades, the Load-files popup background, the primary button's hover
tint, the header's gradient stops, and five levels of white-tint
row/button hover highlights (RenamePanel.css/Header.css) all moved
to new variables (--btn-bg*, --popup-bg, --accent-hover, --header-
grad-a/b, --tint-02/03/05/06/16) with theme-specific values - the
light theme in particular needed dark tints instead of white ones
for hover states to stay visible on a white background.

Verified with a new Playwright script covering: default theme on a
fresh install, the Settings modal listing all 4 themes with the
right one marked selected, clicking a theme applying it immediately
(actual computed background color and CSS variable checked, not
just the data-theme attribute) and saving it, and a previously-saved
theme applying on boot before Settings is ever opened. Screenshots
taken of all 4 themes across the main view and the Naming Scheme
editor (whose buttons/popups were part of the hardcoded-color
cleanup) to confirm visually. All prior verification suites (47
checks across naming-scheme/match-fetch/hash-files/movie-scheme),
`cargo test --workspace` (162 tests), and `npm run build` still
pass clean.

src/components/RenamePanel.css

@@ -60,7 +60,7 @@
 }
 
 .list-row:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--tint-03);
 }
 
 .list-row.selected {
@@ -88,7 +88,7 @@
   letter-spacing: 0.03em;
   text-transform: uppercase;
   color: var(--muted-text);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--tint-05);
   border-radius: 999px;
   padding: 2px 8px;
 }
@@ -114,17 +114,17 @@
   justify-content: center;
   border-radius: 8px;
   border: 1px solid var(--surface-deep);
-  background: #172a31;
+  background: var(--btn-bg);
   color: var(--text);
   cursor: pointer;
 }
 
 .list-icon-button:hover {
-  background: #203941;
+  background: var(--btn-bg-hover);
 }
 
 .list-icon-button:active {
-  background: #28515a;
+  background: var(--btn-bg-active);
 }
 
 .list-icon-button:disabled {
@@ -147,7 +147,7 @@
   flex-direction: column;
   min-width: 150px;
   padding: 4px;
-  background: #16262d;
+  background: var(--popup-bg);
   border: 1px solid var(--surface-deep);
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
@@ -197,7 +197,7 @@
   justify-content: center;
   border-radius: 10px;
   border: 1px solid var(--surface-deep);
-  background: #172a31;
+  background: var(--btn-bg);
   color: var(--text);
   font-size: 13px;
   font-weight: 600;
@@ -206,7 +206,7 @@
 }
 
 .action-button:hover {
-  background: #203941;
+  background: var(--btn-bg-hover);
 }
 
 .action-button.primary {
@@ -217,7 +217,7 @@
 }
 
 .action-button.primary:hover {
-  background: #70e3bb;
+  background: var(--accent-hover);
 }
 
 .format-editor {
@@ -264,7 +264,7 @@
 
 .format-hint code,
 .format-editor label code {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--tint-06);
   border-radius: 4px;
   padding: 1px 5px;
   font-family: ui-monospace, "SF Mono", monospace;
@@ -307,7 +307,7 @@
 }
 
 .format-field-chip {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--tint-06);
   border: none;
   border-radius: 4px;
   padding: 2px 6px;
@@ -319,7 +319,7 @@
 }
 
 .format-field-chip:hover {
-  background: rgba(255, 255, 255, 0.16);
+  background: var(--tint-16);
 }
 
 .format-field-chip:active {
@@ -389,7 +389,7 @@
 }
 
 .modal-plan-row:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--tint-03);
 }
 
 .modal-plan-old {
@@ -431,7 +431,7 @@
 }
 
 .modal-plan-remove:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--tint-06);
   color: #ff8a8a;
 }
 
@@ -558,7 +558,7 @@
 .history-batch {
   padding: 8px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--tint-02);
 }
 
 .history-batch-header {
@@ -583,7 +583,7 @@
   font-size: 10.5px;
   font-weight: 700;
   color: var(--muted-text);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--tint-05);
   border-radius: 999px;
   padding: 2px 8px;
 }
@@ -612,7 +612,7 @@
 }
 
 .preset-row:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--tint-03);
 }
 
 .preset-slot-badge {
@@ -623,7 +623,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--tint-06);
   color: var(--aurora-green);
   font-size: 11.5px;
   font-weight: 700;
@@ -646,7 +646,7 @@
 }
 
 .preset-expression:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--tint-06);
 }
 
 .preset-expression:disabled {