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;
   }
 
 
@@ -138,7 +136,7 @@ $fa-font-path: "~font-awesome/fonts";
       font-size: 14px !important;
       padding-top: 10px !important;
       padding-bottom: 10px !important;
-      border: 1px solid $light-500 !important;
+      border: 1px solid var(--pgn-color-light-500) !important;
     }
 
     .dropdown-item {