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/components/views/settings/shared/_SettingsSubsection.pcss

@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_SettingsSubsection_description {
-    margin-top: $spacing-8;
+    margin-top: var(--cpd-space-2x);
 }
 
 .mx_SettingsSubsection_text {
@@ -44,14 +44,14 @@ Please see LICENSE files in the repository root for full details.
     /* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */
     grid-template-columns: minmax(0, 1fr);
     justify-items: flex-start;
-    margin-top: $spacing-24;
+    margin-top: var(--cpd-space-6x);
 
     summary {
         color: $accent;
     }
     details[open] {
         summary {
-            margin-bottom: $spacing-8;
+            margin-bottom: var(--cpd-space-2x);
         }
     }
 

apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss

@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     flex-direction: row;
 
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
 }
 
 .mx_SettingsSubsectionHeading_heading {