feat: Luminous Depth UI redesign

Complete visual overhaul of the Aryx application with the Luminous Depth
design language — blue-tinted dark surfaces, brand gradient accents,
glass-morphism effects, and refined typography.

Design Foundation:
- New color system with CSS custom properties for all surfaces, borders,
  text, accents, and status colors
- Typography: Outfit (display), DM Sans (body), JetBrains Mono (code)
- Animations: accent-flow, thinking-wave, ambient-glow
- Utility classes: glass-surface, glow-border, brand-gradient-bg/text
- Light theme with cool-tinted whites and blue-tinted shadows

Components Updated:
- UI primitives (TextInput, SelectInput, ToggleSwitch, FormField, etc.)
- AppShell with ambient glow background
- Sidebar with brand gradient selection and accent-flow running bars
- ChatPane with semantic phase tinting and gradient user avatars
- WelcomePane with nebula background and motion entrance animations
- All chat banners (Approval, UserInput, PlanReview, MCP Auth, etc.)
- ActivityPanel and RunTimeline with glass-surface cards
- Settings panels, modals, and editor shells
- TerminalPanel with harmonized ANSI palette
- PatternGraph nodes with glass-surface styling
- MarkdownComposer toolbar

Zero hardcoded zinc/indigo color classes remain in renderer components.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/components/chat/PlanReviewBanner.tsx

@@ -16,21 +16,21 @@ export function PlanReviewBanner({
   }, [planReview, onDismiss]);
 
   return (
-    <div className="rounded-xl border border-emerald-500/30 bg-emerald-500/5 px-4 py-3" role="alert">
+    <div className="rounded-xl border border-[var(--color-glass-border)] border-l-4 border-l-[var(--color-status-success)] bg-[var(--color-glass)] px-4 py-3" role="alert">
       {/* Header */}
       <div className="flex items-start gap-2.5">
-        <ClipboardList className="mt-0.5 size-4 shrink-0 text-emerald-400" />
+        <ClipboardList className="mt-0.5 size-4 shrink-0 text-[var(--color-status-success)]" />
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <span className="text-[13px] font-semibold text-emerald-200">Plan ready for review</span>
-              <span className="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-emerald-400">
+              <span className="text-[13px] font-semibold text-[var(--color-status-success)]">Plan ready for review</span>
+              <span className="rounded-full bg-[var(--color-status-success)]/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-[var(--color-status-success)]">
                 Plan mode
               </span>
             </div>
             <button
               aria-label="Dismiss plan"
-              className="rounded p-0.5 text-zinc-500 transition hover:bg-zinc-700/50 hover:text-zinc-300"
+              className="rounded p-0.5 text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)]/50 hover:text-[var(--color-text-primary)]"
               onClick={handleDismiss}
               type="button"
             >
@@ -39,30 +39,30 @@ export function PlanReviewBanner({
           </div>
 
           {planReview.agentName && (
-            <div className="mt-1 text-[11px] text-zinc-400">
-              Agent: <span className="text-zinc-300">{planReview.agentName}</span>
+            <div className="mt-1 text-[11px] text-[var(--color-text-secondary)]">
+              Agent: <span className="text-[var(--color-text-primary)]">{planReview.agentName}</span>
             </div>
           )}
 
           {/* Summary */}
           {planReview.summary && (
-            <p className="mt-2 text-[13px] leading-relaxed text-zinc-200">
+            <p className="mt-2 text-[13px] leading-relaxed text-[var(--color-text-primary)]">
               {planReview.summary}
             </p>
           )}
 
           {/* Plan content (rendered markdown) */}
           {planReview.planContent && (
-            <div className="mt-3 max-h-80 overflow-y-auto rounded-lg border border-zinc-700/50 bg-zinc-900/60 p-3">
+            <div className="mt-3 max-h-80 overflow-y-auto rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)] p-3">
               <MarkdownContent content={planReview.planContent} />
             </div>
           )}
 
           {/* Guidance */}
-          <p className="mt-3 text-[12px] leading-relaxed text-zinc-400">
+          <p className="mt-3 text-[12px] leading-relaxed text-[var(--color-text-secondary)]">
             Send a follow-up message to proceed — e.g.{' '}
-            <span className="text-zinc-300">&quot;implement the plan&quot;</span>,{' '}
-            <span className="text-zinc-300">&quot;adjust step 3&quot;</span>, or ask for a different approach.
+            <span className="text-[var(--color-text-primary)]">&quot;implement the plan&quot;</span>,{' '}
+            <span className="text-[var(--color-text-primary)]">&quot;adjust step 3&quot;</span>, or ask for a different approach.
           </p>
         </div>
       </div>