diff --git a/wwwroot/shell_theme.css b/wwwroot/shell_theme.css
index 515d39d..9215966 100644
--- a/wwwroot/shell_theme.css
+++ b/wwwroot/shell_theme.css
@@ -78,6 +78,17 @@ body {
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
+/* Ensure theme variables override bricks.css hardcoded values */
+[data-theme="dark"] body {
+  background-color: var(--sage-bg-primary);
+  color: var(--sage-text-primary);
+}
+
+[data-theme="light"] body {
+  background-color: var(--sage-bg-primary);
+  color: var(--sage-text-primary);
+}
+
 /* ===== Shell Layout ===== */
 .sage-shell {
   width: 100%;
@@ -85,6 +96,9 @@ body {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background-color: var(--sage-bg-primary);
+  color: var(--sage-text-primary);
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .sage-topbar {
@@ -695,6 +709,16 @@ body {
   color: var(--sage-brand);
 }
 
+/* ===== Utility Classes ===== */
+.sage-brand-title {
+  color: var(--sage-text-primary);
+  font-weight: bold;
+}
+
+.sage-text-secondary {
+  color: var(--sage-text-secondary);
+}
+
 /* ===== Responsive ===== */
 @media (max-width: 768px) {
   .sage-sidebar {