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/AgentConfigFields.tsx

@@ -18,9 +18,9 @@ function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
   }
 
   const styles = {
-    premium: 'bg-amber-500/10 text-amber-400',
-    standard: 'bg-zinc-700/50 text-zinc-500',
-    fast: 'bg-emerald-500/10 text-emerald-400',
+    premium: 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]',
+    standard: 'bg-[var(--color-surface-3)]/50 text-[var(--color-text-muted)]',
+    fast: 'bg-[var(--color-status-success)]/10 text-[var(--color-status-success)]',
   };
 
   return (
@@ -75,10 +75,10 @@ export function ModelSelect({
 
   return (
     <label className="block space-y-1.5">
-      <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+      <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
       <div className="relative" ref={containerRef}>
         <button
-          className="flex w-full items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-left text-[13px] text-zinc-100 outline-none transition hover:border-zinc-600 focus:border-indigo-500/50 disabled:cursor-not-allowed disabled:opacity-60"
+          className="flex w-full items-center gap-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 text-left text-[13px] text-[var(--color-text-primary)] outline-none transition-all duration-200 hover:border-[var(--color-border)] focus:border-[var(--color-accent)]/50 disabled:cursor-not-allowed disabled:opacity-60"
           disabled={disabled}
           onClick={() => setOpen((current) => !current)}
           type="button"
@@ -86,25 +86,25 @@ export function ModelSelect({
           {provider && <ProviderIcon provider={provider} />}
           <span className="flex-1 truncate">{selected?.name ?? (value || 'Select model')}</span>
           <ChevronDown
-            className={`size-3.5 text-zinc-500 transition ${open ? 'rotate-180' : ''}`}
+            className={`size-3.5 text-[var(--color-text-muted)] transition ${open ? 'rotate-180' : ''}`}
           />
         </button>
 
         {open && !disabled && (
-          <div className="absolute z-30 mt-1 max-h-72 w-full overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
+          <div className="absolute z-30 mt-1 max-h-72 w-full overflow-y-auto rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] py-1 shadow-[0_16px_64px_rgba(0,0,0,0.5)]">
             {groupedModels.map((providerGroup) => {
               return (
                 <div key={providerGroup.id}>
                   <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
                     <ProviderIcon provider={providerGroup.id} />
-                    <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                    <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                       {providerGroup.label}
                     </span>
                   </div>
                   {providerGroup.models.map((model) => (
                     <button
-                      className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                        model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                      className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition-all duration-200 hover:bg-[var(--color-surface-3)] ${
+                        model.id === value ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]' : 'text-[var(--color-text-secondary)]'
                       }`}
                       key={model.id}
                       onClick={() => {
@@ -122,13 +122,13 @@ export function ModelSelect({
             })}
             {otherModels.length > 0 && (
               <div>
-                <div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                <div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                   Other
                 </div>
                 {otherModels.map((model) => (
                   <button
-                    className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                      model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                    className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition-all duration-200 hover:bg-[var(--color-surface-3)] ${
+                      model.id === value ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]' : 'text-[var(--color-text-secondary)]'
                     }`}
                     key={model.id}
                     onClick={() => {
@@ -173,15 +173,15 @@ export function ReasoningEffortSelect({
   if (supportedEfforts && supportedEfforts.length === 0) {
     return (
       <label className="block space-y-1.5">
-        <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+        <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
         <div className="relative">
           <input
-            className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 pr-9 text-[13px] text-zinc-500 outline-none"
+            className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 pr-9 text-[13px] text-[var(--color-text-muted)] outline-none"
             disabled
             readOnly
             value="Not supported for this model"
           />
-          <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-zinc-600" />
+          <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-[var(--color-text-muted)]" />
         </div>
       </label>
     );
@@ -189,10 +189,10 @@ export function ReasoningEffortSelect({
 
   return (
     <label className="block space-y-1.5">
-      <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+      <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
       <div className="relative">
         <select
-          className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 pr-9 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50 disabled:cursor-not-allowed disabled:opacity-60"
+          className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 pr-9 text-[13px] text-[var(--color-text-primary)] outline-none transition focus:border-[var(--color-accent)]/50 disabled:cursor-not-allowed disabled:opacity-60"
           disabled={disabled || !selectedValue}
           onChange={(event) => onChange(event.target.value as ReasoningEffort)}
           value={selectedValue}
@@ -203,7 +203,7 @@ export function ReasoningEffortSelect({
             </option>
           ))}
         </select>
-        <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-zinc-500" />
+        <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-[var(--color-text-muted)]" />
       </div>
     </label>
   );