fix(design-system): correct dark-mode neutral hover tokens (WI-1318)

The dark theme reused its border inks at border strength for the neutral
background tokens: --ds-background-neutral was #a1bdd933 (20% alpha) and
--ds-background-neutral-hovered was #a6c5e24d (30%), so every subtle
hover — dashboard rows, nav items, dropdown entries, code blocks —
rendered as a bright wash on dark surfaces. Use the same-ink 8%/16%
alpha ladder the light theme uses (#a1bdd914 / #a1bdd929), which
composites in family with the dark surface ladder.

Also drop the remaining hardcoded colors from the dashboard onboarding
panel (progress gradient, active-step tint and accent, icon fallback) in
favor of the --ds-gradient-*, --ds-surface-selected, and
--ds-interactive tokens.

Author: stefan-ernst

frontend/src/design-system/tokens/themes/dark.css

@@ -106,9 +106,12 @@ html[data-color-mode="dark"],
 
   /* =================================================================
      NEUTRAL BACKGROUNDS
+     Same ink as --ds-border at lower alphas, mirroring the light theme's
+     #091e42 0f/14 ladder. Values here must stay faint: at 20%+ alpha the
+     highlight reads as a bright wash on dark surfaces.
      ================================================================= */
-  --ds-background-neutral: #a1bdd933;
-  --ds-background-neutral-hovered: #a6c5e24d;
+  --ds-background-neutral: #a1bdd914;
+  --ds-background-neutral-hovered: #a1bdd929;
   --ds-background-input: #22272b;
   --ds-background-input-hovered: #282e33;
 

frontend/src/lib/pages/DashboardOnboarding.svelte

@@ -153,7 +153,7 @@
           <div class="w-full rounded-full h-2" style="background-color: var(--ds-surface);">
             <div
               class="h-2 rounded-full transition-all duration-300"
-              style="width: {progressPercent}%; background: linear-gradient(90deg, #1388E7 0%, #1AB1BC 100%);"
+              style="width: {progressPercent}%; background: linear-gradient(90deg, var(--ds-gradient-start) 0%, var(--ds-gradient-end) 100%);"
             ></div>
           </div>
         </div>
@@ -164,8 +164,9 @@
           <div
             class="rounded py-3 px-4 transition-all"
             class:border-l-6={activeStep === 1}
-            class:border-l-sky-600={activeStep === 1}
-            style={activeStep === 1 ? 'background-color: rgba(19, 136, 231, 0.05);' : ''}
+            style={activeStep === 1
+              ? 'background-color: var(--ds-surface-selected); border-color: var(--ds-interactive);'
+              : ''}
           >
             {#if workspaceCount > 0}
               <!-- Completed state: strikethrough -->
@@ -192,8 +193,9 @@
           <div
             class="rounded py-3 px-4 transition-all"
             class:border-l-6={activeStep === 2}
-            class:border-l-sky-600={activeStep === 2}
-            style={activeStep === 2 ? 'background-color: rgba(19, 136, 231, 0.05);' : ''}
+            style={activeStep === 2
+              ? 'background-color: var(--ds-surface-selected); border-color: var(--ds-interactive);'
+              : ''}
           >
             {#if itemCount > 0}
               <!-- Completed state: strikethrough -->
@@ -228,7 +230,7 @@
               {#snippet children()}
                 {@const WsIcon = workspaceIconMap[workspace.icon] || Grip}
                 <div class="flex items-center gap-2">
-                  <div class="w-6 h-6 rounded flex items-center justify-center flex-shrink-0" style="background-color: {workspace.color || '#3b82f6'};">
+                  <div class="w-6 h-6 rounded flex items-center justify-center flex-shrink-0" style="background-color: {workspace.color || 'var(--color-blue-500)'};">
                     <WsIcon size={14} color="white" />
                   </div>
                   <div>