adds color themeing support to the site

src/app/admin/admin.component.html

@@ -37,6 +37,11 @@
         [class.active]="activeTab() === 'station'"
         (click)="activeTab.set('station')"
       >Station</button>
+      <button
+        class="tab-btn"
+        [class.active]="activeTab() === 'theme'"
+        (click)="activeTab.set('theme'); onTabChanged()"
+      >Theme</button>
       <button
         class="tab-btn"
         [class.active]="activeTab() === 'underwriters'"
@@ -318,6 +323,83 @@
       }
     }
 
+    <!-- Theme Tab -->
+    @if (activeTab() === 'theme') {
+      <div class="tab-content theme-panel">
+        <div class="tab-toolbar">
+          <h2>Color Theme</h2>
+        </div>
+
+        <div class="theme-harmony-bar">
+          <div class="harmony-info">
+            <span class="harmony-label">Harmony:</span>
+            <span class="harmony-rule">{{ getHarmonyLabel() }}</span>
+          </div>
+          <label class="auto-variants-toggle">
+            <input
+              type="checkbox"
+              [(ngModel)]="themeAutoVariants"
+            >
+            Auto-generate variants
+          </label>
+        </div>
+
+        @if (themeSaveSuccess) {
+          <div class="theme-message theme-success">{{ themeSaveSuccess }}</div>
+        }
+        @if (themeSaveError) {
+          <div class="theme-message theme-error">{{ themeSaveError }}</div>
+        }
+
+        <!-- Color grid -->
+        <div class="color-grid">
+          @for (role of colorRoles; track role.field) {
+            <div class="color-card" [class.has-issue]="hasHarmonyIssue(role.field)">
+              <div class="color-swatch" [style.background]="themeColors[role.field]">
+                <input
+                  type="color"
+                  [value]="themeColors[role.field]"
+                  (input)="onThemeColorChange(role.field, $event.target.value)"
+                >
+              </div>
+              <div class="color-info">
+                <span class="color-name">{{ role.label }}</span>
+                <span class="color-hex">{{ themeColors[role.field] }}</span>
+              </div>
+              <div class="color-status">
+                @if (hasHarmonyIssue(role.field)) {
+                  <span class="harmony-warn" title="Not harmonious — click Auto-Fix to correct">⚠</span>
+                } @else if (role.group !== 'neutral') {
+                  <span class="harmony-ok">✓</span>
+                }
+              </div>
+            </div>
+          }
+        </div>
+
+        <div class="theme-actions">
+          <button
+            type="button"
+            class="btn btn-outline-theme"
+            (click)="resetTheme()"
+          >Reset to Defaults</button>
+          <button
+            type="button"
+            class="btn btn-outline-theme"
+            (click)="autoFixTheme()"
+          >Auto-Fix Harmony</button>
+          <button
+            type="button"
+            class="btn btn-save-theme"
+            (click)="saveTheme()"
+            [disabled]="themeSaving"
+          >
+            {{ themeSaving ? 'Saving…' : 'Save Theme' }}
+          </button>
+        </div>
+      </div>
+    }
+
     <!-- Underwriters Tab -->
     @if (activeTab() === 'underwriters') {
       @if (underwriters$ | async; as underwriters) {