From 9b79838cc30099fb2ad8ba629fbeb673c57d2d67 Mon Sep 17 00:00:00 2001
From: Mondo Diaz <armando.m.diaz@boeing.com>
Date: Wed, 28 Jan 2026 16:49:50 +0000
Subject: [PATCH] Fix dark theme styling for team pages and add footer
 enhancements

- Update all team page CSS to use correct theme variables (--bg-*, --text-*,
  --border-*, --accent-* instead of non-existent --color-* variables)
- Fix modal, form input, and dropdown backgrounds for dark theme
- Fix UserAutocomplete and TeamSelector dropdown styling
- Center team members and settings page content
- Add orchard logo icon to footer
- Add dot separator between Orchard and tagline in footer
---
 frontend/src/components/Layout.css           |  10 +-
 frontend/src/components/Layout.tsx           |  10 ++
 frontend/src/components/TeamSelector.css     |  38 +++----
 frontend/src/components/UserAutocomplete.css |  28 ++---
 frontend/src/pages/TeamDashboardPage.css     |  55 +++++-----
 frontend/src/pages/TeamMembersPage.css       |  62 ++++++------
 frontend/src/pages/TeamSettingsPage.css      |  74 +++++++-------
 frontend/src/pages/TeamsPage.css             | 101 ++++++++++---------
 8 files changed, 206 insertions(+), 172 deletions(-)

diff --git a/frontend/src/components/Layout.css b/frontend/src/components/Layout.css
index 2333c0f..584719f 100644
--- a/frontend/src/components/Layout.css
+++ b/frontend/src/components/Layout.css
@@ -284,7 +284,11 @@
 .footer-brand {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
+}
+
+.footer-icon {
+  color: var(--accent-primary);
 }
 
 .footer-logo {
@@ -292,6 +296,10 @@
   color: var(--text-primary);
 }
 
+.footer-separator {
+  color: var(--text-muted);
+}
+
 .footer-tagline {
   color: var(--text-secondary);
   font-size: 0.875rem;
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index dea6650..9e2e559 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -218,7 +218,17 @@ function Layout({ children }: LayoutProps) {
       <footer className="footer">
         <div className="container footer-content">
           <div className="footer-brand">
+            <svg className="footer-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6 14 Q6 8 3 8 Q6 4 6 4 Q6 4 9 8 Q6 8 6 14" fill="currentColor" opacity="0.6"/>
+              <rect x="5.25" y="13" width="1.5" height="4" fill="currentColor" opacity="0.6"/>
+              <path d="M12 12 Q12 5 8 5 Q12 1 12 1 Q12 1 16 5 Q12 5 12 12" fill="currentColor"/>
+              <rect x="11.25" y="11" width="1.5" height="5" fill="currentColor"/>
+              <path d="M18 14 Q18 8 15 8 Q18 4 18 4 Q18 4 21 8 Q18 8 18 14" fill="currentColor" opacity="0.6"/>
+              <rect x="17.25" y="13" width="1.5" height="4" fill="currentColor" opacity="0.6"/>
+              <ellipse cx="12" cy="19" rx="9" ry="1.5" fill="currentColor" opacity="0.3"/>
+            </svg>
             <span className="footer-logo">Orchard</span>
+            <span className="footer-separator">·</span>
             <span className="footer-tagline">Content-Addressable Storage</span>
           </div>
           <div className="footer-links">
diff --git a/frontend/src/components/TeamSelector.css b/frontend/src/components/TeamSelector.css
index 3ef4de6..05a8dc2 100644
--- a/frontend/src/components/TeamSelector.css
+++ b/frontend/src/components/TeamSelector.css
@@ -7,10 +7,10 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 0.75rem;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
-  color: var(--color-text);
+  color: var(--text-primary);
   font-size: 0.875rem;
   cursor: pointer;
   transition: all 0.15s ease;
@@ -18,8 +18,8 @@
 }
 
 .team-selector-trigger:hover:not(:disabled) {
-  background: var(--color-bg-tertiary);
-  border-color: var(--color-border-hover);
+  background: var(--bg-tertiary);
+  border-color: var(--border-secondary);
 }
 
 .team-selector-trigger:disabled {
@@ -51,8 +51,8 @@
   right: 0;
   min-width: 240px;
   margin-top: 0.25rem;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   z-index: 100;
@@ -62,7 +62,7 @@
 .team-selector-empty {
   padding: 1rem;
   text-align: center;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .team-selector-empty p {
@@ -71,7 +71,7 @@
 }
 
 .team-selector-create-link {
-  color: var(--color-primary);
+  color: var(--accent-primary);
   font-size: 0.875rem;
   text-decoration: none;
 }
@@ -96,7 +96,7 @@
   padding: 0.5rem 0.75rem;
   background: none;
   border: none;
-  color: var(--color-text);
+  color: var(--text-primary);
   font-size: 0.875rem;
   cursor: pointer;
   text-align: left;
@@ -104,11 +104,11 @@
 }
 
 .team-selector-item:hover {
-  background: var(--color-bg-secondary);
+  background: var(--bg-hover);
 }
 
 .team-selector-item.selected {
-  background: var(--color-primary-bg);
+  background: rgba(16, 185, 129, 0.1);
 }
 
 .team-selector-item-info {
@@ -127,7 +127,7 @@
 .team-selector-item-meta {
   display: block;
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .team-selector-item-role {
@@ -140,24 +140,24 @@
   display: flex;
   justify-content: space-between;
   padding: 0.5rem 0.75rem;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
+  border-top: 1px solid var(--border-primary);
+  background: var(--bg-tertiary);
 }
 
 .team-selector-link {
   font-size: 0.8125rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   text-decoration: none;
 }
 
 .team-selector-link:hover {
-  color: var(--color-text);
+  color: var(--text-primary);
 }
 
 .team-selector-link-primary {
-  color: var(--color-primary);
+  color: var(--accent-primary);
 }
 
 .team-selector-link-primary:hover {
-  color: var(--color-primary-hover);
+  color: var(--accent-primary-hover);
 }
diff --git a/frontend/src/components/UserAutocomplete.css b/frontend/src/components/UserAutocomplete.css
index 42a7921..e334794 100644
--- a/frontend/src/components/UserAutocomplete.css
+++ b/frontend/src/components/UserAutocomplete.css
@@ -10,17 +10,17 @@
 .user-autocomplete__input {
   width: 100%;
   padding: 0.625rem 2.5rem 0.625rem 0.75rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
   font-size: 0.875rem;
 }
 
 .user-autocomplete__input:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
 }
 
 .user-autocomplete__spinner {
@@ -30,8 +30,8 @@
   transform: translateY(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid var(--color-border);
-  border-top-color: var(--color-primary);
+  border: 2px solid var(--border-primary);
+  border-top-color: var(--accent-primary);
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
 }
@@ -47,10 +47,10 @@
   right: 0;
   margin-top: 4px;
   padding: 0.25rem;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-lg);
   z-index: 100;
   max-height: 240px;
   overflow-y: auto;
@@ -69,14 +69,14 @@
 
 .user-autocomplete__option:hover,
 .user-autocomplete__option.selected {
-  background: var(--color-bg-secondary);
+  background: var(--bg-hover);
 }
 
 .user-autocomplete__avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: var(--color-primary);
+  background: var(--accent-primary);
   color: white;
   display: flex;
   align-items: center;
@@ -94,12 +94,12 @@
 
 .user-autocomplete__username {
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--text-primary);
 }
 
 .user-autocomplete__admin-badge {
   font-size: 0.6875rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.025em;
 }
diff --git a/frontend/src/pages/TeamDashboardPage.css b/frontend/src/pages/TeamDashboardPage.css
index 1731ee7..84115e1 100644
--- a/frontend/src/pages/TeamDashboardPage.css
+++ b/frontend/src/pages/TeamDashboardPage.css
@@ -29,12 +29,12 @@
 
 .team-slug {
   font-size: 0.875rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .team-description {
   margin: 0 0 0.5rem;
-  color: var(--color-text-secondary);
+  color: var(--text-secondary);
   font-size: 0.9375rem;
   max-width: 600px;
 }
@@ -63,12 +63,12 @@
 
 /* Table utility classes */
 .text-muted {
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .btn-ghost {
   background: transparent;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   border: none;
   padding: 0.375rem;
   cursor: pointer;
@@ -76,8 +76,8 @@
 }
 
 .btn-ghost:hover {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
 }
 
 .section-footer {
@@ -87,7 +87,7 @@
 
 .view-all-link {
   font-size: 0.875rem;
-  color: var(--color-primary);
+  color: var(--accent-primary);
   text-decoration: none;
 }
 
@@ -108,16 +108,16 @@
 
 .error-state p {
   margin: 0 0 1.5rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .empty-state {
   text-align: center;
   padding: 2rem;
-  background: var(--color-bg-secondary);
-  border: 1px dashed var(--color-border);
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-primary);
   border-radius: var(--radius-md);
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .empty-state p {
@@ -150,29 +150,29 @@
 }
 
 .btn-primary {
-  background: var(--color-primary);
+  background: var(--accent-primary);
   color: white;
 }
 
 .btn-primary:hover {
-  background: var(--color-primary-hover);
+  background: var(--accent-primary-hover);
 }
 
 .btn-secondary {
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-primary);
 }
 
 .btn-secondary:hover {
-  background: var(--color-bg-tertiary);
+  background: var(--bg-hover);
 }
 
 /* Modal */
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -181,19 +181,21 @@
 }
 
 .modal-content {
-  background: #ffffff;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   padding: 1.5rem;
   width: 100%;
   max-width: 480px;
   max-height: 90vh;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-lg);
   overflow-y: auto;
 }
 
 .modal-content h2 {
   margin: 0 0 1.5rem;
   font-size: 1.25rem;
+  color: var(--text-primary);
 }
 
 /* Form */
@@ -206,24 +208,25 @@
   margin-bottom: 0.5rem;
   font-weight: 500;
   font-size: 0.875rem;
+  color: var(--text-primary);
 }
 
 .form-group input[type="text"],
 .form-group textarea {
   width: 100%;
   padding: 0.625rem 0.75rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
   font-size: 0.875rem;
 }
 
 .form-group input:focus,
 .form-group textarea:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-alpha);
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
 }
 
 .form-group textarea {
@@ -246,7 +249,7 @@
 .form-hint {
   display: block;
   font-size: 0.8125rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   margin-top: 0.375rem;
 }
 
diff --git a/frontend/src/pages/TeamMembersPage.css b/frontend/src/pages/TeamMembersPage.css
index 3eb41ce..db5d659 100644
--- a/frontend/src/pages/TeamMembersPage.css
+++ b/frontend/src/pages/TeamMembersPage.css
@@ -1,6 +1,7 @@
 .team-members {
   padding: 1.5rem 0;
   max-width: 800px;
+  margin: 0 auto;
 }
 
 .page-header {
@@ -27,7 +28,7 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: var(--color-primary);
+  background: var(--accent-primary);
   color: white;
   display: flex;
   align-items: center;
@@ -53,34 +54,34 @@
 .you-badge {
   font-size: 0.75rem;
   font-weight: normal;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .member-email {
   font-size: 0.8125rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .text-muted {
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .role-select {
   padding: 0.375rem 0.75rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
   font-size: 0.875rem;
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
   cursor: pointer;
 }
 
 .role-select:focus {
   outline: none;
-  border-color: var(--color-primary);
+  border-color: var(--accent-primary);
 }
 
 /* Messages */
@@ -90,10 +91,10 @@
   justify-content: space-between;
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
-  background: var(--color-error-bg, #fef2f2);
-  border: 1px solid var(--color-error-border, #fecaca);
+  background: var(--error-bg);
+  border: 1px solid var(--error);
   border-radius: var(--radius-md);
-  color: var(--color-error, #dc2626);
+  color: var(--error);
   font-size: 0.875rem;
 }
 
@@ -120,7 +121,7 @@
 
 .error-state p {
   margin: 0 0 1.5rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 /* Modal */
@@ -130,7 +131,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -139,17 +140,19 @@
 }
 
 .modal-content {
-  background: #ffffff;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   padding: 1.5rem;
   width: 100%;
   max-width: 400px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-lg);
 }
 
 .modal-content h2 {
   margin: 0 0 1.5rem;
   font-size: 1.25rem;
+  color: var(--text-primary);
 }
 
 /* Form */
@@ -162,24 +165,25 @@
   margin-bottom: 0.375rem;
   font-weight: 500;
   font-size: 0.875rem;
+  color: var(--text-primary);
 }
 
 .form-group input,
 .form-group select {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
   font-size: 0.9375rem;
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
 }
 
 .form-group input:focus,
 .form-group select:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px var(--color-primary-bg);
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
 }
 
 .form-actions {
@@ -210,22 +214,22 @@
 }
 
 .btn-primary {
-  background: var(--color-primary);
+  background: var(--accent-primary);
   color: white;
 }
 
 .btn-primary:hover:not(:disabled) {
-  background: var(--color-primary-hover);
+  background: var(--accent-primary-hover);
 }
 
 .btn-secondary {
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-primary);
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background: var(--color-bg-tertiary);
+  background: var(--bg-hover);
 }
 
 .btn-icon {
@@ -234,10 +238,10 @@
 
 .btn-danger-ghost {
   background: transparent;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .btn-danger-ghost:hover:not(:disabled) {
-  background: var(--color-error-bg, #fef2f2);
-  color: var(--color-error, #dc2626);
+  background: var(--error-bg);
+  color: var(--error);
 }
diff --git a/frontend/src/pages/TeamSettingsPage.css b/frontend/src/pages/TeamSettingsPage.css
index e75b461..9c1909b 100644
--- a/frontend/src/pages/TeamSettingsPage.css
+++ b/frontend/src/pages/TeamSettingsPage.css
@@ -1,6 +1,7 @@
 .team-settings {
   padding: 1.5rem 0;
   max-width: 640px;
+  margin: 0 auto;
 }
 
 .team-settings h1 {
@@ -13,8 +14,8 @@
 }
 
 .form-section {
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   padding: 1.5rem;
   margin-bottom: 1.5rem;
@@ -23,6 +24,7 @@
 .form-section h2 {
   margin: 0 0 1rem;
   font-size: 1.125rem;
+  color: var(--text-primary);
 }
 
 .form-group {
@@ -34,29 +36,30 @@
   margin-bottom: 0.375rem;
   font-weight: 500;
   font-size: 0.875rem;
+  color: var(--text-primary);
 }
 
 .form-group input,
 .form-group textarea {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
   font-size: 0.9375rem;
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
 }
 
 .form-group input:focus,
 .form-group textarea:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px var(--color-primary-bg);
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
 }
 
 .input-disabled {
-  background: var(--color-bg-tertiary) !important;
-  color: var(--color-text-muted) !important;
+  background: var(--bg-elevated) !important;
+  color: var(--text-muted) !important;
   cursor: not-allowed;
 }
 
@@ -64,23 +67,23 @@
   display: block;
   margin-top: 0.25rem;
   font-size: 0.8125rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 /* Danger zone */
 .danger-zone {
-  border-color: var(--color-error-border, #fecaca);
-  background: var(--color-error-bg, #fef2f2);
+  border-color: var(--error);
+  background: var(--error-bg);
 }
 
 .danger-zone h2 {
-  color: var(--color-error, #dc2626);
+  color: var(--error);
 }
 
 .danger-warning {
   margin: 0 0 1rem;
   font-size: 0.875rem;
-  color: var(--color-text-secondary);
+  color: var(--text-secondary);
 }
 
 /* Messages */
@@ -90,10 +93,10 @@
   justify-content: space-between;
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
-  background: var(--color-error-bg, #fef2f2);
-  border: 1px solid var(--color-error-border, #fecaca);
+  background: var(--error-bg);
+  border: 1px solid var(--error);
   border-radius: var(--radius-md);
-  color: var(--color-error, #dc2626);
+  color: var(--error);
   font-size: 0.875rem;
 }
 
@@ -110,10 +113,10 @@
 .success-message {
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
-  background: var(--color-success-bg, #f0fdf4);
-  border: 1px solid var(--color-success-border, #86efac);
+  background: var(--success-bg);
+  border: 1px solid var(--success);
   border-radius: var(--radius-md);
-  color: var(--color-success, #16a34a);
+  color: var(--success);
   font-size: 0.875rem;
 }
 
@@ -130,7 +133,7 @@
 
 .error-state p {
   margin: 0 0 1.5rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 /* Modal */
@@ -140,7 +143,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -149,33 +152,36 @@
 }
 
 .modal-content {
-  background: #ffffff;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   padding: 1.5rem;
   width: 100%;
   max-width: 400px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-lg);
 }
 
 .modal-content h2 {
   margin: 0 0 1rem;
   font-size: 1.25rem;
-  color: var(--color-error, #dc2626);
+  color: var(--error);
 }
 
 .modal-content p {
   margin: 0 0 1rem;
   font-size: 0.9375rem;
-  color: var(--color-text-secondary);
+  color: var(--text-secondary);
 }
 
 .delete-confirm-input {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
   font-size: 0.9375rem;
   margin-bottom: 1rem;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
 }
 
 .form-actions {
@@ -205,26 +211,26 @@
 }
 
 .btn-primary {
-  background: var(--color-primary);
+  background: var(--accent-primary);
   color: white;
 }
 
 .btn-primary:hover:not(:disabled) {
-  background: var(--color-primary-hover);
+  background: var(--accent-primary-hover);
 }
 
 .btn-secondary {
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-primary);
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background: var(--color-bg-tertiary);
+  background: var(--bg-hover);
 }
 
 .btn-danger {
-  background: var(--color-error, #dc2626);
+  background: var(--error);
   color: white;
 }
 
diff --git a/frontend/src/pages/TeamsPage.css b/frontend/src/pages/TeamsPage.css
index 7febf8f..ed0659e 100644
--- a/frontend/src/pages/TeamsPage.css
+++ b/frontend/src/pages/TeamsPage.css
@@ -30,28 +30,28 @@
   left: 0.875rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   pointer-events: none;
 }
 
 .teams-search__input {
   width: 100%;
   padding: 0.625rem 2.5rem 0.625rem 2.75rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--bg-primary);
+  color: var(--text-primary);
   font-size: 0.875rem;
 }
 
 .teams-search__input:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
 }
 
 .teams-search__input::placeholder {
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .teams-search__clear {
@@ -63,7 +63,7 @@
   border: none;
   padding: 0.375rem;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -71,8 +71,8 @@
 }
 
 .teams-search__clear:hover {
-  color: var(--color-text);
-  background: var(--color-bg-secondary);
+  color: var(--text-primary);
+  background: var(--bg-secondary);
 }
 
 /* Error */
@@ -82,10 +82,10 @@
   justify-content: space-between;
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
-  background: var(--color-error-bg, #fef2f2);
-  border: 1px solid var(--color-error-border, #fecaca);
+  background: var(--error-bg);
+  border: 1px solid var(--error);
   border-radius: var(--radius-md);
-  color: var(--color-error, #dc2626);
+  color: var(--error);
   font-size: 0.875rem;
 }
 
@@ -106,14 +106,14 @@
   align-items: center;
   gap: 1rem;
   padding: 4rem 2rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .teams-loading__spinner {
   width: 32px;
   height: 32px;
-  border: 3px solid var(--color-border);
-  border-top-color: var(--color-primary);
+  border: 3px solid var(--border-primary);
+  border-top-color: var(--accent-primary);
   border-radius: 50%;
   animation: teams-spin 0.8s linear infinite;
 }
@@ -126,13 +126,13 @@
 .teams-empty-state {
   text-align: center;
   padding: 4rem 2rem;
-  background: var(--color-bg-secondary);
+  background: var(--bg-secondary);
   border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-primary);
 }
 
 .teams-empty-icon {
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   margin-bottom: 1rem;
 }
 
@@ -143,7 +143,7 @@
 
 .teams-empty-state p {
   margin: 0 0 1.5rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 /* Table cell styles */
@@ -156,21 +156,21 @@
 
 .team-name-link {
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--text-primary);
   text-decoration: none;
 }
 
 .team-name-link:hover {
-  color: var(--color-primary);
+  color: var(--accent-primary);
 }
 
 .team-slug {
   font-size: 0.8125rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .team-description-cell {
-  color: var(--color-text-secondary);
+  color: var(--text-secondary);
   max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -178,7 +178,7 @@
 }
 
 .text-muted {
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 /* Modal */
@@ -188,7 +188,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -197,11 +197,12 @@
 }
 
 .modal-content {
-  background: #ffffff;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   width: 100%;
   max-width: 480px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-lg);
   overflow: hidden;
 }
 
@@ -210,13 +211,14 @@
   justify-content: space-between;
   align-items: center;
   padding: 1.25rem 1.5rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--border-primary);
 }
 
 .modal-header h2 {
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
+  color: var(--text-primary);
 }
 
 .modal-close {
@@ -224,14 +226,14 @@
   border: none;
   padding: 0.25rem;
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   display: flex;
   border-radius: var(--radius-sm);
 }
 
 .modal-close:hover {
-  color: var(--color-text);
-  background: var(--color-bg-secondary);
+  color: var(--text-primary);
+  background: var(--bg-hover);
 }
 
 .modal-content form {
@@ -248,29 +250,30 @@
   margin-bottom: 0.375rem;
   font-weight: 500;
   font-size: 0.875rem;
+  color: var(--text-primary);
 }
 
 .form-group .optional {
   font-weight: 400;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .form-group input,
 .form-group textarea {
   width: 100%;
   padding: 0.625rem 0.75rem;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
   font-size: 0.875rem;
-  background: var(--color-bg);
-  color: var(--color-text);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
 }
 
 .form-group input:focus,
 .form-group textarea:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
 }
 
 .input-with-prefix {
@@ -282,11 +285,11 @@
   display: flex;
   align-items: center;
   padding: 0 0.75rem;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-primary);
   border-right: none;
   border-radius: var(--radius-md) 0 0 var(--radius-md);
-  color: var(--color-text-muted);
+  color: var(--text-muted);
   font-size: 0.875rem;
 }
 
@@ -298,7 +301,7 @@
   display: block;
   margin-top: 0.25rem;
   font-size: 0.75rem;
-  color: var(--color-text-muted);
+  color: var(--text-muted);
 }
 
 .form-actions {
@@ -307,7 +310,7 @@
   gap: 0.75rem;
   margin-top: 1.5rem;
   padding-top: 1rem;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--border-primary);
 }
 
 /* Buttons */
@@ -330,22 +333,22 @@
 }
 
 .btn-primary {
-  background: var(--color-primary);
+  background: var(--accent-primary);
   color: white;
 }
 
 .btn-primary:hover:not(:disabled) {
-  background: var(--color-primary-hover);
+  background: var(--accent-primary-hover);
 }
 
 .btn-secondary {
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-primary);
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background: var(--color-bg-tertiary);
+  background: var(--bg-hover);
 }
 
 /* Responsive */