additional colors under admin control

src/app/admin/admin.component.ts

@@ -55,6 +55,10 @@ interface ThemeColorState {
   color_success: string;
   color_danger: string;
   color_info: string;
+  color_white: string;
+  color_light: string;
+  color_medium: string;
+  color_black: string;
   [key: string]: string;
 }
 
@@ -143,6 +147,10 @@ export class AdminComponent implements OnInit {
     color_success: '#4a9e4f',
     color_danger: '#c83030',
     color_info: '#3a8abf',
+    color_white: '#ffffff',
+    color_light: '#f0ebe3',
+    color_medium: '#8a8580',
+    color_black: '#1a1816',
   };
 
   showShowForm = false;
@@ -417,6 +425,10 @@ export class AdminComponent implements OnInit {
       color_success: config.color_success || this.themeDefaults.color_success,
       color_danger: config.color_danger || this.themeDefaults.color_danger,
       color_info: config.color_info || this.themeDefaults.color_info,
+      color_white: config.color_white || this.themeDefaults.color_white,
+      color_light: config.color_light || this.themeDefaults.color_light,
+      color_medium: config.color_medium || this.themeDefaults.color_medium,
+      color_black: config.color_black || this.themeDefaults.color_black,
     };
     this.themeSaveSuccess = '';
     this.themeSaveError = '';

src/app/interfaces/station-config.ts

@@ -37,4 +37,8 @@ export interface StationConfig {
   color_success: string;
   color_danger: string;
   color_info: string;
+  color_white: string;
+  color_light: string;
+  color_medium: string;
+  color_black: string;
 }

src/app/services/station-config.service.ts

@@ -46,6 +46,10 @@ const DEFAULT_CONFIG: StationConfig = {
   color_success: '#4a9e4f',
   color_danger: '#c83030',
   color_info: '#3a8abf',
+  color_white: '#ffffff',
+  color_light: '#f0ebe3',
+  color_medium: '#8a8580',
+  color_black: '#1a1816',
 };
 
 @Injectable({

src/app/services/theme.service.ts

@@ -17,6 +17,10 @@ const COLOR_MAP: ReadonlyArray<{ field: keyof StationConfig; prop: string }> = [
   { field: 'color_success', prop: '--color-success' },
   { field: 'color_danger', prop: '--color-danger' },
   { field: 'color_info', prop: '--color-info' },
+  { field: 'color_white', prop: '--color-white' },
+  { field: 'color_light', prop: '--color-light' },
+  { field: 'color_medium', prop: '--color-medium' },
+  { field: 'color_black', prop: '--color-black' },
 ];
 
 /** Build a gradient CSS value from three color stops. */

src/app/utils/color-harmony.ts

@@ -253,6 +253,10 @@ export const COLOR_ROLES: readonly ColorRole[] = [
   { field: 'color_success', label: 'Success', group: 'semantic' },
   { field: 'color_danger', label: 'Danger', group: 'semantic' },
   { field: 'color_info', label: 'Info', group: 'semantic' },
+  { field: 'color_white', label: 'White', group: 'neutral' },
+  { field: 'color_light', label: 'Light', group: 'neutral' },
+  { field: 'color_medium', label: 'Medium', group: 'neutral' },
+  { field: 'color_black', label: 'Black', group: 'neutral' },
 ] as const;
 
 /**