Fix styling issue when using EW modules (#31533)

* style: move compound loading order

* fix: spotlight fiting

* fix: don't use internal compound css var in settings subsection

* fix: don't use internaal compound css var in read receipt group

* fix: add important to font settings on body element

* fix: remove play pause button color and fix padding

This color wasn't apply because this PR. Removing to avoid visual
regression

* fix: add important to form help message override in preference settings

* fix: override compound in space panel buttons

* fix: layout of forgot password

* fix: height of encryption tab

* fix: widget avatar border radius

res/css/_common.pcss

@@ -9,8 +9,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
-@import url("@vector-im/compound-web/dist/style.css");
 @import "./_font-sizes.pcss";
 @import "./_animations.pcss";
 @import "./_spacing.pcss";
@@ -85,8 +83,9 @@ html {
 }
 
 body {
-    font: var(--cpd-font-body-md-regular);
-    letter-spacing: var(--cpd-font-letter-spacing-body-md);
+    /* !important because compound overrides these font settings for body */
+    font: var(--cpd-font-body-md-regular) !important;
+    letter-spacing: var(--cpd-font-letter-spacing-body-md) !important;
     /**
      * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
      * We need to tweak the `letter-spacing` property and doing so, disables by
@@ -97,7 +96,7 @@ body {
     font-feature-settings:
         "kern" 1,
         "liga" 1,
-        "calt" 1;
+        "calt" 1 !important;
 
     background-color: $background;
     color: $primary-content;