From 4bd444f147d36abb9903cd49a6b6f17e2733239d Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Tue, 23 Jun 2026 12:29:46 -0500
Subject: [PATCH] revert: remove custom color palette, restore standard
 Tailwind v4 colors

---
 assets/css/app.css                            | 98 +++----------------
 lib/towerops_web/components/breadcrumbs.ex    |  2 +-
 .../user_settings_html/edit.html.heex         |  4 +-
 .../live/activity_feed_live.html.heex         |  6 +-
 lib/towerops_web/live/changelog_live.ex       | 10 +-
 lib/towerops_web/live/config_timeline_live.ex | 38 +++----
 .../live/coverage_live/form.html.heex         |  2 +-
 .../live/coverage_live/map.html.heex          |  2 +-
 .../live/coverage_live/show.html.heex         |  4 +-
 .../live/device_live/show.html.heex           |  2 +-
 .../live/insights_live/index.html.heex        |  4 +-
 .../live/org/settings_live.html.heex          |  4 +-
 .../live/site_live/index.html.heex            |  2 +-
 .../live/site_live/show.html.heex             |  8 +-
 lib/towerops_web/live/trace_live/index.ex     | 18 ++--
 .../live/trace_live/index.html.heex           | 56 +++++------
 .../config_timeline_live_helpers_test.exs     |  4 +-
 17 files changed, 97 insertions(+), 167 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 72ec14e9..c644d401 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -6,74 +6,6 @@
 @source "../js";
 @source "../../lib/towerops_web";
 
-/* ── Custom color palette ── */
-@theme {
-  --color-sweet-salmon-50: #ffe7e6;
-  --color-sweet-salmon-100: #fed0cd;
-  --color-sweet-salmon-200: #fea19a;
-  --color-sweet-salmon-300: #fd7268;
-  --color-sweet-salmon-400: #fd4235;
-  --color-sweet-salmon-500: #fc1303;
-  --color-sweet-salmon-600: #ca0f02;
-  --color-sweet-salmon-700: #970c02;
-  --color-sweet-salmon-800: #650801;
-  --color-sweet-salmon-900: #320401;
-  --color-sweet-salmon-950: #230300;
-
-  --color-desert-sand-50: #faf0eb;
-  --color-desert-sand-100: #f5e2d6;
-  --color-desert-sand-200: #ebc5ad;
-  --color-desert-sand-300: #e0a885;
-  --color-desert-sand-400: #d68b5c;
-  --color-desert-sand-500: #cc6e33;
-  --color-desert-sand-600: #a35829;
-  --color-desert-sand-700: #7a421f;
-  --color-desert-sand-800: #522c14;
-  --color-desert-sand-900: #29160a;
-  --color-desert-sand-950: #1d0f07;
-
-  --color-wheat-50: #faf4eb;
-  --color-wheat-100: #f5e9d6;
-  --color-wheat-200: #ebd3ad;
-  --color-wheat-300: #e0bd85;
-  --color-wheat-400: #d6a75c;
-  --color-wheat-500: #cc9133;
-  --color-wheat-600: #a37429;
-  --color-wheat-700: #7a571f;
-  --color-wheat-800: #523a14;
-  --color-wheat-900: #291d0a;
-  --color-wheat-950: #1d1407;
-
-  --color-cool-steel-50: #f0f3f4;
-  --color-cool-steel-100: #e1e7ea;
-  --color-cool-steel-200: #c4cfd4;
-  --color-cool-steel-300: #a6b7bf;
-  --color-cool-steel-400: #89a0a9;
-  --color-cool-steel-500: #6b8894;
-  --color-cool-steel-600: #566d76;
-  --color-cool-steel-700: #405159;
-  --color-cool-steel-800: #2b363b;
-  --color-cool-steel-900: #151b1e;
-  --color-cool-steel-950: #0f1315;
-
-  --color-cerulean-50: #edf4f8;
-  --color-cerulean-100: #dbe9f0;
-  --color-cerulean-200: #b6d3e2;
-  --color-cerulean-300: #92bcd3;
-  --color-cerulean-400: #6da6c5;
-  --color-cerulean-500: #4990b6;
-  --color-cerulean-600: #3a7392;
-  --color-cerulean-700: #2c566d;
-  --color-cerulean-800: #1d3a49;
-  --color-cerulean-900: #0f1d24;
-  --color-cerulean-950: #0a141a;
-
-  /* Design tokens (replaces daisyUI semantic variables) */
-  --radius-selector: 0.25rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.5rem;
-}
-
 /* Heroicons plugin */
 @plugin "../vendor/heroicons";
 
@@ -89,14 +21,14 @@
 
 /* Card — replaces daisyUI `card card-body bg-base-100 border-base-200` */
 @utility card {
-  border-radius: var(--radius-box);
-  border: 1px solid var(--color-cool-steel-200);
-  background: var(--color-cool-steel-50);
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  background: #f9fafb;
   padding: 1.5rem;
 }
 [data-theme="dark"] .card {
-  border-color: var(--color-cool-steel-700);
-  background: var(--color-cool-steel-900);
+  border-color: #374151;
+  background: #111827;
 }
 
 /* Badge — replaces daisyUI `badge` */
@@ -116,7 +48,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  border-radius: var(--radius-field);
+  border-radius: 0.25rem;
   padding-inline: 1rem;
   padding-block: 0.5rem;
   font-size: 0.875rem;
@@ -124,13 +56,13 @@
   line-height: 1.25rem;
   cursor: pointer;
   border: 1px solid transparent;
-  background: var(--color-cool-steel-200);
-  color: var(--color-cool-steel-900);
+  background: #e5e7eb;
+  color: #111827;
   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 }
 [data-theme="dark"] .btn {
-  background: var(--color-cool-steel-700);
-  color: var(--color-cool-steel-50);
+  background: #374151;
+  color: #f9fafb;
 }
 
 /* ── Base element styles (replaces daisyUI resets) ── */
@@ -238,12 +170,12 @@ html.sidebar-collapsed [data-sidebar-tooltip]:hover::after {
 [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }
 
 /* Table row hover highlight */
-tbody tr:hover td { background-color: rgba(73, 144, 182, 0.06); }
-[data-theme="dark"] tbody tr:hover td { background-color: rgba(73, 144, 182, 0.12); }
+tbody tr:hover td { background-color: rgba(59, 130, 246, 0.04); }
+[data-theme="dark"] tbody tr:hover td { background-color: rgba(59, 130, 246, 0.08); }
 
 /* Focus ring styling */
 :focus-visible {
-  outline: 2px solid var(--color-cerulean-500);
+  outline: 2px solid #3b82f6;
   outline-offset: 2px;
 }
 
@@ -253,7 +185,7 @@ a, button, input, select, textarea {
 }
 
 /* Password strength indicator (JS-driven via classes) */
-.password-strength-bar.strength-weak { background-color: var(--color-sweet-salmon-500); }
-.password-strength-bar.strength-fair { background-color: var(--color-wheat-500); }
+.password-strength-bar.strength-weak { background-color: #ef4444; }
+.password-strength-bar.strength-fair { background-color: #eab308; }
 .password-strength-bar.strength-good { background-color: #22c55e; }
 .password-strength-bar.strength-strong { background-color: #16a34a; }
diff --git a/lib/towerops_web/components/breadcrumbs.ex b/lib/towerops_web/components/breadcrumbs.ex
index 4d765740..cea1f030 100644
--- a/lib/towerops_web/components/breadcrumbs.ex
+++ b/lib/towerops_web/components/breadcrumbs.ex
@@ -25,7 +25,7 @@ defmodule ToweropsWeb.Components.Breadcrumbs do
 
   def breadcrumb(assigns) do
     ~H"""
-    <div class="flex items-center gap-2 text-sm mb-4 text-cool-steel-600 dark:text-cool-steel-400">
+    <div class="flex items-center gap-2 text-sm mb-4 text-gray-600 dark:text-gray-400">
       <ul>
         <%= for {item, idx} <- Enum.with_index(@items) do %>
           <li>
diff --git a/lib/towerops_web/controllers/user_settings_html/edit.html.heex b/lib/towerops_web/controllers/user_settings_html/edit.html.heex
index fdb478f3..48833f35 100644
--- a/lib/towerops_web/controllers/user_settings_html/edit.html.heex
+++ b/lib/towerops_web/controllers/user_settings_html/edit.html.heex
@@ -20,7 +20,7 @@
     </.button>
   </.form>
 
-  <div class="my-4 border-t border-cool-steel-200 dark:border-cool-steel-700" />
+  <div class="my-4 border-t border-gray-200 dark:border-gray-700" />
 
   <.form :let={f} for={@password_changeset} action={~p"/users/settings"} id="update_password">
     <input type="hidden" name="action" value="update_password" />
@@ -44,7 +44,7 @@
     </.button>
   </.form>
 
-  <div class="my-4 border-t border-cool-steel-200 dark:border-cool-steel-700" />
+  <div class="my-4 border-t border-gray-200 dark:border-gray-700" />
 
   <div>
     <h3 class="text-lg font-semibold leading-6 text-gray-900 dark:text-white">
diff --git a/lib/towerops_web/live/activity_feed_live.html.heex b/lib/towerops_web/live/activity_feed_live.html.heex
index 1b0e3718..8df4029c 100644
--- a/lib/towerops_web/live/activity_feed_live.html.heex
+++ b/lib/towerops_web/live/activity_feed_live.html.heex
@@ -32,7 +32,7 @@
           value={@search}
           placeholder={t("Search by device name, IP, site, or keyword...")}
           phx-debounce="300"
-          class="w-full pl-10 pr-10 rounded-field border border-cool-steel-300 bg-cool-steel-50 px-3 py-2 text-sm text-cool-steel-900 placeholder:text-cool-steel-400 focus:border-cerulean-500 focus:ring-1 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-900 dark:text-cool-steel-100 dark:placeholder:text-cool-steel-500"
+          class="w-full pl-10 pr-10 rounded-field border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
         />
         <button
           :if={@search != ""}
@@ -108,7 +108,7 @@
           <button
             type="button"
             phx-click="clear_search"
-            class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-2"
+            class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-2"
           >
             <.icon name="hero-x-mark" class="h-4 w-4" /> Clear search
           </button>
@@ -285,7 +285,7 @@
         <button
           type="button"
           phx-click="load_more"
-          class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-2"
+          class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-2"
         >
           <.icon name="hero-arrow-down" class="h-4 w-4" /> Load more events
         </button>
diff --git a/lib/towerops_web/live/changelog_live.ex b/lib/towerops_web/live/changelog_live.ex
index 7abee550..a0effe56 100644
--- a/lib/towerops_web/live/changelog_live.ex
+++ b/lib/towerops_web/live/changelog_live.ex
@@ -19,25 +19,25 @@ defmodule ToweropsWeb.ChangelogLive do
     >
       <div class="mx-auto max-w-3xl px-4 py-8">
         <h1 class="text-3xl font-bold mb-2">What's New</h1>
-        <p class="text-cool-steel-900/60 dark:text-cool-steel-100/60 mb-8">
+        <p class="text-gray-900/60 dark:text-gray-100/60 mb-8">
           Latest updates and improvements to TowerOps.
         </p>
 
         <div class="space-y-8">
           <div
             :for={entry <- @entries}
-            class="relative pl-8 border-l-2 border-sweet-salmon-500/20 dark:border-sweet-salmon-600/20"
+            class="relative pl-8 border-l-2 border-red-500/20 dark:border-red-600/20"
           >
-            <div class="absolute -left-[9px] top-1 w-4 h-4 rounded-full bg-sweet-salmon-500 dark:bg-sweet-salmon-600 border-2 border-cool-steel-50 dark:border-cool-steel-900" />
+            <div class="absolute -left-[9px] top-1 w-4 h-4 rounded-full bg-red-500 dark:bg-red-600 border-2 border-gray-50 dark:border-gray-900" />
             <div class="mb-1">
-              <span class="badge text-cool-steel-700 dark:text-cool-steel-300 font-mono">
+              <span class="badge text-gray-700 dark:text-gray-300 font-mono">
                 {Calendar.strftime(entry.date, "%b %d, %Y")}
               </span>
             </div>
             <h2 :if={entry.title} class="text-lg font-semibold mb-2">{entry.title}</h2>
             <ul
               :if={entry.items != []}
-              class="list-disc list-inside space-y-1 text-cool-steel-900/80 dark:text-cool-steel-100/80 text-sm"
+              class="list-disc list-inside space-y-1 text-gray-900/80 dark:text-gray-100/80 text-sm"
             >
               <li :for={item <- entry.items}>{item}</li>
             </ul>
diff --git a/lib/towerops_web/live/config_timeline_live.ex b/lib/towerops_web/live/config_timeline_live.ex
index 901ef20e..8aec7904 100644
--- a/lib/towerops_web/live/config_timeline_live.ex
+++ b/lib/towerops_web/live/config_timeline_live.ex
@@ -89,10 +89,10 @@ defmodule ToweropsWeb.ConfigTimelineLive do
       <div class="flex items-center justify-between">
         <div>
           <h1 class="text-2xl font-bold">Config Timeline</h1>
-          <p class="text-cool-steel-900/60 dark:text-cool-steel-100/60">
+          <p class="text-gray-900/60 dark:text-gray-100/60">
             <.link
               navigate={~p"/devices/#{@device.id}?tab=overview"}
-              class="text-cerulean-600 hover:text-cerulean-700 hover:underline dark:text-cerulean-400 dark:hover:text-cerulean-300"
+              class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
             >
               {@device.name}
             </.link>
@@ -102,7 +102,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
         <div class="inline-flex">
           <button
             :for={r <- ["24h", "7d", "30d"]}
-            class={"btn text-sm !py-1 !px-3 #{if @range == r, do: "bg-sweet-salmon-500 text-white hover:bg-sweet-salmon-600 dark:bg-sweet-salmon-600 dark:hover:bg-sweet-salmon-700", else: "bg-transparent hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700"}"}
+            class={"btn text-sm !py-1 !px-3 #{if @range == r, do: "bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700", else: "bg-transparent hover:bg-gray-200 dark:hover:bg-gray-700"}"}
             phx-click="select_range"
             phx-value-range={r}
           >
@@ -125,7 +125,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
             data-checks={Jason.encode!(@check_data)}
             class="h-64 w-full"
           >
-            <div class="flex items-center justify-center h-full text-cool-steel-900/40 dark:text-cool-steel-100/40">
+            <div class="flex items-center justify-center h-full text-gray-900/40 dark:text-gray-100/40">
               Loading chart...
             </div>
           </div>
@@ -138,7 +138,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
           <h2 class="text-lg font-semibold">Config Changes ({length(@change_events)})</h2>
 
           <%= if Enum.empty?(@change_events) do %>
-            <p class="text-cool-steel-900/50 dark:text-cool-steel-100/50 py-4">
+            <p class="text-gray-900/50 dark:text-gray-100/50 py-4">
               No config changes in this period.
             </p>
           <% else %>
@@ -155,7 +155,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
                 <tbody>
                   <tr
                     :for={event <- @change_events}
-                    class="hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50 cursor-pointer"
+                    class="hover:bg-gray-100/50 dark:hover:bg-gray-800/50 cursor-pointer"
                     phx-click="select_event"
                     phx-value-id={event.id}
                   >
@@ -165,13 +165,13 @@ defmodule ToweropsWeb.ConfigTimelineLive do
                     <td>
                       <span
                         :for={section <- event.sections_changed}
-                        class="badge text-cool-steel-700 dark:text-cool-steel-300 mr-1"
+                        class="badge text-gray-700 dark:text-gray-300 mr-1"
                       >
                         {section}
                       </span>
                     </td>
                     <td>
-                      <span class={"badge bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300 #{change_size_class(event.change_size)}"}>
+                      <span class={"badge bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300 #{change_size_class(event.change_size)}"}>
                         {event.change_size} lines
                       </span>
                     </td>
@@ -180,7 +180,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
                         navigate={
                           ~p"/devices/#{@device.id}/backups/compare?before=#{event.backup_before_id}&after=#{event.backup_after_id}"
                         }
-                        class="btn text-xs !py-0.5 !px-2 bg-transparent hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700"
+                        class="btn text-xs !py-0.5 !px-2 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-700"
                       >
                         View Diff
                       </.link>
@@ -195,14 +195,14 @@ defmodule ToweropsWeb.ConfigTimelineLive do
 
       <%!-- Selected event detail modal --%>
       <%= if @selected_event do %>
-        <div class="card shadow-sm border border-sweet-salmon-500/20 dark:border-sweet-salmon-600/20">
+        <div class="card shadow-sm border border-red-500/20 dark:border-red-600/20">
           <div class="p-4 sm:p-6">
             <div class="flex items-center justify-between">
               <h2 class="text-lg font-semibold">
                 Change Details — {Calendar.strftime(@selected_event.changed_at, "%b %d, %H:%M UTC")}
               </h2>
               <button
-                class="btn text-sm !py-1 !px-3 bg-transparent hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700"
+                class="btn text-sm !py-1 !px-3 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-700"
                 phx-click="close_event"
               >
                 ✕
@@ -211,26 +211,26 @@ defmodule ToweropsWeb.ConfigTimelineLive do
 
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
               <div>
-                <span class="text-sm font-medium text-cool-steel-900/60 dark:text-cool-steel-100/60">
+                <span class="text-sm font-medium text-gray-900/60 dark:text-gray-100/60">
                   Sections Changed
                 </span>
                 <div class="mt-1">
                   <span
                     :for={s <- @selected_event.sections_changed}
-                    class="badge border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 mr-1"
+                    class="badge border border-gray-300 bg-transparent dark:border-gray-600 mr-1"
                   >
                     {s}
                   </span>
                   <span
                     :if={Enum.empty?(@selected_event.sections_changed)}
-                    class="text-cool-steel-900/40 dark:text-cool-steel-100/40"
+                    class="text-gray-900/40 dark:text-gray-100/40"
                   >
                     Unknown
                   </span>
                 </div>
               </div>
               <div>
-                <span class="text-sm font-medium text-cool-steel-900/60 dark:text-cool-steel-100/60">
+                <span class="text-sm font-medium text-gray-900/60 dark:text-gray-100/60">
                   Lines Changed
                 </span>
                 <p class="font-mono">{@selected_event.change_size}</p>
@@ -240,7 +240,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
                   navigate={
                     ~p"/devices/#{@device.id}/backups/compare?before=#{@selected_event.backup_before_id}&after=#{@selected_event.backup_after_id}"
                   }
-                  class="btn text-sm !py-1 !px-3 bg-sweet-salmon-500 text-white hover:bg-sweet-salmon-600 dark:bg-sweet-salmon-600 dark:hover:bg-sweet-salmon-700"
+                  class="btn text-sm !py-1 !px-3 bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
                 >
                   Full Diff View →
                 </.link>
@@ -249,10 +249,10 @@ defmodule ToweropsWeb.ConfigTimelineLive do
 
             <%= if @selected_event.diff_summary do %>
               <div class="mt-4">
-                <span class="text-sm font-medium text-cool-steel-900/60 dark:text-cool-steel-100/60">
+                <span class="text-sm font-medium text-gray-900/60 dark:text-gray-100/60">
                   Diff Summary
                 </span>
-                <pre class="bg-cool-steel-100 dark:bg-cool-steel-800 p-3 rounded-lg mt-1 text-xs overflow-x-auto max-h-48 overflow-y-auto"><code>{@selected_event.diff_summary}</code></pre>
+                <pre class="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg mt-1 text-xs overflow-x-auto max-h-48 overflow-y-auto"><code>{@selected_event.diff_summary}</code></pre>
               </div>
             <% end %>
           </div>
@@ -284,7 +284,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
 
   @doc false
   def change_size_class(size) when is_integer(size) and size > 50,
-    do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+    do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
 
   def change_size_class(size) when is_integer(size) and size > 20,
     do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
diff --git a/lib/towerops_web/live/coverage_live/form.html.heex b/lib/towerops_web/live/coverage_live/form.html.heex
index 24ea1a88..7b196d5e 100644
--- a/lib/towerops_web/live/coverage_live/form.html.heex
+++ b/lib/towerops_web/live/coverage_live/form.html.heex
@@ -233,7 +233,7 @@
     <div class="flex justify-end gap-2">
       <.link
         navigate={~p"/coverage"}
-        class="btn border border-cool-steel-300 bg-transparent dark:border-cool-steel-600"
+        class="btn border border-gray-300 bg-transparent dark:border-gray-600"
       >
         {t("Cancel")}
       </.link>
diff --git a/lib/towerops_web/live/coverage_live/map.html.heex b/lib/towerops_web/live/coverage_live/map.html.heex
index 7261d672..bd636914 100644
--- a/lib/towerops_web/live/coverage_live/map.html.heex
+++ b/lib/towerops_web/live/coverage_live/map.html.heex
@@ -12,7 +12,7 @@
     <:actions>
       <.link
         navigate={~p"/coverage/list"}
-        class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-1.5"
+        class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5"
       >
         <.icon name="hero-list-bullet" class="h-4 w-4" /> {t("List view")}
       </.link>
diff --git a/lib/towerops_web/live/coverage_live/show.html.heex b/lib/towerops_web/live/coverage_live/show.html.heex
index c24514e2..32310f51 100644
--- a/lib/towerops_web/live/coverage_live/show.html.heex
+++ b/lib/towerops_web/live/coverage_live/show.html.heex
@@ -33,7 +33,7 @@
       <button
         type="button"
         phx-click="toggle_params"
-        class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-1.5"
+        class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5"
         title={t("Toggle parameters panel")}
       >
         <.icon name="hero-adjustments-horizontal" class="h-4 w-4" />
@@ -41,7 +41,7 @@
       </button>
       <.link
         navigate={~p"/coverage/#{@coverage.id}/edit"}
-        class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-1.5"
+        class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5"
       >
         <.icon name="hero-pencil-square" class="h-4 w-4" /> {t("Edit")}
       </.link>
diff --git a/lib/towerops_web/live/device_live/show.html.heex b/lib/towerops_web/live/device_live/show.html.heex
index 50980ec8..e11ec6f1 100644
--- a/lib/towerops_web/live/device_live/show.html.heex
+++ b/lib/towerops_web/live/device_live/show.html.heex
@@ -770,7 +770,7 @@
                         </span>
                         <span
                           :for={s <- Enum.take(event.sections_changed, 3)}
-                          class="badge text-xs !px-2 !py-0 text-cool-steel-700 dark:text-cool-steel-300"
+                          class="badge text-xs !px-2 !py-0 text-gray-700 dark:text-gray-300"
                         >
                           {s}
                         </span>
diff --git a/lib/towerops_web/live/insights_live/index.html.heex b/lib/towerops_web/live/insights_live/index.html.heex
index 5d04d8ca..2ccc5e1d 100644
--- a/lib/towerops_web/live/insights_live/index.html.heex
+++ b/lib/towerops_web/live/insights_live/index.html.heex
@@ -178,7 +178,7 @@
   <div class="mt-6" id="insights-list">
     <%= if @insights == [] do %>
       <div id="empty-state" class="flex items-center justify-center py-8">
-        <div class="card shadow-md border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 max-w-md w-full">
+        <div class="card shadow-md border border-gray-200 dark:border-gray-700 dark:border-white/10 max-w-md w-full">
           <div class="items-center text-center">
             <div class="rounded-full bg-amber-100 dark:bg-amber-900/40 p-4 mb-2">
               <.icon
@@ -202,7 +202,7 @@
               <% end %>
             </p>
             <div class="mt-4 flex gap-2 mt-2">
-              <span class="text-sm text-cool-steel-900/50 dark:text-cool-steel-100/50">
+              <span class="text-sm text-gray-900/50 dark:text-gray-100/50">
                 {t("Go to your org settings to connect an integration.")}
               </span>
             </div>
diff --git a/lib/towerops_web/live/org/settings_live.html.heex b/lib/towerops_web/live/org/settings_live.html.heex
index 0d125f41..e2ab170c 100644
--- a/lib/towerops_web/live/org/settings_live.html.heex
+++ b/lib/towerops_web/live/org/settings_live.html.heex
@@ -1098,14 +1098,14 @@
           <%= if @organization.subscription_plan == "free" do %>
             <.button
               phx-click="upgrade_to_paid"
-              class="bg-sweet-salmon-500 text-white hover:bg-sweet-salmon-600 dark:bg-sweet-salmon-600 dark:hover:bg-sweet-salmon-700"
+              class="bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
             >
               {t("Upgrade to Paid Plan")}
             </.button>
           <% else %>
             <.button
               phx-click="manage_billing"
-              class="bg-cerulean-500 text-white hover:bg-cerulean-600 dark:bg-cerulean-600 dark:hover:bg-cerulean-700"
+              class="bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"
             >
               {t("Manage Billing")}
             </.button>
diff --git a/lib/towerops_web/live/site_live/index.html.heex b/lib/towerops_web/live/site_live/index.html.heex
index bbbe9b17..26142955 100644
--- a/lib/towerops_web/live/site_live/index.html.heex
+++ b/lib/towerops_web/live/site_live/index.html.heex
@@ -10,7 +10,7 @@
     <:actions>
       <.link
         navigate={~p"/sites-map"}
-        class="btn text-sm !py-1 !px-3 border border-cool-steel-300 bg-transparent dark:border-cool-steel-600 gap-1.5 mr-2"
+        class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5 mr-2"
       >
         <.icon name="hero-map" class="h-4 w-4" /> Map View
       </.link>
diff --git a/lib/towerops_web/live/site_live/show.html.heex b/lib/towerops_web/live/site_live/show.html.heex
index 56c44253..7ca6f720 100644
--- a/lib/towerops_web/live/site_live/show.html.heex
+++ b/lib/towerops_web/live/site_live/show.html.heex
@@ -290,7 +290,7 @@
                 <dd class="mt-0.5">
                   <.link
                     navigate={~p"/sites/#{@site.parent_site.id}"}
-                    class="text-sm text-cerulean-600 hover:text-cerulean-700 hover:underline dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                    class="text-sm text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
                   >
                     {@site.parent_site.name}
                   </.link>
@@ -311,7 +311,7 @@
             <% end %>
           </dl>
           <%= if @site.child_sites != [] do %>
-            <div class="mt-4 border-t border-cool-steel-300 dark:border-cool-steel-600 pt-3">
+            <div class="mt-4 border-t border-gray-300 dark:border-gray-600 pt-3">
               <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("Child Sites")}
               </h4>
@@ -319,7 +319,7 @@
                 <li :for={child <- @site.child_sites}>
                   <.link
                     navigate={~p"/sites/#{child.id}"}
-                    class="text-sm text-cerulean-600 hover:text-cerulean-700 hover:underline dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                    class="text-sm text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
                   >
                     {child.name}
                   </.link>
@@ -396,7 +396,7 @@
                   </p>
                 </div>
                 <span class={[
-                  "badge bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300",
+                  "badge bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
                   change_size_color(change.diff_size || 0)
                 ]}>
                   {change_size_label(change.diff_size || 0)}
diff --git a/lib/towerops_web/live/trace_live/index.ex b/lib/towerops_web/live/trace_live/index.ex
index 9a156383..fcb4ad34 100644
--- a/lib/towerops_web/live/trace_live/index.ex
+++ b/lib/towerops_web/live/trace_live/index.ex
@@ -33,7 +33,7 @@ defmodule ToweropsWeb.TraceLive.Index do
     ~H"""
     <div
       :if={@issues != []}
-      class="border-l-4 border-wheat-500 bg-wheat-50 p-4 text-wheat-900 shadow-sm dark:bg-wheat-900/20 dark:text-wheat-300"
+      class="border-l-4 border-yellow-500 bg-yellow-50 p-4 text-yellow-900 shadow-sm dark:bg-yellow-900/20 dark:text-yellow-300"
     >
       <.icon name="hero-exclamation-triangle" class="h-5 w-5" />
       <div>
@@ -56,14 +56,14 @@ defmodule ToweropsWeb.TraceLive.Index do
         :good -> "border-green-200 dark:border-green-800"
         :warning -> "border-yellow-200 dark:border-yellow-800"
         :bad -> "border-red-200 dark:border-red-800"
-        _ -> "border-cool-steel-200 dark:border-cool-steel-700"
+        _ -> "border-gray-200 dark:border-gray-700"
       end
 
     assigns = assign(assigns, :color, color)
 
     ~H"""
-    <div class={"flex flex-col bg-cool-steel-50 dark:bg-cool-steel-900 rounded-xl border #{@color} p-4"}>
-      <div class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">{@label}</div>
+    <div class={"flex flex-col bg-gray-50 dark:bg-gray-900 rounded-xl border #{@color} p-4"}>
+      <div class="text-xs font-medium text-gray-500 dark:text-gray-400">{@label}</div>
       <div class="text-2xl font-bold">{@value}</div>
     </div>
     """
@@ -136,14 +136,13 @@ defmodule ToweropsWeb.TraceLive.Index do
      |> push_patch(to: ~p"/trace")}
   end
 
-  def type_badge_class(:account),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+  def type_badge_class(:account), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
 
   def type_badge_class(:inventory_item), do: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
   def type_badge_class(:site), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
   def type_badge_class(:device), do: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-400"
   def type_badge_class(:access_point), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
-  def type_badge_class(_), do: "text-cool-steel-700 dark:text-cool-steel-300"
+  def type_badge_class(_), do: "text-gray-700 dark:text-gray-300"
 
   def type_badge_label(:account), do: "Account"
   def type_badge_label(:inventory_item), do: "Inventory"
@@ -156,10 +155,9 @@ defmodule ToweropsWeb.TraceLive.Index do
   def status_badge_class("active"), do: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
   def status_badge_class("suspended"), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
 
-  def status_badge_class("cancelled"),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+  def status_badge_class("cancelled"), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
 
-  def status_badge_class(_), do: "text-cool-steel-700 dark:text-cool-steel-300"
+  def status_badge_class(_), do: "text-gray-700 dark:text-gray-300"
 
   @doc false
   def device_status_color(:up), do: "text-green-600 dark:text-green-400"
diff --git a/lib/towerops_web/live/trace_live/index.html.heex b/lib/towerops_web/live/trace_live/index.html.heex
index d005161f..bb8ea5d2 100644
--- a/lib/towerops_web/live/trace_live/index.html.heex
+++ b/lib/towerops_web/live/trace_live/index.html.heex
@@ -21,7 +21,7 @@
 
   <div class="space-y-6">
     <%!-- Search Bar --%>
-    <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
+    <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
       <div class="p-4 sm:p-6">
         <div class="flex items-center gap-3">
           <.icon name="hero-magnifying-glass" class="h-6 w-6 text-gray-400 flex-shrink-0" />
@@ -35,7 +35,7 @@
                   "Search by customer name, IP address, account ID, serial number, site name, or device name..."
                 )
               }
-              class="w-full rounded-field border border-cool-steel-300 bg-cool-steel-50 px-3 py-2 text-sm text-cool-steel-900 placeholder:text-cool-steel-400 focus:border-cerulean-500 focus:ring-1 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-900 dark:text-cool-steel-100 dark:placeholder:text-cool-steel-500 w-full dark:bg-gray-800 dark:border-white/10 dark:text-white"
+              class="w-full rounded-field border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 w-full dark:bg-gray-800 dark:border-white/10 dark:text-white"
               phx-debounce="300"
               autofocus
             />
@@ -43,7 +43,7 @@
           <button
             :if={@query != "" || @trace}
             phx-click="clear"
-            class="btn text-sm !py-1 !px-3 bg-transparent hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700"
+            class="btn text-sm !py-1 !px-3 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-700"
           >
             <.icon name="hero-x-mark" class="h-5 w-5" /> Clear
           </button>
@@ -54,19 +54,19 @@
     <%!-- Search Results --%>
     <div
       :if={@results != [] && !@trace}
-      class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"
+      class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900"
     >
       <div class="p-0">
-        <div class="divide-y divide-cool-steel-200 dark:divide-cool-steel-700 dark:divide-white/10">
+        <div class="divide-y divide-gray-200 dark:divide-gray-700 dark:divide-white/10">
           <button
             :for={result <- @results}
             phx-click="select_result"
             phx-value-type={result.type}
             phx-value-id={result.id}
-            class="w-full flex items-center gap-3 px-4 sm:px-6 py-3 hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50 dark:hover:bg-white/5 text-left transition-colors"
+            class="w-full flex items-center gap-3 px-4 sm:px-6 py-3 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 dark:hover:bg-white/5 text-left transition-colors"
           >
             <span class={[
-              "badge text-xs !px-2 !py-0 font-mono bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300",
+              "badge text-xs !px-2 !py-0 font-mono bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
               type_badge_class(result.type)
             ]}>
               {type_badge_label(result.type)}
@@ -98,7 +98,7 @@
     <%!-- Site Trace View --%>
     <div :if={@trace && @trace_type == :site} class="space-y-4">
       <%!-- Site Info --%>
-      <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
+      <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
         <div class="p-4 sm:p-6">
           <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
             <.icon name="hero-building-office-2" class="h-5 w-5 text-gray-400" />
@@ -123,7 +123,7 @@
       <%!-- Devices at Site --%>
       <div
         :if={length(@trace.devices) > 0}
-        class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"
+        class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900"
       >
         <div class="p-4 sm:p-6">
           <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
@@ -141,7 +141,7 @@
               <tbody>
                 <tr
                   :for={device <- @trace.devices}
-                  class="hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50 dark:hover:bg-white/5"
+                  class="hover:bg-gray-100/50 dark:hover:bg-gray-800/50 dark:hover:bg-white/5"
                 >
                   <td>
                     <.link
@@ -170,7 +170,7 @@
       <%!-- Recent Alerts --%>
       <div
         :if={@trace.alerts != []}
-        class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"
+        class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900"
       >
         <div class="p-4 sm:p-6">
           <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
@@ -179,7 +179,7 @@
           <div class="space-y-2">
             <div
               :for={alert <- @trace.alerts}
-              class="flex items-start gap-3 p-2 rounded-lg hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50 dark:hover:bg-white/5"
+              class="flex items-start gap-3 p-2 rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-800/50 dark:hover:bg-white/5"
             >
               <span class={"mt-1.5 h-2 w-2 rounded-full flex-shrink-0 #{alert_dot(alert)}"}>
               </span>
@@ -219,7 +219,7 @@
       <%!-- Subscriber + Connection --%>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <%!-- Subscriber Info --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
+        <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
             <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-user" class="h-4 w-4 inline" /> Subscriber
@@ -266,7 +266,7 @@
                 </div>
                 <div class="flex items-center gap-2 mt-1">
                   <span class={[
-                    "badge bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300",
+                    "badge bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
                     status_badge_class(@trace.subscriber.status)
                   ]}>
                     {@trace.subscriber.status || "unknown"}
@@ -294,7 +294,7 @@
         </div>
 
         <%!-- Connection / Device Info --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
+        <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
             <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-signal" class="h-4 w-4 inline" /> Connection
@@ -342,7 +342,7 @@
                 </div>
                 <div
                   :if={@trace.access_point}
-                  class="mt-2 pt-2 border-t border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10"
+                  class="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 dark:border-white/10"
                 >
                   <div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1">
                     {t("Preseem AP")}
@@ -368,7 +368,7 @@
       <%!-- QoE Metrics + Peer Impact --%>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <%!-- QoE Metrics --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
+        <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
             <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-chart-bar" class="h-4 w-4 inline" /> QoE Metrics
@@ -398,7 +398,7 @@
                 />
               </div>
               <%= if @trace.qoe_metrics.latest_metric do %>
-                <div class="mt-4 pt-3 border-t border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10">
+                <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 dark:border-white/10">
                   <div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2">
                     {t("Latest Metrics")}
                   </div>
@@ -448,7 +448,7 @@
         </div>
 
         <%!-- Peer Impact --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
+        <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
             <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-users" class="h-4 w-4 inline" /> Peer Impact
@@ -487,7 +487,7 @@
                 </div>
                 <div
                   :if={@trace.peer_impact.peer_aps != []}
-                  class="mt-3 pt-3 border-t border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10"
+                  class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 dark:border-white/10"
                 >
                   <div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2">
                     {t("Peer APs")}
@@ -523,7 +523,7 @@
       </div>
 
       <%!-- Active Alerts --%>
-      <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
+      <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
         <div class="p-4 sm:p-6">
           <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
             <.icon name="hero-bell-alert" class="h-4 w-4 inline" /> Recent Alerts
@@ -534,7 +534,7 @@
               <span class="text-sm font-medium">No alerts — all clear</span>
             </div>
           <% else %>
-            <div class="divide-y divide-cool-steel-200 dark:divide-cool-steel-700 dark:divide-white/10">
+            <div class="divide-y divide-gray-200 dark:divide-gray-700 dark:divide-white/10">
               <div
                 :for={alert <- @trace.alerts}
                 class="py-2 first:pt-0 last:pb-0 flex items-center gap-3"
@@ -563,7 +563,7 @@
                 </span>
                 <span
                   :if={is_nil(alert.resolved_at)}
-                  class="badge text-xs !px-2 !py-0 bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+                  class="badge text-xs !px-2 !py-0 bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
                 >
                   active
                 </span>
@@ -576,7 +576,7 @@
       <%!-- Recent Activity: Config Changes + Insights --%>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <%!-- Config Changes — hidden, feature temporarily disabled --%>
-        <div class="hidden card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
+        <div class="hidden card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
             <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-document-text" class="h-4 w-4 inline" /> Config Changes (24h)
@@ -610,7 +610,7 @@
         </div>
 
         <%!-- Active Insights --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
+        <div class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
             <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-light-bulb" class="h-4 w-4 inline" /> Active Insights
@@ -649,7 +649,7 @@
       <%!-- Inventory Items --%>
       <div
         :if={@trace.inventory_items != []}
-        class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"
+        class="card shadow-sm border border-gray-200 dark:border-gray-700 dark:border-white/10 dark:bg-gray-900"
       >
         <div class="p-4 sm:p-6">
           <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
@@ -669,7 +669,7 @@
               <tbody>
                 <tr
                   :for={item <- @trace.inventory_items}
-                  class="hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50"
+                  class="hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
                 >
                   <td class="font-medium text-gray-900 dark:text-white">{item.name}</td>
                   <td class="font-mono text-sm">{item.ip_address}</td>
@@ -677,7 +677,7 @@
                   <td class="font-mono text-xs">{item.serial_number}</td>
                   <td>
                     <span class={[
-                      "badge text-xs !px-2 !py-0 bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300",
+                      "badge text-xs !px-2 !py-0 bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
                       status_badge_class(item.status)
                     ]}>
                       {item.status}
diff --git a/test/towerops_web/live/config_timeline_live_helpers_test.exs b/test/towerops_web/live/config_timeline_live_helpers_test.exs
index 41f72b4a..60719a19 100644
--- a/test/towerops_web/live/config_timeline_live_helpers_test.exs
+++ b/test/towerops_web/live/config_timeline_live_helpers_test.exs
@@ -5,10 +5,10 @@ defmodule ToweropsWeb.ConfigTimelineLiveHelpersTest do
 
   describe "change_size_class/1" do
     test "> 50 returns error styling" do
-      assert "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400" ==
+      assert "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400" ==
                ConfigTimelineLive.change_size_class(51)
 
-      assert "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400" ==
+      assert "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400" ==
                ConfigTimelineLive.change_size_class(1_000)
     end