Retheme UI from blue to neutral zinc backgrounds with indigo accents

Removes the blue tint from all dark-mode surfaces by switching CSS
variables to zinc-based neutrals, and replaces decorative blue classes
with indigo across buttons, focus rings, tabs, and links. Semantic blue
(severity badges, status badges, role badges, timeline markers) is
preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

client/src/pages/Login.tsx

@@ -30,7 +30,7 @@ export default function Login() {
   };
 
   const inputClass =
-    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
+    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent';
 
   return (
     <div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
@@ -70,7 +70,7 @@ export default function Login() {
           <button
             type="submit"
             disabled={isSubmitting}
-            className="w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
+            className="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 disabled:opacity-50 transition-colors"
           >
             {isSubmitting ? 'Signing in...' : 'Sign in'}
           </button>

client/src/pages/MyTickets.tsx

@@ -39,7 +39,7 @@ export default function MyTickets() {
             <Link
               key={ticket.id}
               to={`/${ticket.displayId}`}
-              className="flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 hover:border-blue-500/50 transition-all group"
+              className="flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 hover:border-indigo-500/50 transition-all group"
             >
               <div
                 className={`w-1 self-stretch rounded-full flex-shrink-0 ${
@@ -66,7 +66,7 @@ export default function MyTickets() {
                     {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
                   </span>
                 </div>
-                <p className="text-sm font-medium text-gray-200 truncate group-hover:text-blue-400">
+                <p className="text-sm font-medium text-gray-200 truncate group-hover:text-indigo-400">
                   {ticket.title}
                 </p>
               </div>

client/src/pages/NewTicket.tsx

@@ -49,7 +49,7 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
   };
 
   const inputClass =
-    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
+    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent';
   const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
   const errorClass = 'mt-1 text-xs text-red-400';
 
@@ -162,7 +162,7 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
           <button
             type="submit"
             disabled={isSubmitting}
-            className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+            className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
           >
             {isSubmitting ? 'Creating...' : 'Create Ticket'}
           </button>

client/src/pages/TicketDetail.tsx

@@ -291,7 +291,7 @@ export default function TicketDetail() {
                 type="text"
                 value={editForm.title}
                 onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
-                className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-blue-500 focus:outline-none pb-1"
+                className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-indigo-500 focus:outline-none pb-1"
                 autoFocus
               />
             ) : (
@@ -319,7 +319,7 @@ export default function TicketDetail() {
                   onClick={() => setTab(key)}
                   className={`flex items-center gap-2 px-4 py-3.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
                     tab === key
-                      ? 'border-blue-500 text-blue-400'
+                      ? 'border-indigo-500 text-indigo-400'
                       : 'border-transparent text-gray-500 hover:text-gray-300'
                   }`}
                 >
@@ -338,7 +338,7 @@ export default function TicketDetail() {
                       value={editForm.overview}
                       onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
                       rows={12}
-                      className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-y font-mono"
+                      className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-y font-mono"
                     />
                     <div className="flex justify-end gap-2">
                       <button
@@ -349,7 +349,7 @@ export default function TicketDetail() {
                       </button>
                       <button
                         onClick={saveEdit}
-                        className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                        className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
                       >
                         <Check size={13} /> Save changes
                       </button>
@@ -426,7 +426,7 @@ export default function TicketDetail() {
                           onClick={() => setPreview(label === 'Preview')}
                           className={`text-xs py-2 border-b-2 -mb-px transition-colors ${
                             (label === 'Preview') === preview
-                              ? 'border-blue-500 text-blue-400'
+                              ? 'border-indigo-500 text-indigo-400'
                               : 'border-transparent text-gray-500 hover:text-gray-300'
                           }`}
                         >
@@ -468,7 +468,7 @@ export default function TicketDetail() {
                         <button
                           type="submit"
                           disabled={addComment.isPending || !commentBody.trim()}
-                          className="flex items-center gap-2 px-4 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+                          className="flex items-center gap-2 px-4 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
                         >
                           <Send size={13} />
                           Comment
@@ -783,7 +783,7 @@ export default function TicketDetail() {
               <button
                 onClick={saveReroute}
                 disabled={!pendingCTI.itemId}
-                className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+                className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
               >
                 Save routing
               </button>

client/src/pages/admin/CTI.tsx

@@ -131,7 +131,7 @@ export default function AdminCTI() {
   const itemClass = (active: boolean) =>
     `flex items-center justify-between px-4 py-2.5 cursor-pointer group transition-colors ${
       active
-        ? 'bg-blue-600/20 border-l-2 border-blue-500'
+        ? 'bg-indigo-600/20 border-l-2 border-indigo-500'
         : 'hover:bg-gray-800 border-l-2 border-transparent'
     }`;
 
@@ -144,7 +144,7 @@ export default function AdminCTI() {
             <h3 className="text-sm font-semibold text-gray-300">Categories</h3>
             <button
               onClick={() => openAdd('category')}
-              className="text-blue-400 hover:text-blue-300 transition-colors"
+              className="text-indigo-400 hover:text-indigo-300 transition-colors"
             >
               <Plus size={16} />
             </button>
@@ -199,7 +199,7 @@ export default function AdminCTI() {
             {selectedCategory && (
               <button
                 onClick={() => openAdd('type')}
-                className="text-blue-400 hover:text-blue-300 transition-colors"
+                className="text-indigo-400 hover:text-indigo-300 transition-colors"
               >
                 <Plus size={16} />
               </button>
@@ -257,7 +257,7 @@ export default function AdminCTI() {
             {selectedType && (
               <button
                 onClick={() => openAdd('item')}
-                className="text-blue-400 hover:text-blue-300 transition-colors"
+                className="text-indigo-400 hover:text-indigo-300 transition-colors"
               >
                 <Plus size={16} />
               </button>
@@ -314,7 +314,7 @@ export default function AdminCTI() {
                 onChange={(e) => setNameValue(e.target.value)}
                 required
                 autoFocus
-                className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
               />
             </div>
             <div className="flex justify-end gap-3">
@@ -328,7 +328,7 @@ export default function AdminCTI() {
               <button
                 type="submit"
                 disabled={submitting}
-                className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+                className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
               >
                 {submitting ? 'Saving...' : 'Save'}
               </button>

client/src/pages/admin/Users.tsx

@@ -174,7 +174,7 @@ export default function AdminUsers() {
   };
 
   const inputClass =
-    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
+    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent';
   const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
 
   return (
@@ -183,7 +183,7 @@ export default function AdminUsers() {
       action={
         <button
           onClick={openAdd}
-          className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors"
+          className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition-colors"
         >
           <Plus size={14} />
           Add User
@@ -281,7 +281,7 @@ export default function AdminUsers() {
               </div>
               <button
                 onClick={closeModal}
-                className="w-full bg-blue-600 text-white py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors"
+                className="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm hover:bg-indigo-700 transition-colors"
               >
                 Done
               </button>
@@ -371,7 +371,7 @@ export default function AdminUsers() {
                 <button
                   type="submit"
                   disabled={submitting}
-                  className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+                  className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
                 >
                   {submitting ? 'Saving...' : modal === 'add' ? 'Create User' : 'Save Changes'}
                 </button>