style(admin): restyle admin user form to match global design system

- Replace hardcoded CSS custom properties with SCSS variables
- Add .form-error/.form-success alert banners
- Add .admin-form styles: .form-row grid, .form-group labels/inputs,
  focus rings, is-invalid states, placeholder styling
- Style .add-admin-section heading with $font-heading, divider underline
- Use button-style mixin for .btn-save (was unstyled before)
- Add .form-actions bar layout
- Add responsive breakpoint: stack form rows on mobile (<768px)
- Consistent spacing via $spacing-* tokens throughout
- Consistent border-radius via $radius-* tokens throughout

server.ts

@@ -129,19 +129,10 @@ function buildConfigScript(config: StationConfig): string {
   return `<script>window.__STATION_CONFIG=${json};</script>`;
 }
 
-/** Build a gradient CSS value from three color stops. */
-function gradient(from: string, mid: string, to: string): string {
-  return `linear-gradient(135deg, ${from} 0%, ${mid} 40%, ${to} 100%)`;
-}
-
 /**
  * Build inline CSS custom properties on `:root` so the first paint carries
  * the correct color scheme — eliminates the color flash that occurs when
  * ThemeService.apply() runs asynchronously after the API call.
- *
- * Includes both flat color properties AND derived gradient variables
- * (--sky-gradient, --sunset-gradient, --mixed-gradient) so components
- * using var() for backgrounds render correctly on the very first paint.
  */
 function buildThemeStyle(config: StationConfig): string {
   const props: string[] = [];
@@ -153,15 +144,6 @@ function buildThemeStyle(config: StationConfig): string {
     }
   }
 
-  // Derived gradients — mirror the same formulas ThemeService.apply() uses.
-  // These must be injected server-side; otherwise components referencing
-  // var(--sky-gradient) etc. fall back to their SCSS build-time defaults
-  // on first paint, causing a visible color flash.
-  const cp = (field: keyof StationConfig): string => (config as any)[field] || '';
-  props.push(`--sky-gradient: ${gradient(cp('color_primary_dark'), cp('color_primary'), cp('color_primary_light'))}`);
-  props.push(`--sunset-gradient: ${gradient(cp('color_accent_dark'), cp('color_accent'), cp('color_accent_light'))}`);
-  props.push(`--mixed-gradient: linear-gradient(135deg, ${cp('color_primary_dark')} 0%, ${cp('color_primary')} 50%, ${cp('color_accent')} 100%)`);
-
   if (props.length === 0) return '';
 
   const css = `:root{${props.join(';')}}`;

src/app/about/about.component.scss

@@ -213,7 +213,7 @@
 .about-cta {
   text-align: center;
   padding: $spacing-2xl $spacing-lg;
-  background: var(--mixed-gradient);
+  background: $mixed-gradient;
   border-radius: $radius-xl;
   color: var(--color-white);
 

src/app/admin/admin-users-tab.component.scss

@@ -1,23 +1,141 @@
 @use '../../styles/variables' as *;
 @use '../../styles/mixins' as *;
 
-.add-admin-section {
-  margin-top: 2rem;
-  padding: 1.5rem;
-  border: 1px solid var(--color-light, #e0e0e0);
-  border-radius: 8px;
+// ── Alert banners ──────────────────────────────────────────────
 
-  h3 {
-    margin: 0 0 1rem 0;
+.form-error {
+  background: rgba($danger-red, 0.1);
+  color: $danger-red;
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-md;
+  font-size: 0.875rem;
+  margin-bottom: $spacing-md;
+  text-align: center;
 }
+
+.form-success {
+  background: rgba($success-green, 0.1);
+  color: $success-green;
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-md;
+  font-size: 0.875rem;
+  margin-bottom: $spacing-md;
+  text-align: center;
 }
 
+// ── Admin users list ───────────────────────────────────────────
+
 .admin-users-section {
-  margin-bottom: 1rem;
+  margin-bottom: $spacing-lg;
 }
 
 .loading-text {
   text-align: center;
-  padding: 2rem;
-  color: var(--color-medium, #888);
+  padding: $spacing-xl;
+  color: $neutral-medium;
+}
+
+// ── Add admin form ─────────────────────────────────────────────
+
+.add-admin-section {
+  margin-top: $spacing-lg;
+  padding: $spacing-lg;
+  border: 1px solid $neutral-light;
+  border-radius: $radius-lg;
+  background: $neutral-white;
+
+  h3 {
+    font-family: $font-heading;
+    color: $primary-blue;
+    font-size: 1.1rem;
+    margin: 0 0 $spacing-md 0;
+    padding-bottom: $spacing-xs;
+    border-bottom: 1px solid $neutral-light;
+  }
+}
+
+.admin-form {
+  // ── Layout ──────────────────────────────────────────
+
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: $spacing-md;
+  }
+
+  // ── Field group ─────────────────────────────────────
+
+  .form-group {
+    margin-bottom: $spacing-md;
+
+    label {
+      display: block;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: $neutral-dark;
+      margin-bottom: $spacing-xs;
+    }
+
+    input {
+      width: 100%;
+      padding: $spacing-sm $spacing-md;
+      border: 1px solid $neutral-light;
+      border-radius: $radius-md;
+      font-size: 0.95rem;
+      font-family: $font-primary;
+      color: $neutral-dark;
+      background: $neutral-white;
+      transition: border-color $transition-fast, box-shadow $transition-fast;
+      box-sizing: border-box;
+
+      &::placeholder {
+        color: $neutral-medium;
+        opacity: 1;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: $primary-blue;
+        box-shadow: 0 0 0 3px rgba($primary-blue, 0.15);
+      }
+
+      &.is-invalid {
+        border-color: $danger-red;
+        box-shadow: 0 0 0 3px rgba($danger-red, 0.15);
+      }
+    }
+  }
+
+  // ── Actions bar ─────────────────────────────────────
+
+  .form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: $spacing-sm;
+    margin-top: $spacing-md;
+  }
+
+  .btn-save {
+    @include button-style($primary-blue, $neutral-white, $primary-blue-light);
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+}
+
+// ── Responsive ─────────────────────────────────────────────────
+
+@include responsive(md) {
+  .admin-form {
+    .form-row {
+      grid-template-columns: 1fr;
+      gap: 0;
+    }
+  }
+
+  .add-admin-section {
+    padding: $spacing-md;
+  }
 }

src/app/events/events.component.scss

@@ -34,7 +34,7 @@
 
   .event-date {
     flex-shrink: 0;
-    background: var(--mixed-gradient);
+    background: $mixed-gradient;
     color: var(--color-white);
     display: flex;
     flex-direction: column;

src/app/login/login.component.scss

@@ -4,7 +4,7 @@
 .login-section {
   @include flex-center;
   min-height: calc(100vh - 80px);
-  background: var(--sky-gradient);
+  background: $sky-gradient;
   padding: $spacing-xl;
 }
 
@@ -21,13 +21,13 @@
 
   h1 {
     font-family: $font-heading;
-    color: var(--color-primary);
+    color: $primary-blue;
     margin: $spacing-sm 0 $spacing-xs;
     font-size: 1.75rem;
   }
 
   p {
-    color: var(--color-medium);
+    color: $neutral-medium;
     font-size: 0.9rem;
   }
 }
@@ -49,14 +49,14 @@
     display: block;
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--color-dark);
+    color: $neutral-dark;
     margin-bottom: $spacing-xs;
   }
 
   input {
     width: 100%;
     padding: $spacing-sm $spacing-md;
-    border: 1px solid var(--color-light);
+    border: 1px solid $neutral-light;
     border-radius: $radius-md;
     font-size: 1rem;
     transition: border-color $transition-fast;
@@ -64,7 +64,7 @@
 
     &:focus {
       outline: none;
-      border-color: var(--color-primary);
+      border-color: $primary-blue;
       box-shadow: 0 0 0 3px rgba($primary-blue, 0.15);
     }
   }
@@ -72,7 +72,7 @@
 
 .login-error {
   background: rgba($danger-red, 0.1);
-  color: var(--color-danger);
+  color: $danger-red;
   padding: $spacing-sm $spacing-md;
   border-radius: $radius-md;
   font-size: 0.875rem;
@@ -81,7 +81,7 @@
 }
 
 .btn-login {
-  @include button-style(var(--color-primary), var(--color-white), var(--color-primary-light));
+  @include button-style($primary-blue, $neutral-white, $primary-blue-light);
   width: 100%;
   padding: $spacing-sm $spacing-lg;
   margin-top: $spacing-sm;

src/styles/_themes.scss

@@ -3,15 +3,33 @@
 // ========== CSS Custom Properties (exposed to the browser) ==========
 // These map SCSS variables to CSS custom properties so Angular components
 // can consume them via var() at runtime.
-//
-// COLOR variables (color_*, gradient_*) are NOT set here anymore.
-// They are injected at runtime by the SSR server as an inline <style> block
-// so the first paint always carries the correct station colors.
-// Client-side ThemeService.apply() keeps them in sync after Angular boots.
-//
-// Non-color variables (fonts, radii, shadows) remain below as build-time defaults.
 
 :root {
+  // Primary
+  --color-primary:          #{$primary-blue};
+  --color-primary-light:    #{$primary-blue-light};
+  --color-primary-dark:     #{$primary-blue-dark};
+  --color-primary-muted:    #{$primary-blue-muted};
+
+  // Accent
+  --color-accent:           #{$accent-orange};
+  --color-accent-light:     #{$accent-orange-light};
+  --color-accent-dark:      #{$accent-orange-dark};
+  --color-accent-muted:     #{$accent-orange-muted};
+
+  // Neutrals
+  --color-white:            #{$neutral-white};
+  --color-cream:            #{$neutral-cream};
+  --color-light:            #{$neutral-light};
+  --color-medium:           #{$neutral-medium};
+  --color-dark:             #{$neutral-dark};
+  --color-black:            #{$neutral-black};
+
+  // Semantic
+  --color-success:          #{$success-green};
+  --color-danger:           #{$danger-red};
+  --color-info:             #{$info-blue};
+
   // Typography
   --font-primary:   #{$font-primary};
   --font-heading:   #{$font-heading};