src/styles/_themes.scss

@@ -3,33 +3,15 @@
 // ========== 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};