Replace Sass variables with custom properties on _font-weights.pcss (#10554)

* Replace `$font-normal` and `$font-semi-bold`

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace `font-weight: 600` with the custom property

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace the existing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/views/right_panel/_BaseCard.pcss

@@ -34,7 +34,7 @@ limitations under the License.
         > h2 {
             margin: 0 44px; /* TODO: Use a spacing variable */
             font-size: $font-18px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -199,7 +199,7 @@ limitations under the License.
         .mx_AccessibleButton_kind_secondary {
             color: $secondary-content;
             background-color: rgba(141, 151, 165, 0.2);
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             font-size: $font-14px;
         }
 
@@ -227,7 +227,7 @@ limitations under the License.
         position: initial;
 
         span:first-of-type {
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             font-size: inherit;
             color: $primary-content;
         }