chore: Replaced deprecated Spacing variables with current values

Approved-by: Matilda Landström

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -14,7 +14,7 @@
 
 .content {
   display: grid;
-  padding-bottom: var(--Spacing-x9);
+  padding-bottom: var(--Space-x9);
   position: relative;
   max-width: var(--max-width-content);
   margin: 0 auto;

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.module.css

@@ -2,11 +2,11 @@
   background-color: var(--Main-Grey-White);
   border-radius: var(--Corner-radius-lg);
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
-  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4);
+  padding: var(--Space-x2) var(--Space-x2) var(--Space-x4);
 }
 @media screen and (min-width: 768px) {
   .container {
-    padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
+    padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
   }
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/get-booking/page.module.css

@@ -1,6 +1,6 @@
 .main {
   width: var(--max-width-content);
-  padding: var(--Spacing-x5) var(--Spacing-x1);
+  padding: var(--Space-x5) var(--Space-x1);
   margin-left: auto;
   margin-right: auto;
 }

apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/linkEmploymentError.module.css

@@ -59,7 +59,7 @@
   margin-left: auto;
   margin-right: auto;
   background: var(--Background-Primary);
-  padding: var(--Spacing-x5);
+  padding: var(--Space-x5);
   border-radius: var(--Corner-radius-lg);
   display: grid;
   gap: var(--Space-x3);

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.module.css

@@ -2,10 +2,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   background-color: white;
   width: 100%;
-  padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
+  padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
   text-align: center;
   border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
   margin-top: auto;
@@ -25,7 +25,7 @@
 
   & > span {
     position: relative;
-    padding: 0 var(--Spacing-x2);
+    padding: 0 var(--Space-x2);
     background-color: white;
     color: var(--UI-Text-Placeholder);
   }
@@ -42,5 +42,5 @@
 }
 
 .contactBlockTitle {
-  margin-bottom: var(--Spacing-x1);
+  margin-bottom: var(--Space-x1);
 }

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.module.css

@@ -13,7 +13,7 @@
   grid-template-columns: 1fr 1fr 1fr;
   justify-content: center;
   align-items: center;
-  padding: 0 var(--Spacing-x2);
+  padding: 0 var(--Space-x2);
 }
 
 .content {
@@ -32,8 +32,8 @@
   align-items: center;
   color: var(--Scandic-Brand-Burgundy);
   display: flex;
-  font-size: var(--Spacing-x2);
+  font-size: var(--Space-x2);
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 
   .long {
     display: none;

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/link-sas.module.css

@@ -2,23 +2,23 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
-  margin-top: var(--Spacing-x3);
+  margin-top: var(--Space-x3);
 }
 
 .dateOfBirth {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   width: 100%;
   background-color: var(--Main-Brand-WarmWhite);
-  padding: var(--Spacing-x2) var(--Spacing-x3);
+  padding: var(--Space-x2) var(--Space-x3);
 }
 
 .dateOfBirthLink {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .dateOfBirthDescription {
@@ -28,18 +28,18 @@
 .termsAndConditions {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .termsDescription {
-  margin-left: calc(var(--Spacing-x4) + var(--Spacing-x-half));
+  margin-left: calc(var(--Space-x4) + var(--Space-x05));
 }
 
 .ctaContainer {
   display: flex;
   justify-content: center;
-  padding: var(--Spacing-x3) var(--Spacing-x3) 0;
+  padding: var(--Space-x3) var(--Space-x3) 0;
-  width: calc(100% + var(--Spacing-x3) + var(--Spacing-x3));
+  width: calc(100% + var(--Space-x3) + var(--Space-x3));
   border-top: 1px solid var(--Base-Border-Subtle);
 }
 
@@ -51,6 +51,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   text-align: left;
 }

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css

@@ -2,10 +2,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   background-color: white;
   width: 100%;
-  padding: var(--Spacing-x3);
+  padding: var(--Space-x3);
   text-align: center;
   border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
   margin-top: auto;
@@ -22,10 +22,10 @@
 .otp-container {
   display: flex;
 
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   @media screen and (min-width: 768px) {
     & {
-      gap: var(--Spacing-x2);
+      gap: var(--Space-x2);
     }
   }
   &.error .slot {
@@ -41,7 +41,7 @@
   box-sizing: content-box;
   width: 34px;
   height: 0px;
-  padding: var(--Spacing-x3) 0;
+  padding: var(--Space-x3) 0;
   font-family: var(--typography-Body-Regular-fontFamily);
   border: 1px solid var(--Base-Border-Normal);
   border-radius: var(--Corner-radius-md);
@@ -78,7 +78,7 @@
 .error-message {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 @keyframes blink {

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/transferSuccess.module.css

@@ -6,17 +6,17 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   align-items: center;
   width: 100%;
 }
 
 .transactionBox {
   box-shadow: 0px 0px 14px 6px #0000001a;
-  padding: var(--Spacing-x4) var(--Spacing-x3);
+  padding: var(--Space-x4) var(--Space-x3);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   border-radius: var(--Corner-radius-md);
   align-items: center;
   width: 100%;
@@ -25,7 +25,7 @@
 .transactionDetails {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   width: 100%;
 }
 
@@ -38,21 +38,21 @@
 
 .bonusNight {
   border-top: 1px solid var(--Border-Divider-Default);
-  padding-top: var(--Spacing-x3);
+  padding-top: var(--Space-x3);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   align-items: center;
 }
 
 .bonusNightDetails {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .divider {
-  --divider-spacing: var(--Spacing-x3);
+  --divider-spacing: var(--Space-x3);
 
   background: var(--Border-Divider-Subtle);
   width: calc(100% + var(--divider-spacing) + var(--divider-spacing));
@@ -62,11 +62,11 @@
 
 @media screen and (min-width: 768px) {
   .container {
-    padding-inline: var(--Spacing-x3);
+    padding-inline: var(--Space-x3);
   }
 
   .divider {
-    --divider-spacing: var(--Spacing-x6);
+    --divider-spacing: var(--Space-x6);
   }
 
   .bookButton {

apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css

@@ -1,6 +1,6 @@
 .hotelListingSection {
   --scroll-margin-top: calc(
-    var(--booking-widget-mobile-height) + var(--Spacing-x2)
+    var(--booking-widget-mobile-height) + var(--Space-x2)
   );
 
   display: grid;
@@ -35,7 +35,7 @@
 @media screen and (min-width: 768px) {
   .hotelListingSection {
     --scroll-margin-top: calc(
-      var(--booking-widget-tablet-height) + var(--Spacing-x2)
+      var(--booking-widget-tablet-height) + var(--Space-x2)
     );
 
     &.isMainBlock {
@@ -63,7 +63,7 @@
 @media screen and (min-width: 1367px) {
   .hotelListingSection {
     --scroll-margin-top: calc(
-      var(--booking-widget-desktop-height) + var(--Spacing-x2)
+      var(--booking-widget-desktop-height) + var(--Space-x2)
     );
   }
 }

apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css

@@ -1,7 +1,7 @@
 .cardsList {
   list-style: none;
   display: none;
-  gap: var(--Spacing-x4) var(--Spacing-x1);
+  gap: var(--Space-x4) var(--Space-x1);
 }
 
 .carousel .navigationButton {

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/filter.module.css

@@ -1,4 +1,4 @@
 .filterForm {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/jobList.module.css

@@ -1,10 +1,10 @@
 .jobList {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .list {
   list-style: none;
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css

@@ -1,7 +1,7 @@
 .jobylonCard {
   display: grid;
   width: 100%;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-md);
@@ -9,13 +9,13 @@
 
 .contentWrapper {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 @media screen and (min-width: 768px) {
   .contentWrapper {
     grid-template-columns: 1fr auto;
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
     align-items: end;
   }
 }

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -1,6 +1,6 @@
 .cardContainer {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .link {
@@ -11,10 +11,10 @@
   background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-xl);
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   min-height: 280px;
   justify-items: center;
-  padding: var(--Spacing-x5) var(--Spacing-x1);
+  padding: var(--Space-x5) var(--Space-x1);
   grid-template-rows: auto auto 1fr;
 }
 

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css

@@ -15,7 +15,7 @@
 }
 
 .iconTh {
-  padding: var(--Spacing-x5) var(--Spacing-x2) var(--Spacing-x2);
+  padding: var(--Space-x5) var(--Space-x2) var(--Space-x2);
   font-weight: var(--typography-Caption-Regular-fontWeight);
   vertical-align: bottom;
 }
@@ -23,11 +23,11 @@
 .summaryTh {
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: var(--typography-Caption-Regular-fontWeight);
-  padding: 0 var(--Spacing-x2) var(--Spacing-x2);
+  padding: 0 var(--Space-x2) var(--Space-x2);
   vertical-align: top;
 }
 
 .select {
   font-weight: var(--typography-Caption-Regular-fontWeight);
-  padding: 0 var(--Spacing-x2) var(--Spacing-x2);
+  padding: 0 var(--Space-x2) var(--Space-x2);
 }

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -20,7 +20,7 @@
 }
 
 .rewardTh {
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  padding: var(--Space-x3) var(--Space-x2);
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: var(--typography-Caption-Regular-fontWeight);
 }
@@ -31,16 +31,16 @@
 
 .rewardHeader {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   grid-template-columns: 1fr auto;
   text-align: start;
 }
 
 .rewardDescription {
   margin: 0;
-  padding-top: var(--Spacing-x1);
+  padding-top: var(--Space-x1);
   text-align: start;
-  padding-right: calc(var(--Spacing-x3) + var(--Spacing-x1));
+  padding-right: calc(var(--Space-x3) + var(--Space-x1));
 }
 
 .chevron {

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css

@@ -2,15 +2,15 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
-  padding-bottom: var(--Spacing-x1);
+  padding-bottom: var(--Space-x1);
 }
 
 .levelRequirements {
   border-radius: var(--Corner-radius-md);
   background-color: var(--Scandic-Brand-Pale-Peach);
   color: var(--Scandic-Peach-80);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  padding: var(--Space-x05) var(--Space-x1);
   text-align: center;
   width: 100%;
 }
@@ -23,7 +23,7 @@
 
 @media screen and (min-width: 950px) {
   .levelRequirements {
-    padding: var(--Spacing-x-half) var(--Spacing-x1);
+    padding: var(--Space-x05) var(--Space-x1);
   }
 }
 @media screen and (min-width: 1367px) {

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css

@@ -11,7 +11,7 @@
 .rewardCardDescription {
   font-size: var(--typography-Caption-Regular-fontSize);
   line-height: 150%;
-  padding-right: var(--Spacing-x4);
+  padding-right: var(--Space-x4);
 }
 
 .rewardInfo {

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/rewardList.module.css

@@ -5,7 +5,7 @@
   grid-template-columns: 1fr 1fr;
   grid-column: 1/3;
   padding-top: 0;
-  margin: var(--Spacing-x1) var(--Spacing-x2);
+  margin: var(--Space-x1) var(--Space-x2);
 }
 
 .rewardCardWrapper:last-child {

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css

@@ -2,8 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
-  padding: 0 var(--Spacing-x4) 0 var(--Spacing-x4);
+  padding: 0 var(--Space-x4) 0 var(--Space-x4);
   text-wrap: balance;
 }
 

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css

@@ -1,10 +1,10 @@
 .script {
   transform: rotate(-4deg);
-  padding-bottom: var(--Spacing-x-half);
+  padding-bottom: var(--Space-x05);
 }
 
 @media screen and (min-width: 950px) {
   .script {
-    padding-bottom: var(--Spacing-x1);
+    padding-bottom: var(--Space-x1);
   }
 }

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -1,6 +1,6 @@
 .intro {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .largeTableContainer {
@@ -18,23 +18,23 @@
   background-color: var(--UI-Opacity-White-100);
   display: grid;
   grid-template-columns: 1fr 1fr;
-  margin: 0 calc(0px - var(--Spacing-x2)) calc(0px - var(--Spacing-x9))
+  margin: 0 calc(0px - var(--Space-x2)) calc(0px - var(--Space-x9))
-    calc(0px - var(--Spacing-x2));
+    calc(0px - var(--Space-x2));
-  padding-bottom: var(--Spacing-x9);
+  padding-bottom: var(--Space-x9);
   position: relative;
 }
 
 .columnHeaderContainer {
   display: contents;
   grid-template-columns: 1fr 1fr;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .columnHeader {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Space-x4) var(--Space-x2);
   justify-content: flex-end;
 }
 
@@ -43,21 +43,21 @@
 }
 
 .columnHeader:nth-child(1) {
-  padding-right: var(--Spacing-x1);
+  padding-right: var(--Space-x1);
 }
 
 .columnHeader:nth-child(2) {
-  padding-left: var(--Spacing-x1);
+  padding-left: var(--Space-x1);
   border-top-left-radius: var(--Corner-radius-md);
 }
 
 .columnHeader:nth-child(2):has(+ .columnHeader) {
-  padding-left: var(--Spacing-x1);
+  padding-left: var(--Space-x1);
-  padding-right: var(--Spacing-x1);
+  padding-right: var(--Space-x1);
 }
 
 .columnHeader:nth-child(3) {
-  padding-left: var(--Spacing-x1);
+  padding-left: var(--Space-x1);
 }
 
 @media screen and (min-width: 768px) {

apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/AwardPoints/awardPoints.module.css

@@ -9,7 +9,7 @@
 .addition::before {
   color: var(--Secondary-Light-On-Surface-Accent);
   content: "+";
-  margin-right: var(--Spacing-x-half);
+  margin-right: var(--Space-x05);
 }
 
 .negation {
@@ -19,5 +19,5 @@
 .negation::before {
   color: var(--Base-Text-Accent);
   content: "-";
-  margin-right: var(--Spacing-x-half);
+  margin-right: var(--Space-x05);
 }

apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/expiringPoints.module.css

@@ -16,10 +16,10 @@
 
 .th {
   text-align: left;
-  padding: var(--Spacing-x2) var(--Spacing-x4);
+  padding: var(--Space-x2) var(--Space-x4);
 }
 
 .td {
   text-align: left;
-  padding: var(--Spacing-x2) var(--Spacing-x4);
+  padding: var(--Space-x2) var(--Space-x4);
 }

apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/overview.module.css

@@ -1,5 +1,5 @@
 .divider {
-  margin-top: var(--Spacing-x2);
+  margin-top: var(--Space-x2);
 }
 
 .membershipCardsContainer {

apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
   position: relative;
   scroll-margin-top: calc(var(--current-mobile-site-header-height) * 2);
 }
@@ -18,10 +18,10 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   align-items: center;
   justify-content: center;
-  padding: var(--Spacing-x3);
+  padding: var(--Space-x3);
 }
 
 .title {
@@ -30,5 +30,5 @@
 }
 
 .btnContainer {
-  padding: 0 var(--Spacing-x3) var(--Spacing-x3);
+  padding: 0 var(--Space-x3) var(--Space-x3);
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css

@@ -4,12 +4,12 @@
   border-radius: var(--Corner-radius-sm);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   justify-content: center;
-  padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
+  padding: var(--Space-x3) var(--Space-x3) var(--Space-x7);
 }
 
 .textContainer {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css

@@ -2,7 +2,7 @@
   border-radius: var(--Small, 4px);
   border: 1px solid var(--Base-Border-Subtle);
   display: flex;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
+  padding: var(--Space-x1) var(--Space-x2);
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -12,7 +12,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   align-self: stretch;
 }
 
@@ -60,7 +60,7 @@
 .dialog {
   display: flex;
   flex-direction: column;
-  padding-bottom: var(--Spacing-x3);
+  padding-bottom: var(--Space-x3);
   overflow: hidden;
   height: 100%;
 }
@@ -73,7 +73,7 @@
   height: var(--button-height);
   position: relative;
   justify-content: center;
-  padding: var(--Spacing-x3) var(--Spacing-x2) 0;
+  padding: var(--Space-x3) var(--Space-x2) 0;
   flex-shrink: 0;
 }
 
@@ -81,8 +81,8 @@
   display: grid;
   grid-template-columns: 1fr;
   place-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
-  padding: 0 var(--Spacing-x3) var(--Spacing-x3);
+  padding: 0 var(--Space-x3) var(--Space-x3);
   overflow-y: auto;
   flex-grow: 1;
 }
@@ -90,7 +90,7 @@
 .modalFooter {
   display: flex;
   flex-direction: column;
-  padding: 0 var(--Spacing-x3) var(--Spacing-x1);
+  padding: 0 var(--Space-x3) var(--Space-x1);
   gap: var(--Space-x15);
   flex-shrink: 0;
 }
@@ -104,7 +104,7 @@
   border: none;
   cursor: pointer;
   position: absolute;
-  right: var(--Spacing-x2);
+  right: var(--Space-x2);
   width: 32px;
   height: var(--button-height);
   display: flex;
@@ -114,16 +114,16 @@
 .active {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   color: var(--UI-Semantic-Success);
 }
 
 .rewardBadge {
   border-radius: var(--Corner-radius-sm);
-  padding: var(--Spacing-x1) var(--Space-x15);
+  padding: var(--Space-x1) var(--Space-x15);
   background: var(--Base-Surface-Secondary-light-Normal);
   display: grid;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .redeemButton {

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css

@@ -1,11 +1,11 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .divider {
-  margin-top: var(--Spacing-x2);
+  margin-top: var(--Space-x2);
 
   @media screen and (min-width: 768px) {
     display: none;
@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   align-items: flex-end;
 
   @media screen and (min-width: 768px) {
@@ -28,8 +28,8 @@
 .matchedAccountSection {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
-  padding: var(--Spacing-x4) var(--Space-x15);
+  padding: var(--Space-x4) var(--Space-x15);
   width: 100%;
   background-color: var(--Surface-Primary-On-Surface-Default);
   border: 1px solid var(--Border-Default);
@@ -39,7 +39,7 @@
     0px 4px 4px 0px rgba(255, 255, 255, 0.29) inset;
 
   @media screen and (min-width: 768px) {
-    padding: var(--Spacing-x4) var(--Spacing-x3);
+    padding: var(--Space-x4) var(--Space-x3);
   }
 }
 
@@ -47,10 +47,10 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 
   @media screen and (min-width: 768px) {
-    gap: var(--Spacing-x7);
+    gap: var(--Space-x7);
   }
 }
 
@@ -63,12 +63,12 @@
 .tierMatchStatus {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   width: 100%;
   justify-content: space-between;
   border: 1px solid var(--Border-Divider-Accent);
   border-radius: var(--Corner-radius-sm);
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
   background:
     linear-gradient(
       0deg,
@@ -83,7 +83,7 @@
 
   @media screen and (min-width: 768px) {
     flex-direction: row;
-    gap: var(--Spacing-x1);
+    gap: var(--Space-x1);
   }
 }
 
@@ -94,13 +94,13 @@
 .stack {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .caption {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   color: var(--Text-Tertiary);
   align-self: flex-start;
 }
@@ -116,7 +116,7 @@
 .tierMatchText {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .label {

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .card {
@@ -10,12 +10,12 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
-  padding: var(--Spacing-x3) var(--Spacing-x9);
+  padding: var(--Space-x3) var(--Space-x9);
   background-color: var(--Background-Secondary);
   border-radius: var(--Corner-radius-lg);
   box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
-  margin-top: var(--Spacing-x9);
+  margin-top: var(--Space-x9);
 }
 
 .highFive {
@@ -37,9 +37,9 @@
 .labelWithIcon {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   color: var(--Text-Tertiary);
-  margin-bottom: var(--Spacing-x-half);
+  margin-bottom: var(--Space-x05);
 }
 
 .transferContainer {
@@ -69,15 +69,15 @@
 
 .balanceLabel {
   color: var(--Text-Tertiary);
-  margin-top: var(--Spacing-x3);
+  margin-top: var(--Space-x3);
 }
 
 .formWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   width: 100%;
-  padding: var(--Spacing-x4);
+  padding: var(--Space-x4);
   padding-bottom: 0;
 }
 
@@ -122,7 +122,7 @@
     transform: translateX(-50%) translateY(4px);
     background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
     color: var(--Text-Brand-OnPrimary-2-Accent);
-    padding: var(--Spacing-x-half) var(--Spacing-x1);
+    padding: var(--Space-x05) var(--Space-x1);
     border-radius: var(--Corner-radius-sm);
     opacity: 0;
     transition:
@@ -204,8 +204,8 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
-  padding-inline: var(--Spacing-x3);
+  padding-inline: var(--Space-x3);
 }
 
 .expiryText {
@@ -214,15 +214,15 @@
 
 .divider {
   background-color: var(--Border-Divider-Subtle);
-  width: calc(100% + var(--Spacing-x6) + var(--Spacing-x6));
+  width: calc(100% + var(--Space-x6) + var(--Space-x6));
   height: 1px;
-  margin-inline: calc(var(--Spacing-x6) * -1);
+  margin-inline: calc(var(--Space-x6) * -1);
 }
 
 .buttonContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .pointsOutput {
@@ -230,16 +230,16 @@
   background-color: var(--Surface-Primary-Disabled);
   height: 100%;
   color: var(--Text-Tertiary);
-  padding: var(--Spacing-x1) var(--Spacing-x2);
+  padding: var(--Space-x1) var(--Space-x2);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 @media screen and (max-width: 767px) {
   .card {
-    padding: var(--Spacing-x3);
+    padding: var(--Space-x3);
-    padding-top: var(--Spacing-x6);
+    padding-top: var(--Space-x6);
   }
 
   .highFive {
@@ -249,7 +249,7 @@
 
   .transferContainer {
     grid-template-columns: 1fr;
-    gap: var(--Spacing-x4);
+    gap: var(--Space-x4);
   }
   .transferFrom {
     flex-direction: row;
@@ -278,7 +278,7 @@
 
   .inputsWrapper {
     grid-template-columns: 1fr 1fr;
-    column-gap: var(--Spacing-x1);
+    column-gap: var(--Space-x1);
   }
 
   .conversionRate {
@@ -292,6 +292,6 @@
   }
 
   .modalContainer {
-    padding-inline: var(--Spacing-x2);
+    padding-inline: var(--Space-x2);
   }
 }

apps/scandic-web/components/Blocks/DynamicContent/Stays/ListContainer/container.module.css

@@ -1,4 +1,4 @@
 .container {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }

apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css

@@ -33,8 +33,8 @@
   justify-content: center;
   max-width: 800px;
   margin: 0 auto;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
-  padding: var(--Spacing-x4) var(--Spacing-x3);
+  padding: var(--Space-x4) var(--Space-x3);
   z-index: 2;
 }
 
@@ -42,12 +42,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .buttons {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .buttonWrapper {

apps/scandic-web/components/Blocks/ShortcutsList/shortcutsList.module.css

@@ -19,6 +19,6 @@
   .section:has(.column:nth-child(2)) {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
   }
 }

apps/scandic-web/components/Blocks/TextCols/textcols.module.css

@@ -1,13 +1,13 @@
 .columns {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .column {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   align-content: start;
-  padding-bottom: var(--Spacing-x2);
+  padding-bottom: var(--Space-x2);
   border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 

apps/scandic-web/components/Blocks/UspGrid/uspgrid.module.css

@@ -1,11 +1,11 @@
 .grid {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .usp {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   align-content: start;
 }
 

apps/scandic-web/components/Carousel/carousel.module.css

@@ -10,7 +10,7 @@
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 85%;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .item {
@@ -40,8 +40,8 @@
 .dots {
   display: flex;
   justify-content: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
-  margin-top: var(--Spacing-x3);
+  margin-top: var(--Space-x3);
 }
 
 .dot {
@@ -65,12 +65,12 @@
 
 @media screen and (min-width: 768px) {
   .container {
-    grid-auto-columns: calc(50% - var(--Spacing-x2) / 2);
+    grid-auto-columns: calc(50% - var(--Space-x2) / 2);
   }
 }
 
 @media screen and (min-width: 1024px) {
   .container {
-    grid-auto-columns: calc(33.33% - var(--Spacing-x2) * 2 / 3);
+    grid-auto-columns: calc(33.33% - var(--Space-x2) * 2 / 3);
   }
 }

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css

@@ -7,7 +7,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .cityList {

apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css

@@ -7,8 +7,8 @@
 
 .content {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
-  padding: var(--Spacing-x2) var(--Spacing-x3);
+  padding: var(--Space-x2) var(--Space-x3);
   align-content: start;
   justify-items: start;
 }
@@ -20,13 +20,13 @@
 
 .tripAdvisor {
   position: absolute;
-  top: var(--Spacing-x2);
+  top: var(--Space-x2);
-  left: var(--Spacing-x2);
+  left: var(--Space-x2);
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x-quarter) var(--Spacing-x1);
+  padding: var(--Space-x025) var(--Space-x1);
   border-radius: var(--Corner-radius-sm);
   color: var(--Text-Interactive-Default);
 }
@@ -37,12 +37,12 @@
 
 .intro {
   display: grid;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .captions {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   color: var(--Text-Tertiary);
 }
 
@@ -63,7 +63,7 @@
 
 .amenityItem {
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   align-items: center;
 }
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/destinationListing.module.css

@@ -22,7 +22,7 @@
 @media screen and (min-width: 768px) {
   .container {
     --scroll-margin-top: calc(
-      var(--booking-widget-desktop-height) + var(--Spacing-x2)
+      var(--booking-widget-desktop-height) + var(--Space-x2)
     );
   }
 }

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/destination.module.css

@@ -1,12 +1,12 @@
 .container {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .citiesList {
   column-count: 2;
   list-style-type: none;
-  margin-bottom: var(--Spacing-x-half);
+  margin-bottom: var(--Space-x05);
 }
 .citiesList li {
   margin-bottom: var(--Space-x15);

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/destinationsList.module.css

@@ -12,7 +12,7 @@
 
 @media screen and (min-width: 768px) {
   .listContainer {
-    gap: var(--Spacing-x3);
+    gap: var(--Space-x3);
     background-color: transparent;
     flex-direction: row;
   }

apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/sidepeek.module.css

@@ -1,4 +1,4 @@
 .ctaContainer {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }

apps/scandic-web/components/ContentType/DestinationPage/TopImages/topImages.module.css

@@ -20,8 +20,8 @@
 
 .seeAllButton {
   position: absolute;
-  bottom: var(--Spacing-x2);
+  bottom: var(--Space-x2);
-  right: var(--Spacing-x4);
+  right: var(--Space-x4);
 }
 
 @media screen and (max-width: 767px) {
@@ -35,7 +35,7 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, 1fr);
-    gap: var(--Spacing-x1);
+    gap: var(--Space-x1);
   }
 
   .imageWrapper > .image:first-child {
@@ -58,8 +58,8 @@
   .imageWrapper > .image:nth-child(3) {
     grid-column: span 1;
     grid-row: span 1;
-    height: calc(150px - var(--Spacing-x-half));
+    height: calc(150px - var(--Space-x05));
-    max-height: calc(20dvh - var(--Spacing-x-half));
+    max-height: calc(20dvh - var(--Space-x05));
   }
 }
 
@@ -71,6 +71,6 @@
 
   .imageWrapper > .image:nth-child(2):nth-last-child(2),
   .imageWrapper > .image:nth-child(3) {
-    height: calc(200px - var(--Spacing-x-half));
+    height: calc(200px - var(--Space-x05));
   }
 }

apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css

@@ -2,8 +2,8 @@
   display: grid;
   grid-template-areas: "main";
   grid-template-columns: 1fr;
-  gap: var(--Spacing-x5);
+  gap: var(--Space-x5);
-  padding-bottom: var(--Spacing-x9);
+  padding-bottom: var(--Space-x9);
   max-width: var(--max-width-page);
   margin: 0 auto;
   width: 100%;
@@ -18,12 +18,12 @@
 .blocks {
   grid-area: main;
   display: grid;
-  gap: var(--Spacing-x7);
+  gap: var(--Space-x7);
 }
 
 .header {
   display: grid;
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
 }
 
 .title {
@@ -41,10 +41,10 @@
   }
 
   .blocks {
-    gap: var(--Spacing-x9);
+    gap: var(--Space-x9);
   }
 
   .blocks > section:first-of-type > header {
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
   }
 }

apps/scandic-web/components/ContentType/StartPage/InfoCard/infoCard.module.css

@@ -1,6 +1,6 @@
 .container {
   display: grid;
-  gap: var(--Spacing-x-quarter);
+  gap: var(--Space-x025);
 }
 
 .image {
@@ -17,7 +17,7 @@
 
 @media (min-width: 768px) {
   .container:has(.imageContainer) {
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
     align-items: center;
   }
 

apps/scandic-web/components/ContentType/StartPage/startPage.module.css

@@ -22,13 +22,13 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  grid-gap: var(--Spacing-x2);
+  grid-gap: var(--Space-x2);
-  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4);
+  padding: var(--Space-x2) var(--Space-x2) var(--Space-x4);
 }
 
 @media screen and (min-width: 768px) {
   .headerContent {
-    grid-gap: var(--Spacing-x4);
+    grid-gap: var(--Space-x4);
   }
 }
 
@@ -38,8 +38,8 @@
 
 .main {
   display: grid;
-  gap: var(--Spacing-x6);
+  gap: var(--Space-x6);
-  padding: calc(var(--Spacing-x5) * 2) 0 calc(var(--Spacing-x5) * 4);
+  padding: calc(var(--Space-x5) * 2) 0 calc(var(--Space-x5) * 4);
 }
 
 .section:empty {
@@ -55,10 +55,10 @@
 
 @media screen and (min-width: 768px) {
   .main {
-    gap: calc(var(--Spacing-x5) + var(--Spacing-x4));
+    gap: calc(var(--Space-x5) + var(--Space-x4));
   }
   .section {
-    padding-left: var(--Spacing-x5);
+    padding-left: var(--Space-x5);
-    padding-right: var(--Spacing-x5);
+    padding-right: var(--Space-x5);
   }
 }

apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css

@@ -1,15 +1,15 @@
 .page {
-  padding-bottom: var(--Spacing-x9);
+  padding-bottom: var(--Space-x9);
 }
 
 .header {
   background-color: var(--Base-Surface-Subtle-Normal);
-  padding-bottom: var(--Spacing-x4);
+  padding-bottom: var(--Space-x4);
 }
 
 .headerContent {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   max-width: var(--max-width-content);
   margin: 0 auto;
 }
@@ -17,7 +17,7 @@
 .headerIntro {
   display: grid;
   max-width: var(--max-width-text-block);
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .heading {
@@ -28,7 +28,7 @@
 
 .heroContainer {
   width: 100%;
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Space-x4) var(--Space-x2);
 }
 
 .heroContainer img {
@@ -39,7 +39,7 @@
 
 .contentContainer {
   width: 100%;
-  padding: var(--Spacing-x4) var(--Spacing-x2) 0;
+  padding: var(--Space-x4) var(--Space-x2) 0;
 }
 
 .content .contentContainer {
@@ -47,14 +47,14 @@
   grid-template-areas:
     "main"
     "sidebar";
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
   align-items: start;
 }
 
 .mainContent {
   display: grid;
   width: 100%;
-  gap: var(--Spacing-x6);
+  gap: var(--Space-x6);
   margin: 0 auto;
   max-width: var(--max-width-content);
 }
@@ -74,17 +74,17 @@
 
 @media (min-width: 768px) {
   .contentContainer {
-    padding: var(--Spacing-x4) 0;
+    padding: var(--Space-x4) 0;
     max-width: var(--max-width-content);
     margin: 0 auto;
   }
 
   .heroContainer {
-    padding: var(--Spacing-x4) 0;
+    padding: var(--Space-x4) 0;
   }
 
   .headerIntro {
-    gap: var(--Spacing-x3);
+    gap: var(--Space-x3);
   }
 }
 
@@ -100,11 +100,11 @@
   .content .contentContainer {
     grid-template-areas: "main sidebar";
     grid-template-columns: var(--max-width-text-block) 1fr;
-    gap: var(--Spacing-x9);
+    gap: var(--Space-x9);
   }
 
   .mainContent {
-    gap: var(--Spacing-x9);
+    gap: var(--Space-x9);
     padding: 0;
     max-width: none;
     margin: 0;

apps/scandic-web/components/DatePicker/Single/desktop.module.css

@@ -58,7 +58,7 @@ td.day,
 td.day[data-today="true"] {
   color: var(--UI-Text-High-contrast);
   height: 40px;
-  padding: var(--Spacing-x-half);
+  padding: var(--Space-x05);
   width: 40px;
 }
 
@@ -103,11 +103,11 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 .footer {
   display: flex;
   justify-content: flex-end;
-  margin-top: var(--Spacing-x2);
+  margin-top: var(--Space-x2);
 }
 
 .divider {
-  margin-top: var(--Spacing-x2);
+  margin-top: var(--Space-x2);
 }
 
 .nav {

apps/scandic-web/components/DatePicker/Single/mobile.module.css

@@ -24,7 +24,7 @@
   align-self: flex-end;
   background-color: var(--Main-Grey-White);
   grid-area: header;
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  padding: var(--Space-x3) var(--Space-x2);
   position: sticky;
   top: 0;
   z-index: 10;
@@ -58,7 +58,7 @@ div.months {
 }
 
 .month:last-of-type {
-  padding-bottom: calc(var(--sticky-button-height) + var(--Spacing-x2));
+  padding-bottom: calc(var(--sticky-button-height) + var(--Space-x2));
 }
 
 .monthCaption {
@@ -78,7 +78,7 @@ div.months {
   );
   display: flex;
   grid-area: content;
-  padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
+  padding: var(--Space-x1) var(--Space-x2) var(--Space-x7);
   position: fixed;
   bottom: 0;
   left: 0;
@@ -132,7 +132,7 @@ td.day,
 td.day[data-today="true"] {
   color: var(--UI-Text-High-contrast);
   height: 40px;
-  padding: var(--Spacing-x-half);
+  padding: var(--Space-x05);
   width: 40px;
 }
 

apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   gap: var(--Space-x15);
-  padding: var(--Spacing-x1) var(--Space-x15);
+  padding: var(--Space-x1) var(--Space-x15);
   cursor: pointer;
   border-radius: var(--Corner-radius-md);
   transition: background-color 0.3s;

apps/scandic-web/components/DestinationFilterAndSort/Filter/filter.module.css

@@ -1,11 +1,11 @@
 .container {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .form {
   display: grid;
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
 }
 
 .fieldset {
@@ -22,8 +22,8 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   list-style: none;
-  gap: var(--Spacing-x1) var(--Spacing-x2);
+  gap: var(--Space-x1) var(--Space-x2);
-  margin: var(--Spacing-x3) 0;
+  margin: var(--Space-x3) 0;
 }
 
 @media screen and (max-width: 767px) {

apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css

@@ -21,21 +21,21 @@
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
-  padding: var(--Spacing-x2) var(--Spacing-x3);
+  padding: var(--Space-x2) var(--Space-x3);
   border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
 .content {
   display: grid;
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
   align-content: start;
-  padding: var(--Spacing-x4) var(--Spacing-x3);
+  padding: var(--Space-x4) var(--Space-x3);
   overflow-y: auto;
   height: min(calc(80dvh - 180px), 500px);
 }
 
 .alertWrapper:not(:empty) {
-  padding: var(--Spacing-x2) var(--Spacing-x4) 0;
+  padding: var(--Space-x2) var(--Space-x4) 0;
   border-top: 1px solid var(--Base-Border-Subtle);
 }
 
@@ -46,7 +46,7 @@
 .footer {
   display: flex;
   justify-content: space-between;
-  padding: var(--Spacing-x2) var(--Spacing-x4);
+  padding: var(--Space-x2) var(--Space-x4);
   border-top: 1px solid var(--Base-Border-Subtle);
 }
 
@@ -74,7 +74,7 @@
     display: flex;
     justify-content: flex-end;
     border-bottom: none;
-    padding: var(--Spacing-x3) var(--Spacing-x2);
+    padding: var(--Space-x3) var(--Space-x2);
   }
 
   .title,
@@ -84,18 +84,18 @@
 
   .content {
     height: 100%;
-    padding: 0 var(--Spacing-x2) var(--Spacing-x3);
+    padding: 0 var(--Space-x2) var(--Space-x3);
     overflow-y: scroll;
   }
 
   .alertWrapper:not(:empty) {
-    padding: var(--Spacing-x3) var(--Spacing-x2) 0;
+    padding: var(--Space-x3) var(--Space-x2) 0;
   }
 
   .footer {
     flex-direction: column-reverse;
-    gap: var(--Spacing-x3);
+    gap: var(--Space-x3);
-    padding: var(--Spacing-x3) var(--Spacing-x2);
+    padding: var(--Space-x3) var(--Space-x2);
     margin-top: auto;
   }
 }

apps/scandic-web/components/Dialog/dialog.module.css

@@ -39,28 +39,28 @@
   box-shadow: var(--modal-box-shadow);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   max-width: 560px;
-  padding: var(--Spacing-x5) var(--Spacing-x4);
+  padding: var(--Space-x5) var(--Space-x4);
 }
 
 .header {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .footer {
   display: flex;
   flex-direction: column-reverse;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 @media screen and (min-width: 768px) {
   .footer {
     align-items: center;
     flex-direction: row;
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
 
     & > button {
       flex: 1;

apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css

@@ -3,5 +3,5 @@
   flex-direction: column;
   align-items: flex-start;
   gap: var(--Space-x15);
-  padding-bottom: var(--Spacing-x3);
+  padding-bottom: var(--Space-x3);
 }

apps/scandic-web/components/Forms/Edit/Profile/FormContent/formContent.module.css

@@ -2,14 +2,14 @@
 .user {
   align-self: flex-start;
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   container-name: addressContainer;
   container-type: inline-size;
 }
 
 .container {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   grid-template-columns: minmax(100px, 164px) 1fr;
 }
 

apps/scandic-web/components/Forms/Edit/Profile/form.module.css

@@ -1,6 +1,6 @@
 .container {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   grid-template-areas:
     "title"
     "form"
@@ -13,14 +13,14 @@
 
 .form {
   display: grid;
-  gap: var(--Spacing-x5);
+  gap: var(--Space-x5);
   grid-area: form;
 }
 
 .btnContainer {
   display: flex;
   flex-direction: column-reverse;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   grid-area: buttons;
 }
 
@@ -38,7 +38,7 @@
   .btnContainer {
     align-self: center;
     flex-direction: row;
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
     justify-self: flex-end;
   }
 }

apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css

@@ -1,12 +1,12 @@
 .menuButton {
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   align-items: center;
   width: 100%;
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
   border-width: 0;
-  padding: var(--Spacing-x-half) 0;
+  padding: var(--Space-x05) 0;
   cursor: pointer;
   font-family: var(--typography-Body-Bold-fontFamily);
   font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */

apps/scandic-web/components/Header/MainMenu/MobileMenu/mobileMenu.module.css

@@ -91,9 +91,9 @@
 
 .footer {
   background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Space-x4) var(--Space-x2);
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 @media screen and (min-width: 768px) {

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css

@@ -1,9 +1,9 @@
 .myPagesMenuContent {
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  padding: var(--Space-x3) var(--Space-x2);
 }
 
 .intro {
-  padding: 0 var(--Spacing-x1);
+  padding: 0 var(--Space-x1);
 }
 
 .myPagesMenuContent .friendTypeWrapper {
@@ -11,7 +11,7 @@
 }
 
 .divider {
-  margin: var(--Spacing-x2) 0;
+  margin: var(--Space-x2) 0;
 }
 
 .friendType {
@@ -24,7 +24,7 @@
 .friendType::after {
   content: " · ";
   display: inline;
-  padding: 0 var(--Spacing-x-half);
+  padding: 0 var(--Space-x05);
 }
 
 .groups,
@@ -42,7 +42,7 @@
 
 @media screen and (min-width: 768px) {
   .myPagesMenuContent {
-    padding: var(--Spacing-x2) var(--Spacing-x4);
+    padding: var(--Space-x2) var(--Space-x4);
   }
   .intro.noMembership,
   .userName {

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css

@@ -8,9 +8,9 @@
 
 .seeAllLink {
   display: flex;
-  padding: var(--Spacing-x2) var(--Spacing-x3);
+  padding: var(--Space-x2) var(--Space-x3);
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   background-color: var(--Base-Surface-Secondary-light-Normal);
 }
 
@@ -20,7 +20,7 @@
 }
 
 .submenuTitle {
-  padding-left: var(--Spacing-x1);
+  padding-left: var(--Space-x1);
   color: var(--Text-Tertiary);
   text-transform: uppercase;
 }
@@ -35,7 +35,7 @@
 
 .submenusItem {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   align-content: start;
 }
 
@@ -52,7 +52,7 @@
 }
 
 .backWrapper {
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
 }
 
 .text {
@@ -66,7 +66,7 @@
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   width: 100%;
 }
 
@@ -79,7 +79,7 @@
   .megaMenuContent {
     flex-grow: 1;
     grid-template-rows: max-content 1fr;
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
     align-items: start;
   }
   .megaMenuContent:has(.cardWrapper) {
@@ -87,20 +87,20 @@
   }
 
   .submenus {
-    padding: var(--Spacing-x2);
+    padding: var(--Space-x2);
   }
 
   .submenusItem:first-child {
-    padding-bottom: var(--Spacing-x2);
+    padding-bottom: var(--Space-x2);
     border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   }
   .submenusItem:last-child {
-    padding-top: var(--Spacing-x3);
+    padding-top: var(--Space-x3);
   }
 
   .cardWrapper {
     background-color: var(--Base-Surface-Secondary-light-Normal);
-    padding: var(--Spacing-x4) var(--Spacing-x2);
+    padding: var(--Space-x4) var(--Space-x2);
   }
 }
 
@@ -111,7 +111,7 @@
       "seeAllLink"
       "submenus";
     width: 600px;
-    max-width: calc(100vw - var(--Spacing-x4));
+    max-width: calc(100vw - var(--Space-x4));
   }
 
   .megaMenuContent:has(.cardWrapper) {
@@ -129,15 +129,15 @@
   .submenus {
     grid-area: submenus;
     grid-template-columns: repeat(2, 1fr);
-    padding: var(--Spacing-x2) var(--Spacing-x3);
+    padding: var(--Space-x2) var(--Space-x3);
   }
 
   .submenusItem:first-child {
-    padding-right: var(--Spacing-x5);
+    padding-right: var(--Space-x5);
     border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   }
   .submenusItem:last-child {
-    padding-left: var(--Spacing-x5);
+    padding-left: var(--Space-x5);
   }
 
   .cardWrapper {

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -5,7 +5,7 @@
 .navigationMenuItem.mobile {
   display: flex;
   justify-content: space-between;
-  padding: var(--Spacing-x2) 0;
+  padding: var(--Space-x2) 0;
   font-size: var(--typography-Subtitle-1-Mobile-fontSize);
 }
 

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css

@@ -3,7 +3,7 @@
   margin: 0;
   justify-content: space-between;
   align-items: center;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   display: none;
 }
 
@@ -12,7 +12,7 @@
   width: 100%;
   gap: 0;
   justify-content: stretch;
-  padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2);
+  padding: var(--Space-x15) var(--Space-x2) var(--Space-x2);
 }
 
 .navigationMenu.mobile .item {

apps/scandic-web/components/Header/MainMenu/mainMenu.module.css

@@ -1,6 +1,6 @@
 .mainMenu {
   background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x2) 0;
+  padding: var(--Space-x2) 0;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
 }
 
@@ -11,7 +11,7 @@
   display: grid;
   grid-template-columns: max-content 1fr;
   align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   max-width: var(--max-width-page);
   margin: 0 auto;
 }
@@ -20,17 +20,17 @@
   display: flex;
   justify-self: end;
   align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 @media screen and (min-width: 768px) {
   .mainMenu {
-    padding: var(--Spacing-x2) 0;
+    padding: var(--Space-x2) 0;
   }
   .nav {
     display: flex;
     justify-content: space-between;
-    gap: var(--Spacing-x3);
+    gap: var(--Space-x3);
   }
   .menus {
     display: contents;

apps/scandic-web/components/Header/TopMenu/topMenu.module.css

@@ -1,7 +1,7 @@
 .topMenu {
   display: none;
   background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x2) 0;
+  padding: var(--Space-x2) 0;
 }
 
 .content {
@@ -11,7 +11,7 @@
 
 .options {
   display: flex;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   align-items: center;
 }
 
@@ -23,7 +23,7 @@
     display: grid;
     grid-template-areas: "topLink options";
     justify-content: space-between;
-    gap: var(--Spacing-x3);
+    gap: var(--Space-x3);
   }
 
   .topLink {

apps/scandic-web/components/Hero/hero.module.css

@@ -1,6 +1,6 @@
 .hero {
   height: 400px;
-  margin-bottom: var(--Spacing-x2);
+  margin-bottom: var(--Space-x2);
   width: 100%;
   object-fit: cover;
   border-radius: var(--Corner-radius-xl);

apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css

@@ -1,17 +1,17 @@
 .form {
   box-shadow: var(--popup-box-shadow);
-  padding: var(--Spacing-x3) 0;
+  padding: var(--Space-x3) 0;
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .form > div:not(.buttons) {
-  padding: 0 var(--Spacing-x3);
+  padding: 0 var(--Space-x3);
 }
 
 .inputs {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 @media screen and (min-width: 768px) {
@@ -41,8 +41,8 @@
   justify-content: space-between;
   align-items: center;
   border-top: 1px solid var(--Base-Border-Subtle);
-  padding: var(--Spacing-x3) var(--Spacing-x3) 0;
+  padding: var(--Space-x3) var(--Space-x3) 0;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .buttons > button:only-child {
@@ -55,5 +55,5 @@
 
 .footnote {
   display: grid;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css

@@ -1,6 +1,6 @@
 .buttons {
   display: flex;
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
   justify-content: flex-end;
   padding: var(--Space-x2) var(--Space-x15) 0 0;
 }

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   padding: var(--Space-x15);
   background-color: var(--Base-Surface-Secondary-light-Normal);
   border-radius: var(--Corner-radius-md);

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css

@@ -1,7 +1,7 @@
 .modalContent {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .termsAndConditions {

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/selectAncillaryStep.module.css

@@ -4,19 +4,19 @@
 
 .tabs {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
-  padding: var(--Spacing-x3) 0;
+  padding: var(--Space-x3) 0;
   flex-wrap: wrap;
 }
 
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(251px, 1fr));
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   height: 470px;
   overflow-y: auto;
   padding-right: var(--Space-x15);
-  margin-top: var(--Spacing-x2);
+  margin-top: var(--Space-x2);
 }
 
 .chip {

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css

@@ -11,7 +11,7 @@
   padding: var(--Space-x2) var(--Space-x3);
   background-color: var(--Surface-Primary-OnSurface-Default);
   border-radius: var(--Corner-radius-md);
-  margin-bottom: var(--Spacing-x1);
+  margin-bottom: var(--Space-x1);
 }
 
 .selectTitle {
@@ -45,7 +45,7 @@
 .breakfastPrices {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   align-self: stretch;
 }
 
@@ -58,7 +58,7 @@
   background: var(--Surface-Feedback-Information-light);
 
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   align-self: stretch;
 }
 

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css

@@ -24,7 +24,7 @@
 
 .price {
   display: flex;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   align-items: center;
 }
 
@@ -45,7 +45,7 @@
 
 .description {
   display: flex;
-  margin: var(--Spacing-x2) 0;
+  margin: var(--Space-x2) 0;
 }
 
 .pointsDivider {

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .header {
@@ -9,12 +9,12 @@
   flex-direction: column;
   justify-content: space-between;
   gap: var(--Space-x15);
-  margin-top: var(--Spacing-x5);
+  margin-top: var(--Space-x5);
 }
 
 @media (min-width: 768px) {
   .container {
-    gap: var(--Spacing-x3);
+    gap: var(--Space-x3);
   }
   .header {
     align-items: center;
@@ -25,7 +25,7 @@
 .deliveryTime {
   display: flex;
   justify-content: space-between;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .ancillaryMobile {
@@ -33,16 +33,16 @@
   border-radius: var(--Corner-radius-md);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .ancillaryDesktop {
   display: none;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
   background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 @media (min-width: 768px) {
@@ -61,40 +61,40 @@
 
 .paymentMobile {
   display: flex;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   align-items: center;
 }
 .commentMobile {
-  margin-bottom: var(--Spacing-x3);
+  margin-bottom: var(--Space-x3);
 }
 
 .footerMobile {
   display: flex;
-  margin-top: var(--Spacing-x4);
+  margin-top: var(--Space-x4);
 }
 
 .specification {
   display: flex;
   justify-content: space-between;
-  padding: var(--Spacing-x1) 0;
+  padding: var(--Space-x1) 0;
 }
 
 .name {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   align-items: center;
 }
 
 .payment {
   display: flex;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   align-items: center;
 }
 
 .footer {
   display: flex;
   justify-content: space-between;
-  padding: var(--Spacing-x1) 0;
+  padding: var(--Space-x1) 0;
 }
 
 .comment {
@@ -104,5 +104,5 @@
 
 .actions {
   display: flex;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ancillaries.module.css

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   margin: 0 auto;
   width: var(--max-width-content);
 }
@@ -35,6 +35,6 @@
   .ancillaries {
     display: grid;
     grid-template-columns: repeat(4, minmax(251px, 1fr));
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
   }
 }

apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .image {
@@ -16,7 +16,7 @@
   flex-direction: column;
   height: 100%;
   text-align: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .bottomContent {
@@ -25,14 +25,14 @@
 
 .links {
   display: flex;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   padding-bottom: 10px;
 }
 
 .link {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .supportingText {

apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css

@@ -1,8 +1,8 @@
 .bookingSummary {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x5);
+  gap: var(--Space-x5);
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
 }
 
 .bookingSummaryContent {

apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/guestDetails.module.css

@@ -3,9 +3,9 @@
   flex-direction: column;
   align-items: center;
   background-color: var(--Main-Brand-PalePeach);
-  padding: var(--Spacing-x3) 0;
+  padding: var(--Space-x3) 0;
   border-radius: var(--Corner-radius-md);
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .memberLevel {
@@ -20,17 +20,17 @@
 }
 
 .rowTitle {
-  margin-bottom: var(--Spacing-x1);
+  margin-bottom: var(--Space-x1);
 }
 
 .userDetails {
   width: 80%;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider);
-  padding-bottom: var(--Spacing-x3);
+  padding-bottom: var(--Space-x3);
   text-align: center;
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   color: var(--Scandic-Brand-Burgundy);
   align-items: center;
 }
@@ -39,9 +39,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   justify-content: space-between;
-  padding-top: var(--Spacing-x3);
+  padding-top: var(--Space-x3);
 }
 
 .totalPointsText {
@@ -54,7 +54,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .memberNumber {
@@ -63,7 +63,7 @@
 .contactInfoMobile {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   text-align: center;
 }
 
@@ -87,7 +87,7 @@
   }
   .guestDetails {
     align-items: flex-start;
-    padding: var(--Spacing-x3) var(--Space-x15);
+    padding: var(--Space-x3) var(--Space-x15);
   }
   .contactInfoMobile,
   .userDetailsTitle {
@@ -96,7 +96,7 @@
   .contactInfoDesktop {
     display: flex;
     flex-direction: column;
-    gap: var(--Spacing-x-half);
+    gap: var(--Space-x05);
   }
   .totalPoints {
     padding: var(--Space-x15) 0;

apps/scandic-web/components/HotelReservation/MyStay/Header/header.module.css

@@ -4,8 +4,8 @@ header .title {
   left: 0;
   right: 0;
   margin: 0 auto;
-  padding-top: var(--Spacing-x6);
+  padding-top: var(--Space-x6);
-  margin-top: var(--Spacing-x2);
+  margin-top: var(--Space-x2);
 }
 
 .title .hotelName {

apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Body/body.module.css

@@ -1,7 +1,7 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   max-height: 70vh;
   overflow-y: auto;
   width: 100%;

apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/footer.module.css

@@ -2,6 +2,6 @@
   border-top: 1px solid var(--Base-Border-Subtle);
   display: flex;
   justify-content: space-between;
-  padding-top: var(--Spacing-x3);
+  padding-top: var(--Space-x3);
   width: 100%;
 }

apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/modifyContact.module.css

@@ -1,13 +1,13 @@
 .container {
   background-color: var(--Background-Primary);
-  padding: var(--Spacing-x2) var(--Spacing-x1) var(--Spacing-x3);
+  padding: var(--Space-x2) var(--Space-x1) var(--Space-x3);
   border-radius: var(--Corner-radius-md);
 }
 
 .row {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
-  margin-bottom: var(--Spacing-x2);
+  margin-bottom: var(--Space-x2);
   width: 100%;
 }
 
@@ -23,7 +23,7 @@
   .container {
     width: 700px;
     max-width: 100%;
-    padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x3);
+    padding: var(--Space-x2) var(--Space-x3) var(--Space-x3);
   }
   .gridEqual {
     grid-template-columns: 1fr 1fr;

apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css

@@ -12,9 +12,9 @@
   display: flex;
   flex: 1 0 100%;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   justify-content: center;
-  padding: var(--Spacing-x4) var(--Spacing-x3);
+  padding: var(--Space-x4) var(--Space-x3);
   color: var(--UI-Opacity-White-100);
   text-align: center;
 }

apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/footer.module.css

@@ -1,5 +1,5 @@
 .dl {
-  padding: 0 var(--Spacing-x2);
+  padding: 0 var(--Space-x2);
 
   display: flex;
 }

apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/specification.module.css

@@ -1,8 +1,8 @@
 .container {
   display: flex;
-  padding: 0 var(--Spacing-x2);
+  padding: 0 var(--Space-x2);
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .tertiary {
@@ -12,7 +12,7 @@
 .dl {
   display: grid;
   grid-template-columns: auto auto;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   padding: 8px 0;
 }
 

apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css

@@ -6,7 +6,7 @@
   color: var(--Text-Tertiary);
   font-weight: var(--Body-Supporting-text-Font-weight-2);
   font-size: var(--Body-Supporting-text-Size);
-  margin-right: var(--Spacing-x-half);
+  margin-right: var(--Space-x05);
 }
 
 .titleSubtext {
@@ -16,9 +16,8 @@
 
 .totalContainer {
   border: 1px solid var(--Border-Divider-Subtle);
-  border-radius: var(--Spacing-x1);
+  border-radius: var(--Space-x1);
-  padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2)
+  padding: var(--Space-x15) var(--Space-x2) var(--Space-x2) var(--Space-x2);
-    var(--Spacing-x2);
   flex-direction: column;
   align-items: stretch;
   gap: var(--Space-x15);
@@ -28,7 +27,7 @@
 .dl {
   display: grid;
   grid-template-columns: auto auto;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   padding: 8px 0;
 }
 

apps/scandic-web/components/HotelReservation/MyStay/Receipt/receipt.module.css

@@ -1,15 +1,15 @@
 .main {
   background-color: var(--Base-Surface-Primary-light-Normal);
   display: flex;
-  padding: var(--Spacing-x5) var(--Spacing-x4);
+  padding: var(--Space-x5) var(--Space-x4);
   flex-direction: column;
-  gap: var(--Spacing-x5);
+  gap: var(--Space-x5);
 }
 
 .addresses {
   display: flex;
   justify-content: space-between;
-  margin-top: var(--Spacing-x2);
+  margin-top: var(--Space-x2);
 }
 
 .rightColumn {
@@ -17,7 +17,7 @@
 }
 
 .addressMargin {
-  margin-top: var(--Spacing-x-half);
+  margin-top: var(--Space-x05);
 }
 
 .tertiary {
@@ -32,14 +32,14 @@
   max-width: 640px;
   margin-left: auto;
   margin-right: auto;
-  padding: var(--Spacing-x5) 0;
+  padding: var(--Space-x5) 0;
 }
 
 .logIn {
-  padding: var(--Spacing-x9) var(--Spacing-x2);
+  padding: var(--Space-x9) var(--Space-x2);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   align-items: center;
   color: var(--Scandic-Grey-100);
 }

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/cancelStay.module.css

@@ -5,22 +5,22 @@
 .modalText {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .rooms {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .roomContainer {
   display: flex;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
   background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .roomInfo {

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/confirmation.module.css

@@ -1,11 +1,11 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .dateComparison {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/newDates.module.css

@@ -1,17 +1,17 @@
 .container {
   background-color: var(--Background-Primary);
-  padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x3);
+  padding: var(--Space-x2) var(--Space-x3) var(--Space-x3);
   border-radius: var(--Corner-radius-md);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .checkInDate,
 .checkOutDate {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .trigger {
@@ -26,7 +26,7 @@
   justify-content: space-between;
   min-width: 0;
   /* allow shrinkage */
-  padding: var(--Spacing-x1) var(--Spacing-x2);
+  padding: var(--Space-x1) var(--Space-x2);
   transition: border-color 200ms ease;
 }
 

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/Form/form.module.css

@@ -10,13 +10,13 @@
 
 .form {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .termsAndConditions {
   color: var(--Text-Secondary);
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .termsAndConditions .checkbox span {
@@ -28,9 +28,9 @@
   background-color: var(--Base-Surface-Subtle-Normal);
   border-radius: var(--Corner-radius-md);
   display: flex;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   justify-content: flex-end;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
 }
 
 .guaranteeCostText {

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/actions.module.css

@@ -1,12 +1,12 @@
 .actionArea {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 @media (min-width: 768px) {
   .actionArea {
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
     grid-template-columns: 1fr 1fr;
-    padding-top: var(--Spacing-x3);
+    padding-top: var(--Space-x3);
   }
 }

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css

@@ -1,6 +1,6 @@
 .priceContainer {
   display: flex;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
   background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
   align-items: center;
@@ -9,14 +9,14 @@
 
 .info {
   border-right: 1px solid var(--Base-Border-Subtle);
-  padding-right: var(--Spacing-x2);
+  padding-right: var(--Space-x2);
   text-align: right;
   display: flex;
   flex-direction: column;
 }
 
 .wrapper {
-  padding-left: var(--Spacing-x2);
+  padding-left: var(--Space-x2);
   display: flex;
   align-items: center;
 }

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css

@@ -7,7 +7,7 @@
   gap: var(--Space-x1);
   margin: 0 auto;
   max-width: 588px;
-  padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
+  padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
   width: var(--max-width-content);
 }
 

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css

@@ -1,23 +1,23 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .title {
   color: var(--Scandic-Brand-Burgundy);
-  padding: 0 var(--Spacing-x2);
+  padding: 0 var(--Space-x2);
 }
 
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x5);
+  gap: var(--Space-x5);
 }
 
 .roomsContainer {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   grid-template-columns: 1fr;
   width: 100%;
 }
@@ -25,14 +25,14 @@
 .totalContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
-  padding: 0 var(--Spacing-x2);
+  padding: 0 var(--Space-x2);
 }
 
 .total {
   display: flex;
   justify-content: flex-end;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 @media (min-width: 768px) {

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/sidePeek.module.css

@@ -4,5 +4,5 @@
   border-radius: var(--Corner-radius-sm);
   cursor: pointer;
   display: flex;
-  padding: var(--Spacing-x-half);
+  padding: var(--Space-x05);
 }

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css

@@ -2,9 +2,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   padding: var(--Space-x15) 0;
-  width: calc(100% - var(--Spacing-x4));
+  width: calc(100% - var(--Space-x4));
   justify-content: center;
   margin: 0 auto;
 }
@@ -12,7 +12,7 @@
 .price {
   align-items: center;
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   justify-content: space-between;
   width: 100%;
 }

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css

@@ -5,8 +5,8 @@
   border-radius: var(--Corner-radius-md);
   display: flex;
   flex-direction: column-reverse;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
-  margin: 0 var(--Spacing-x2);
+  margin: 0 var(--Space-x2);
 }
 
 @media (min-width: 768px) {

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/details.module.css

@@ -1,6 +1,6 @@
 .details {
   max-width: 100%;
-  padding: 0 var(--Spacing-x2);
+  padding: 0 var(--Space-x2);
 }
 
 @media (min-width: 768px) {

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css

@@ -1,7 +1,7 @@
 .header {
   display: flex;
   gap: var(--Space-x15);
-  padding: 0 var(--Spacing-x2);
+  padding: 0 var(--Space-x2);
 }
 
 .container {
@@ -13,12 +13,12 @@
   background-color: var(--Scandic-Peach-30);
   color: var(--Scandic-Red-100);
   border-radius: var(--Corner-radius-sm);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  padding: var(--Space-x05) var(--Space-x1);
 }
 
 .reference {
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .sidePeek {