Replace 8px padding/gap/margin literals with vars.$space-s2 across 7 SCSS files

src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss

@@ -28,7 +28,7 @@
     grid-column: 1 / -1;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: vars.$space-s2;
   }
 
   &__last-update-row {
@@ -193,6 +193,6 @@
 
 .flight-actions {
   display: flex;
-  gap: 8px;
+  gap: vars.$space-s2;
   align-items: center;
 }

src/features/online-board/components/BoardDetailsHeader/actions.scss

@@ -35,7 +35,7 @@
 
   &--transparent {
     background: transparent;
-    padding: 8px;
+    padding: vars.$space-s2;
     color: colors.$blue;
 
     &:hover:not(:disabled) {

src/features/online-board/components/FlightsMiniList/FlightsMiniList.scss

@@ -73,7 +73,7 @@
   &__times {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 8px;
+    gap: vars.$space-s2;
     margin-bottom: 4px;
   }
 
@@ -105,7 +105,7 @@
   &__stations {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 8px;
+    gap: vars.$space-s2;
   }
 
   &__station {

src/features/online-board/components/FullRouteTimeline/FullRouteTimeline.scss

@@ -35,13 +35,13 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: vars.$space-s2;
   }
 
   &__row {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: vars.$space-s2;
 
     &--times {
       font-size: fonts.$font-size-xl;
@@ -108,7 +108,7 @@
 .station-change {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: vars.$space-s2;
 
   &__arrow { color: colors.$blue; }
   &__city { font-size: fonts.$font-size-s; color: colors.$light-gray; }

src/features/schedule/components/ScheduleDetailsPage.scss

@@ -19,7 +19,7 @@
   &__back {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: vars.$space-s2;
     padding: 10px 16px;
     background: rgba(255, 255, 255, 0.92);
     color: colors.$blue;

src/features/schedule/components/ScheduleFilter.scss

@@ -66,7 +66,7 @@
   &__checkbox {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: vars.$space-s2;
     padding: 4px 0;
     cursor: pointer;
     font-size: 13px;
@@ -84,7 +84,7 @@
   .wrapper--time-selector {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: vars.$space-s2;
   }
 
   .time-selector__label-value {

src/ui/city-autocomplete/CityPickerPopup.scss

@@ -79,7 +79,7 @@
 
         .city--item {
           display: inline-block;
-          padding: 8px;
+          padding: vars.$space-s2;
           cursor: pointer;
           border-radius: vars.$border-radius;
           transition-duration: 0.1s;