diff --git a/transmittal/css/base.css b/transmittal/css/base.css
index fe0d378..66f3c4f 100644
--- a/transmittal/css/base.css
+++ b/transmittal/css/base.css
@@ -107,49 +107,13 @@
         border-bottom-color: #86efac;
     }
 
-    /* Owner/Project names area and inline bg-white / bg-gray-50 utility classes */
-    @media (prefers-color-scheme: dark) {
-        :root:not([data-theme="light"]) .header-names {
-            background-color: var(--bg-secondary) !important;
-            border-color: var(--border) !important;
-        }
-        :root:not([data-theme="light"]) .text-gray-700 { color: var(--text-muted) !important; }
-        :root:not([data-theme="light"]) .bg-white  { background-color: var(--bg) !important; }
-        :root:not([data-theme="light"]) .bg-gray-50 { background-color: var(--bg-secondary) !important; }
-        :root:not([data-theme="light"]) .bg-gray-100 { background-color: var(--bg-secondary) !important; }
-        :root:not([data-theme="light"]) .border-gray-100,
-        :root:not([data-theme="light"]) .border-gray-200,
-        :root:not([data-theme="light"]) .border-gray-300 { border-color: var(--border) !important; }
-        :root:not([data-theme="light"]) .text-gray-900 { color: var(--text) !important; }
-    }
-    [data-theme="dark"] .header-names {
-        background-color: var(--bg-secondary) !important;
-        border-color: var(--border) !important;
-    }
-    [data-theme="dark"] .text-gray-700 { color: var(--text-muted) !important; }
-    [data-theme="dark"] .bg-white  { background-color: var(--bg) !important; }
-    [data-theme="dark"] .bg-gray-50 { background-color: var(--bg-secondary) !important; }
-    [data-theme="dark"] .bg-gray-100 { background-color: var(--bg-secondary) !important; }
-    [data-theme="dark"] .border-gray-100,
-    [data-theme="dark"] .border-gray-200,
-    [data-theme="dark"] .border-gray-300 { border-color: var(--border) !important; }
-    [data-theme="dark"] .text-gray-900 { color: var(--text) !important; }
-
-    /* Filter inputs in table column headers */
-    @media (prefers-color-scheme: dark) {
-        :root:not([data-theme="light"]) .table-filter-input {
-            background-color: var(--bg);
-            color: var(--text);
-            border-color: var(--border);
-        }
-        :root:not([data-theme="light"]) .table-header__caption { color: var(--text-muted); }
-        :root:not([data-theme="light"]) .focus\:bg-white:focus { background-color: var(--bg) !important; }
-    }
-    [data-theme="dark"] .table-filter-input {
-        background-color: var(--bg);
-        color: var(--text);
-        border-color: var(--border);
-    }
-    [data-theme="dark"] .table-header__caption { color: var(--text-muted); }
-    [data-theme="dark"] .focus\:bg-white:focus { background-color: var(--bg) !important; }
+    /* Note: dark-mode overrides for .bg-white / .bg-gray-* / .text-gray-*
+       / .border-gray-* and .header-names used to live here as a 17-line
+       block of !important rules to fight hardcoded colors in
+       transmittal/css/utilities.css. The utility classes were tokenized
+       (var(--bg), var(--bg-secondary), var(--text), var(--text-muted),
+       var(--border)) so the cascade now does the right thing in both
+       themes without per-class overrides. .table-filter-input is unused
+       (no element references it; .column-filter from shared is used
+       instead) and was likewise dropped. */
 }
diff --git a/transmittal/css/utilities.css b/transmittal/css/utilities.css
index 6f19536..8b8ea54 100644
--- a/transmittal/css/utilities.css
+++ b/transmittal/css/utilities.css
@@ -16,11 +16,15 @@
 .text-2xl { font-size: 1.5rem; line-height: 2rem; }
 .text-\[12px\] { font-size: 12px; line-height: 1.4; }
 .text-\[10px\] { font-size: 10px; line-height: 1.3; }
-.text-gray-900 { color: #111827; }
-.text-gray-700 { color: #374151; }
-.text-gray-600 { color: #4b5563; }
-.text-gray-500 { color: #6b7280; }
-.text-gray-400 { color: #9ca3af; }
+/* Gray-scale text classes are theme-encoding — they map to shared
+   tokens so dark mode swaps automatically without per-class overrides.
+   The named-color text classes (.text-blue-600/-green-600/-red-600)
+   carry semantic meaning (link / success / danger) and stay hardcoded. */
+.text-gray-900 { color: var(--text); }
+.text-gray-700 { color: var(--text-muted); }
+.text-gray-600 { color: var(--text-muted); }
+.text-gray-500 { color: var(--text-muted); }
+.text-gray-400 { color: var(--text-muted); }
 .text-blue-600 { color: #2563eb; }
 .text-green-600 { color: #16a34a; }
 .text-red-600 { color: #dc2626; }
@@ -29,20 +33,20 @@
 .leading-6 { line-height: 1.5rem; }
 .leading-snug { line-height: 1.375rem; }
 
-/* Backgrounds */
-.bg-white { background-color: #ffffff; }
+/* Backgrounds — gray-scale classes map to shared tokens. */
+.bg-white { background-color: var(--bg); }
 .bg-transparent { background-color: transparent; }
-.bg-gray-50 { background-color: #f9fafb; }
-.bg-gray-100 { background-color: #f3f4f6; }
+.bg-gray-50 { background-color: var(--bg-secondary); }
+.bg-gray-100 { background-color: var(--bg-secondary); }
 
-/* Borders */
-.border { border: 1px solid #d1d5db; }
+/* Borders — gray-scale border classes map to the shared token. */
+.border { border: 1px solid var(--border); }
 .border-0 { border: 0; }
-.border-b { border-bottom: 1px solid #d1d5db; }
-.border-t { border-top: 1px solid #d1d5db; }
-.border-gray-300 { border-color: #d1d5db; }
-.border-gray-200 { border-color: #e5e7eb; }
-.border-gray-100 { border-color: #f3f4f6; }
+.border-b { border-bottom: 1px solid var(--border); }
+.border-t { border-top: 1px solid var(--border); }
+.border-gray-300 { border-color: var(--border); }
+.border-gray-200 { border-color: var(--border); }
+.border-gray-100 { border-color: var(--border); }
 .rounded-none { border-radius: 0; }
 .rounded-sm { border-radius: 0.125rem; }
 .rounded { border-radius: 0.25rem; }
@@ -129,14 +133,14 @@
 .border-red-500 { border-color: #ef4444 !important; }
 
 /* Hover & focus states */
-.hover\:bg-gray-50:hover { background-color: #f9fafb; }
-.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
+.hover\:bg-gray-50:hover { background-color: var(--bg-hover); }
+.hover\:bg-gray-100:hover { background-color: var(--bg-hover); }
 .hover\:underline:hover { text-decoration: underline; }
 .focus\:outline-none:focus { outline: none; }
 .focus\:border-blue-400:focus { border-color: #60a5fa; }
 .focus\:ring-1:focus { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35); }
 .focus\:ring-blue-400:focus { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45); }
-.focus\:bg-white:focus { background-color: #ffffff; }
+.focus\:bg-white:focus { background-color: var(--bg); }
 .disabled\:pointer-events-none:disabled { pointer-events: none; }
 
 /* Table helpers */