Use tokens for FlightDetailsAccordion status colors (#c8102e/#f37b09/#4a90e2/#333/#657282)

src/features/online-board/components/details-panels/FlightDetailsAccordion.scss

@@ -15,7 +15,7 @@
     cursor: pointer;
     font-weight: 400;
     font-size: 16px;
-    color: #333;
+    color: colors.$text-color;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -60,7 +60,7 @@
 
   // Angular draws the row separator as a 1.3px dotted hairline (#D1DCEA).
   & + .details-row {
-    border-top: 1.3px dotted #d1dcea;
+    border-top: 1.3px dotted colors.$border;
   }
 
   &__header {
@@ -79,7 +79,7 @@
     justify-content: center;
     width: 44px;
     height: 44px;
-    color: #657282;
+    color: colors.$light-gray;
     flex-shrink: 0;
 
     svg {
@@ -98,7 +98,7 @@
   // Angular renders at 12px in a neutral grey (#657282).
   &__title {
     font-weight: 400;
-    color: #657282;
+    color: colors.$light-gray;
     font-size: 12px;
   }
 
@@ -125,7 +125,7 @@
     }
 
     &--finished {
-      color: #c8102e;
+      color: colors.$red;
     }
 
     &--expected {
@@ -157,7 +157,7 @@
 
   &__time-label {
     font-size: 12px;
-    color: #333;
+    color: colors.$text-color;
   }
 
   // Angular renders accordion time values ('15:30', '14:45') at 12px
@@ -166,7 +166,7 @@
   &__time-value {
     font-size: 12px;
     font-weight: 400;
-    color: #f37b09;
+    color: colors.$orange;
   }
 
   // Day-change badge ('-1'): Angular keeps it inline at baseline (not
@@ -175,13 +175,13 @@
     margin-left: 4px;
     font-size: 10px;
     font-weight: 400;
-    color: #4a90e2;
+    color: colors.$blue-light;
     vertical-align: baseline;
   }
 
   &__time-date {
     font-size: 10px;
-    color: #333;
+    color: colors.$text-color;
   }
 }