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/location/_LocationPicker.pcss

@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
 
         .maplibregl-ctrl.maplibregl-ctrl-group,
         .maplibregl-ctrl.maplibregl-ctrl-attrib {
-            margin-right: $spacing-16;
+            margin-right: var(--cpd-space-4x);
         }
 
         .maplibregl-ctrl.maplibregl-ctrl-group {
@@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details.
         flex: 0;
         width: 100%;
         box-sizing: border-box;
-        padding: $spacing-16;
+        padding: var(--cpd-space-4x);
         display: flex;
         flex-direction: column;
         justify-content: stretch;
@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_LocationPicker_pinText {
     position: absolute;
-    top: $spacing-16;
+    top: var(--cpd-space-4x);
     width: 100%;
     box-sizing: border-box;
     text-align: center;
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
     span {
         box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15);
         border-radius: 8px;
-        padding: $spacing-8;
+        padding: var(--cpd-space-2x);
         background-color: $background;
         color: $primary-content;