WEB-669 fix: Replace hardcoded colors with CSS variables for dark mode support

src/app/account-transfers/make-account-transfers/make-account-transfers.component.scss

@@ -28,7 +28,7 @@
 .section-title {
   font-size: 1.25rem;
   font-weight: 600;
-  color: #333;
+  color: var(--md-sys-color-on-surface, #333);
   margin: 0 0 1rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid rgb(0 0 0 / 12%);

src/app/configuration-wizard/configuration-wizard.component.scss

@@ -70,7 +70,7 @@
       font-size: 14px;
       font-weight: 500;
       margin: 0 0 12px;
-      color: #333;
+      color: var(--md-sys-color-on-surface, #333);
     }
 
     mat-progress-bar {

src/app/configuration-wizard/popover/popover.component.scss

@@ -8,7 +8,7 @@
 
 :host {
   position: relative;
-  background: white;
+  background: var(--md-sys-color-surface, white);
   border-radius: 8px;
   padding: 20px;
 }

src/app/loans/loans-view/loan-account-dashboard/loan-account-dashboard.component.scss

@@ -68,7 +68,7 @@
 
   .metric-label {
     font-size: 12px;
-    color: #666;
+    color: var(--md-sys-color-on-surface-variant, #666);
     margin-bottom: 8px;
     text-transform: uppercase;
     letter-spacing: 1px;
@@ -146,7 +146,7 @@
 
   mat-card-content {
     padding: 24px;
-    background: white;
+    background: var(--md-sys-color-surface, white);
   }
 
   .chart-container {

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.scss

@@ -35,7 +35,7 @@
       h3 {
         margin: 0 0 20px;
         font-weight: 500;
-        color: #333;
+        color: var(--md-sys-color-on-surface, #333);
       }
 
       h4 {
@@ -79,7 +79,7 @@
       mat-hint {
         margin: 12px 0;
         font-size: 12px;
-        color: #666;
+        color: var(--md-sys-color-on-surface-variant, #666);
       }
 
       .flex.cover {
@@ -97,7 +97,7 @@
     .documents {
       margin: 16px 0 20px;
       font-weight: 500;
-      color: #333;
+      color: var(--md-sys-color-on-surface, #333);
     }
 
     .m-b-10 {

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.scss

@@ -17,7 +17,7 @@
 
 .tab-container h3 {
   margin-bottom: 20px;
-  color: #333;
+  color: var(--md-sys-color-on-surface, #333);
   font-weight: 500;
 }
 
@@ -51,8 +51,8 @@
 }
 
 .note-card {
-  background: white;
+  background: var(--md-sys-color-surface, white);
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--md-sys-color-on-surface-variant, #e0e0e0);
   border-radius: 0.2rem;
   padding: 1rem;
   margin-bottom: 1rem;
@@ -62,11 +62,11 @@
 
 .note-card:hover {
   box-shadow: 0 4px 8px rgb(0 0 0 / 12%);
-  border-color: #d0d0d0;
+  border-color: var(--md-sys-color-on-surface-variant, #d0d0d0);
 }
 
 .note-content {
-  color: #333;
+  color: var(--md-sys-color-on-surface, #333);
   font-size: 14px;
   line-height: 1rem;
   margin: 0;
@@ -83,22 +83,22 @@
   justify-content: space-between;
   align-items: center;
   padding-top: 0.65rem;
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid var(--md-sys-color-on-surface-variant, #f0f0f0);
 }
 
 .note-meta {
-  color: #666;
+  color: var(--md-sys-color-on-surface-variant, #666);
   font-size: 12px;
 }
 
 .created-by {
   font-weight: 500;
-  color: #007acc;
+  color: var(--md-sys-color-primary, #007acc);
   margin-bottom: 2px;
 }
 
 .created-date {
-  color: #888;
+  color: var(--md-sys-color-on-surface-variant, #888);
 }
 
 .note-actions {
@@ -115,11 +115,11 @@
 .empty-state {
   text-align: center;
   padding: 40px 20px;
-  color: #666;
+  color: var(--md-sys-color-on-surface-variant, #666);
   font-style: italic;
-  background: #fafafa;
+  background: var(--md-sys-color-surface-container-low, #fafafa);
   border-radius: 8px;
-  border: 1px dashed #ddd;
+  border: 1px dashed var(--md-sys-color-on-surface-variant, #ddd);
 }
 
 .m-r-10 {