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/_common.pcss

@@ -11,15 +11,14 @@ Please see LICENSE files in the repository root for full details.
 
 @import "./_font-sizes.pcss";
 @import "./_animations.pcss";
-@import "./_spacing.pcss";
 
 :root {
     --container-border-width: 8px;
     --container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
     --transition-short: 0.1s;
     --transition-standard: 0.3s;
-    --buttons-dialog-gap-row: $spacing-8;
-    --buttons-dialog-gap-column: $spacing-8;
+    --buttons-dialog-gap-row: var(--cpd-space-2x);
+    --buttons-dialog-gap-column: var(--cpd-space-2x);
     --MBody-border-radius: 8px;
     --EventTileBubble_margin-block: 10px;
     --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
@@ -532,7 +531,7 @@ legend {
 }
 
 .mx_Dialog_buttons {
-    margin-top: $spacing-20;
+    margin-top: var(--cpd-space-5x);
     margin-inline-start: auto;
     text-align: right;
 
@@ -872,7 +871,7 @@ legend {
     font-weight: var(--cpd-font-weight-semibold);
     white-space: nowrap;
     position: relative;
-    padding: 0 $spacing-12 0 $spacing-8;
+    padding: 0 var(--cpd-space-3x) 0 var(--cpd-space-2x);
 }
 
 @define-mixin ThreadSummaryIcon {