refactor: update styles to css variables

Author: dcoa

src/index.scss

@@ -1,10 +1,8 @@
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
 
@@ -120,7 +118,7 @@ $fa-font-path: "~font-awesome/fonts";
   .dropdown-item:active,
   .dropdown-item:focus, 
   .btn-tertiary:not(:disabled):not(.disabled).active {
-    background-color: $light-300 !important;
+    background-color: var(--pgn-color-light-300) !important;
   }