fix: replace all hardcoded hex colors with CSS theme variables

Phase 15c — theme-consistent color system:

Replaced 63 instances of hardcoded hex colors (#5e6ad2, #7170ff, #4f46e5,
#6a75e0, #828fff, #94a3b8, etc.) with CSS variables from globals.css:
- #5e6ad2 → var(--brand) (light: #5e6ad2, dark: #5e6ad2)
- #7170ff → var(--accent) (light: #4f46e5, dark: #7170ff)
- #4f46e5 → var(--accent)
- #6a75e0 → var(--brand-hover) (new var, light: #6a75e0, dark: #7170ff)
- #828fff → var(--accent-hover)
- #868686 → var(--text-dim)
- Dark-mode-specific hex in Markdown.tsx → CSS variables

Added --brand-hover CSS variable (light: #6a75e0, dark: #7170ff)
Added dark:prose-invert instead of prose-invert (light mode now uses
default prose theme instead of forced dark)

Files changed: 15 component files + globals.css

apps/web/app/components/Markdown.tsx

@@ -27,19 +27,19 @@ function CodeBlock({ children, className, ...props }: React.HTMLAttributes<HTMLE
   }
 
   return (
-    <div className="relative group my-4 rounded-lg overflow-hidden border border-[#23252a] bg-[#0c0d0e]">
+    <div className="relative group my-4 rounded-lg overflow-hidden border border-[var(--border-color)] bg-[var(--code-block-bg)]">
       {/* Code block header bar */}
-      <div className="flex items-center justify-between px-3.5 py-1.5 bg-[#141517] border-b border-[#1f2022] text-[11px] text-[#8a8f98] font-mono">
+      <div className="flex items-center justify-between px-3.5 py-1.5 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] text-[11px] text-[var(--text-muted)] font-mono">
         <span>{language || "text"}</span>
         <button
           onClick={handleCopy}
           type="button"
-          className="flex items-center gap-1 text-[#8a8f98] hover:text-[#f7f8f8] bg-[#1a1b1d] hover:bg-[#23252a] px-2 py-0.5 rounded border border-[#27292d] transition-all"
+          className="flex items-center gap-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-elevated-hover)] hover:bg-[var(--border-subtle)] px-2 py-0.5 rounded border border-[var(--border-color)] transition-all"
         >
           {copied ? (
             <>
               <svg className="w-3 h-3 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4 L19 7" />
               </svg>
               <span className="text-emerald-400 font-sans">Copied!</span>
             </>
@@ -54,7 +54,7 @@ function CodeBlock({ children, className, ...props }: React.HTMLAttributes<HTMLE
         </button>
       </div>
 
-      <pre className="!m-0 !bg-transparent p-4 overflow-x-auto text-sm text-[#e2e4e7] font-mono leading-relaxed">
+      <pre className="!m-0 !bg-transparent p-4 overflow-x-auto text-sm text-[var(--pre-text)] font-mono leading-relaxed">
         <code className={className} {...props}>
           {children}
         </code>
@@ -66,17 +66,17 @@ function CodeBlock({ children, className, ...props }: React.HTMLAttributes<HTMLE
 export default function Markdown({ source }: { source: string }) {
   return (
     <div
-      className="prose prose-invert max-w-none
-      prose-headings:text-[#f7f8f8] prose-headings:font-medium prose-headings:tracking-tight
-      prose-h1:text-2xl prose-h1:mb-6 prose-h1:mt-8 prose-h1:pb-2 prose-h1:border-b prose-h1:border-[#1f2022]
+      className="prose max-w-none
+      prose-headings:text-[var(--text-primary)] prose-headings:font-medium prose-headings:tracking-tight
+      prose-h1:text-2xl prose-h1:mb-6 prose-h1:mt-8 prose-h1:pb-2 prose-h1:border-b prose-h1:border-[var(--border-color)]
       prose-h2:text-xl prose-h2:mb-4 prose-h2:mt-8
       prose-h3:text-base prose-h3:mb-3 prose-h3:mt-6
-      prose-p:text-[#d0d6e0] prose-p:leading-relaxed prose-p:mb-4
-      prose-a:text-[#7170ff] prose-a:no-underline hover:prose-a:underline hover:prose-a:text-[#828fff]
-      prose-ul:text-[#d0d6e0] prose-ul:my-3 prose-li:my-1
-      prose-ol:text-[#d0d6e0] prose-ol:my-3
-      prose-strong:text-[#f7f8f8] prose-strong:font-semibold
-      prose-hr:border-[#1f2022] prose-hr:my-8"
+      prose-p:text-[var(--text-secondary)] prose-p:leading-relaxed prose-p:mb-4
+      prose-a:text-[var(--accent)] prose-a:no-underline hover:prose-a:underline hover:prose-a:text-[var(--accent-hover)]
+      prose-ul:text-[var(--text-secondary)] prose-ul:my-3 prose-li:my-1
+      prose-ol:text-[var(--text-secondary)] prose-ol:my-3
+      prose-strong:text-[var(--text-primary)] prose-strong:font-semibold
+      prose-hr:border-[var(--border-color)] prose-hr:my-8"
     >
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
@@ -85,13 +85,13 @@ export default function Markdown({ source }: { source: string }) {
           code: CodeBlock as any,
           pre: ({ children }) => <>{children}</>,
           table: ({ node, ...props }) => (
-            <div className="overflow-x-auto my-6 border border-[#1f2022] rounded-lg">
+            <div className="overflow-x-auto my-6 border border-[var(--border-color)] rounded-lg">
               <table className="w-full border-collapse" {...props} />
             </div>
           ),
           blockquote: ({ children }) => {
             return (
-              <blockquote className="border-l-4 border-[#5e6ad2] bg-[#141517]/60 pl-4 py-2 my-4 rounded-r text-[#a0a4a8] not-italic">
+              <blockquote className="border-l-4 border-[var(--brand)] bg-[var(--bg-elevated)]/60 pl-4 py-2 my-4 rounded-r text-[var(--text-muted)] not-italic">
                 {children}
               </blockquote>
             );