fix(css): repoint 12 var(--color-surface-alt, hex) sites to defined tokens (t-paliad-310, m/paliad#138)

The --color-surface-alt token was never defined in :root or :root[data-theme="dark"],
so the var() fallback hex literal always won — leaving 12 surface sites with
zero dark-mode treatment. Same pattern as t-paliad-087 / t-paliad-150 / t-paliad-291.

Issue #138 surfaced four panels visibly broken in dark mode:
1. submission-draft no-project banner ("Kein Projekt zugeordnet…") — white-on-white
2. submission-draft preview header ("Vorschau / Read-only Vorschau…") — white-on-white
3. smart-timeline rule-chip (e.g. de.null.bpatg.berufung in Vorhersage rows) — grey-on-grey
4. submission-draft addparty manual form (Manuell / Aus DB / Name / …) — white-on-white

Eight more latent sites with the same root cause are fixed in the same pass:
.submissions-new-chip:hover, .submissions-new-project-item:hover,
.submission-draft-import-row, .submission-draft-addparty-search-projref,
.collab-invite-hint, .smart-timeline-status-icon,
.smart-timeline-kind-chip--projected, .smart-timeline-add-choice:hover.

Each site repointed to the semantically correct existing token
(--color-surface-2 for #fafafa, --color-surface-muted for #f4f4f4,
--color-bg-subtle for #f7f7f0, --color-bg-lime-tint for the lime-tinted
collab-invite-hint). All four target tokens are defined in both :root
and :root[data-theme="dark"]. No new tokens introduced.

Light-mode hex values are functionally identical (#fafafa==#fafafa,
#f4f4f4≈#f3f4f6, #f7f7f0≈#f7f3f0).

Verified: bun run build clean; Playwright screenshots of the four panels
in both light + dark modes show correct rendering.

frontend/src/styles/global.css

@@ -6230,7 +6230,7 @@ dialog.modal::backdrop {
     align-items: baseline;
     padding: 0.75rem 1rem;
     border-bottom: 1px solid var(--color-border);
-    background: var(--color-surface-alt, #fafafa);
+    background: var(--color-surface-2);
     flex-wrap: wrap;
     gap: 0.5rem;
 }
@@ -6388,7 +6388,7 @@ dialog.modal::backdrop {
 }
 
 .submissions-new-chip:hover {
-    background: var(--color-surface-alt, #f4f4f4);
+    background: var(--color-surface-muted);
 }
 
 .submissions-new-chip--active {
@@ -6426,7 +6426,7 @@ dialog.modal::backdrop {
 }
 
 .submissions-new-project-item:hover {
-    background: var(--color-surface-alt, #f4f4f4);
+    background: var(--color-surface-muted);
 }
 
 .submissions-new-project-title {
@@ -6441,7 +6441,7 @@ dialog.modal::backdrop {
     flex-wrap: wrap;
     padding: 0.75rem 1rem;
     margin: 0 0 1.25rem;
-    background: var(--color-surface-alt, #f7f7f0);
+    background: var(--color-bg-subtle);
     border: 1px solid var(--color-border);
     border-left: 4px solid var(--color-accent, #c6f41c);
     border-radius: 6px;
@@ -6464,7 +6464,7 @@ dialog.modal::backdrop {
     flex-wrap: wrap;
     padding: 0.5rem 0.6rem;
     margin-bottom: 0.75rem;
-    background: var(--color-surface-alt, #f7f7f0);
+    background: var(--color-bg-subtle);
     border: 1px solid var(--color-border);
     border-radius: 6px;
 }
@@ -6592,7 +6592,7 @@ dialog.modal::backdrop {
     border: 1px solid var(--color-border);
     border-radius: 6px;
     padding: 0.6rem;
-    background: var(--color-surface-alt, #f7f7f0);
+    background: var(--color-bg-subtle);
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
@@ -6715,7 +6715,7 @@ dialog.modal::backdrop {
     margin-left: 0.3rem;
     padding: 0 0.4em;
     border-radius: 3px;
-    background: var(--color-surface-alt, #f7f7f0);
+    background: var(--color-bg-subtle);
     color: var(--color-text-muted);
 }
 
@@ -7922,7 +7922,7 @@ dialog.modal::backdrop {
 .collab-invite-hint {
     margin-top: 0.5rem;
     padding: 0.5rem 0.75rem;
-    background: var(--color-surface-alt, var(--color-bg-lime-tint));
+    background: var(--color-bg-lime-tint);
     border: 1px dashed var(--color-border);
     border-radius: var(--radius);
     font-size: 0.85rem;
@@ -16582,7 +16582,7 @@ dialog.quick-add-sheet::backdrop {
     width: 1.4rem;
     height: 1.4rem;
     border-radius: 50%;
-    background: var(--color-surface-alt, #f4f4f4);
+    background: var(--color-surface-muted);
     color: var(--color-text-muted);
     font-size: 0.85rem;
     font-weight: 600;
@@ -16636,7 +16636,7 @@ dialog.quick-add-sheet::backdrop {
     font-size: 0.72rem;
     padding: 0.1rem 0.45rem;
     border-radius: 999px;
-    background: var(--color-surface-alt, #f4f4f4);
+    background: var(--color-surface-muted);
     color: var(--color-text-muted);
     font-weight: 500;
     letter-spacing: 0.02em;
@@ -16658,7 +16658,7 @@ dialog.quick-add-sheet::backdrop {
 }
 
 .smart-timeline-kind-chip--projected {
-    background: var(--color-surface-alt, #f4f4f4);
+    background: var(--color-surface-muted);
     color: var(--color-text-muted);
     font-style: italic;
 }
@@ -16725,7 +16725,7 @@ dialog.quick-add-sheet::backdrop {
 
 .smart-timeline-add-choice:hover:not(:disabled) {
     border-color: var(--color-accent-fg);
-    background: var(--color-surface-alt, #fafafa);
+    background: var(--color-surface-2);
 }
 
 .smart-timeline-add-choice--primary {