Replace legacy $spacing-X vars with Compound Design Tokens (#34380)

* Replace legacy `$spacing-X` vars with Compound Design Tokens

* Remove unused font size vars

* Use calc to get negative spacing vars

apps/web/res/css/views/elements/_GenericEventListSummary.pcss

@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
     position: relative;
 
     .mx_GenericEventListSummary_avatars {
-        margin-right: $spacing-8;
+        margin-right: var(--cpd-space-2x);
     }
 
     .mx_GenericEventListSummary_spacer {
@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     &[data-layout="group"] {
-        margin-top: $spacing-8;
+        margin-top: var(--cpd-space-2x);
     }
 
     &[data-layout="bubble"] {
@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_MatrixChat_useCompactLayout & {
         font-size: $font-13px;
-        margin-top: $spacing-4;
+        margin-top: var(--cpd-space-1x);
 
         .mx_EventTile_line {
             line-height: 1.25;

apps/web/res/css/views/elements/_ServerPicker.pcss

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ServerPicker {
     margin-bottom: 14px;
-    padding-bottom: $spacing-16;
+    padding-bottom: var(--cpd-space-4x);
     border-bottom: 1px solid rgb(141, 151, 165, 0.2);
     display: grid;
     grid-template-columns: auto min-content;