Get custom theme colors working

Introduces _theme-colors.scss with generated palettes and integrates them into custom-theme.scss for both light and dark themes. Removes stepper icon styles from performance-info.component.css and moves them to custom-theme.scss for better maintainability and consistency.

src/custom-theme.scss

@@ -5,6 +5,33 @@
 // Learn more about theming and how to use it for your application's
 // custom components at https://material.angular.dev/guide/theming
 @use '@angular/material' as mat;
+@use './_theme-colors' as theme-colors;
+
+// Light Theme
+html {
+  color-scheme: light;
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: theme-colors.$primary-palette,
+      tertiary: theme-colors.$tertiary-palette,
+    ),
+  ));
+}
+
+// Dark Theme
+html.dark {
+  color-scheme: dark;
+  @include mat.theme((
+    color: (
+      theme-type: dark,
+      primary: theme-colors.$primary-palette,
+      tertiary: theme-colors.$tertiary-palette,
+    ),
+  ));
+}
+
+
 
 @include mat.progress-bar-overrides((
   active-indicator-color: white,
@@ -34,16 +61,9 @@
   backdrop-filter: blur(2px);
 }
 
-
-html {
-  @include mat.theme((
-    color: (
-      primary: mat.$azure-palette,
-      tertiary: mat.$blue-palette,
-    ),
-    typography: Roboto,
-    density: 0,
-  ));
+.mat-step-header .mat-step-icon:not(.mat-step-icon-selected):not(.mat-step-icon-completed) {
+  background-color: #ccc;
+  color: white;
 }
 
 body {