refactor: replace hardcoded hex values with Tailwind semantic tokens

3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/session/UpdateTicketModal.tsx

@@ -134,7 +134,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
         <button
           type="button"
           onClick={onClose}
-          className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
         >
           Cancel
         </button>
@@ -144,7 +144,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
           disabled={isPosting || !content.trim()}
           className={cn(
             'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
-            'bg-[#22d3ee] text-white',
+            'bg-primary text-white',
             'hover:brightness-110 active:scale-[0.98] transition-all',
             'disabled:opacity-50 disabled:cursor-not-allowed'
           )}
@@ -160,7 +160,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
     <Modal isOpen={open} onClose={onClose} title="Update Ticket" size="xl" footer={footer}>
       {isLoading && (
         <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       )}
 
@@ -172,7 +172,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
           </div>
           <button
             onClick={loadPreview}
-            className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
             Try again
           </button>
@@ -184,13 +184,13 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
           {/* Left panel - Content editor */}
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 Note Content
               </p>
               <button
                 type="button"
                 onClick={handleCopyContent}
-                className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
                 title="Copy content"
               >
                 <Copy className="h-3 w-3" />
@@ -214,7 +214,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
               ) : (
                 <span />
               )}
-              <span className="text-[#848b9b]">
+              <span className="text-muted-foreground">
                 {content.length.toLocaleString()} characters
               </span>
             </div>
@@ -223,15 +223,15 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
           {/* Right panel - Controls */}
           <div className="space-y-6">
             {/* Ticket info summary */}
-            <div className="card-flat rounded-lg border border-[#1e2130] p-3">
-              <p className="text-sm font-medium text-[#e2e5eb]">
+            <div className="card-flat rounded-lg border border-border p-3">
+              <p className="text-sm font-medium text-foreground">
                 CW #{preview.ticket.id}
                 {preview.ticket.summary && (
-                  <span className="text-[#848b9b]"> — {preview.ticket.summary}</span>
+                  <span className="text-muted-foreground"> — {preview.ticket.summary}</span>
                 )}
               </p>
               {(preview.ticket.company_name || preview.ticket.board_name) && (
-                <p className="mt-1 text-xs text-[#848b9b]">
+                <p className="mt-1 text-xs text-muted-foreground">
                   {[preview.ticket.company_name, preview.ticket.board_name].filter(Boolean).join(' / ')}
                 </p>
               )}
@@ -239,7 +239,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
 
             {/* Note Type */}
             <div>
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-3">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
                 Note Type
               </p>
               <div className="space-y-2">
@@ -250,7 +250,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
                       'flex cursor-pointer items-start gap-3 rounded-lg border px-3 py-2.5 transition-colors',
                       noteType === opt.value
                         ? 'border-primary/30 bg-primary/5'
-                        : 'border-[#1e2130] hover:border-[rgba(255,255,255,0.12)]'
+                        : 'border-border hover:border-[rgba(255,255,255,0.12)]'
                     )}
                   >
                     <input
@@ -262,8 +262,8 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
                       className="mt-0.5 accent-cyan-400"
                     />
                     <div className="min-w-0">
-                      <span className="text-sm font-medium text-[#e2e5eb]">{opt.label}</span>
-                      <p className="text-xs text-[#848b9b]">{opt.description}</p>
+                      <span className="text-sm font-medium text-foreground">{opt.label}</span>
+                      <p className="text-xs text-muted-foreground">{opt.description}</p>
                       {opt.warning && noteType === opt.value && (
                         <p className="mt-1 flex items-center gap-1 text-xs text-amber-400">
                           <AlertTriangle className="h-3 w-3 shrink-0" />
@@ -278,14 +278,14 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
 
             {/* Ticket Status */}
             <div>
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
                 Ticket Status
               </p>
               <select
                 value={selectedStatusId ?? ''}
                 onChange={(e) => setSelectedStatusId(e.target.value ? Number(e.target.value) : null)}
                 className={cn(
-                  'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+                  'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                   'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
               >
@@ -301,7 +301,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
 
             {/* Previous posts */}
             {preview.previous_posts > 0 && (
-              <p className="text-xs text-[#848b9b]">
+              <p className="text-xs text-muted-foreground">
                 This session has been posted {preview.previous_posts} time{preview.previous_posts > 1 ? 's' : ''} before.
               </p>
             )}