syntax fix

src/renderer/src/app.scss

@@ -33,7 +33,7 @@ body {
   overflow: hidden;
   user-select: none;
   font-family: "Noto Sans, sans-serif";
-  font-size: 14px; // Assuming vars.size.body is 14px
+  font-size: $body-font-size;
   color: $body-color;
   margin: 0;
 }
@@ -79,7 +79,7 @@ input::-webkit-inner-spin-button {
 }
 
 label {
-  font-size: 14px; // Assuming vars.size.body is 14px
+  font-size: $body-font-size;
 }
 
 input[type="number"] {

src/renderer/src/components/toast/toast.scss

@@ -35,12 +35,12 @@
   z-index: $toast-z-index;
   max-width: 500px;
 
-  &__closing {
+  &--closing {
     animation-name: slideOut;
     transform: translateY(96px);
   }
 
-  &__opening {
+  &--opening {
     animation-name: slideIn;
     transform: translateY(0);
   }

src/renderer/src/pages/achievements/achievement-panel.scss

@@ -49,7 +49,7 @@
       background-color: $color-muted;
     }
 
-    &__disabled {
+    &--disabled {
       opacity: $opacity-disabled;
     }
   }

src/renderer/src/pages/settings/settings-download-sources.scss

@@ -45,7 +45,7 @@
     text-decoration: underline;
     cursor: pointer;
 
-    &:disabled {
+    &--disabled {
       cursor: default;
       text-decoration: none;
     }

src/renderer/src/scss/_variables.scss

@@ -38,6 +38,10 @@ $small-font-size: 12px;
 $app-container: app-container;
 
 :root {
+  --warning-color: #{$warning-color};
+  --dark-background-color: #{$dark-background-color};
   --background-color: #{$background-color};
   --spacing-unit: #{$spacing-unit};
+  --body-color: #{$body-color};
+  --border-color: #{$border-color};
 }