fix: do my best to tame the SCSS (Paragon was included dozens of times)

src/App.jsx

@@ -29,6 +29,7 @@ import AppWrapper from '@/containers/WidgetContainers/AppWrapper';
 import LearnerDashboardHeader from '@/containers/LearnerDashboardHeader';
 
 import messages from './messages';
+import './App.scss';
 
 export const App = () => {
   const { authenticatedUser } = React.useContext(AppContext);

src/App.scss

@@ -1,6 +1,9 @@
+@import "./variables.scss";
+
 $fa-font-path: "@font-awesome/fonts";
-@import "@font-awesome/scss/font-awesome";
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+@import "font-awesome/scss/font-awesome";
+@import "@openedx/paragon/src/Form/_variables.scss"; // for $input-box-shadow. TODO: fix this so it's included in Paragon root variables export
+$input-focus-box-shadow: $input-box-shadow;
 
 .text-ellipsis {
   overflow: hidden;

src/containers/CourseCard/CourseCard.scss

@@ -1,4 +1,6 @@
-@import "@openedx/paragon/scss/core/core";
+@import "../../variables.scss";
+@import "@openedx/paragon/src/Card/_variables.scss";  // TODO: fix paragon so these are included in the root vars export
+@import "@openedx/paragon/src/Alert/_variables.scss";
 
 .course-card {
   .card {

src/containers/CourseCard/components/CourseCardDetails/index.scss

@@ -1,6 +1,5 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+@import "../../../../variables.scss";
+
 
 a.course-card-title {
   color: $black;

src/containers/CoursesPanel/NoCoursesView/index.scss

@@ -1,4 +1,4 @@
-@import "@openedx/paragon/scss/core/core";
+@import "../../../variables.scss";
 
 #no-courses-content-view {
   border: 2px solid $light-400;

src/containers/CoursesPanel/index.scss

@@ -1,4 +1,4 @@
-@import "@openedx/paragon/scss/core/core";
+@import "../../variables.scss";
 
 .course-list-heading-container {
   display: flex;

src/containers/Dashboard/index.scss

@@ -1,4 +1,4 @@
-@import "@openedx/paragon/scss/core/core";
+@import "../../variables.scss";
 
 .course-list-column {
   padding: 0 map-get($spacers, 4);

src/containers/MasqueradeBar/index.scss

@@ -1,4 +1,4 @@
-@import "@openedx/paragon/scss/core/core";
+@import "../../variables.scss";
 
 .masquerade-bar {
   display: flex;

src/embed-learner-dashboard.tsx

@@ -9,7 +9,6 @@ import store from './data/store';
 
 import App from './App';
 import NoticesWrapper from './components/NoticesWrapper';
-import './embed.scss';
 
 export const LearnerDashboardApp = () => {
 

src/index.scss

@@ -4,5 +4,3 @@
 @import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 @import "~@edx/frontend-component-footer/dist/_footer";
-
-@import "./App";

src/embed-learner-dashboard.scss → src/variables.scss

@@ -1,8 +1,7 @@
+// This imports all the [theme] variables, mixins, and functions that our SCSS files need,
+// but doesn't define any rules, because doing so would result in duplicate rules in the bundle.
 @import "@edx/brand/paragon/variables";
-// We need the Paragon variables and mixins, but we don't want any actual rules since those are provided by the shell.
 // TODO: there should be a public export for this that doesn't rely on these internal _private files.
 @import "@openedx/paragon/scss/core/_functions";
 @import "@openedx/paragon/scss/core/_variables";
 @import "~bootstrap/scss/mixins";
-
-@import './App';

src/widgets/ProductRecommendations/index.scss

@@ -1,4 +1,4 @@
-@import "@openedx/paragon/scss/core/core";
+@import "../../variables.scss";
 
 $horizontal-card-gap: 20px;
 $vertical-card-gap: 24px;

src/widgets/RecommendationsPanel/components/index.scss

@@ -1,4 +1,4 @@
-@import "@openedx/paragon/scss/core/core";
+@import "../../../variables.scss";
 
 .card-link{
   display: block !important;

src/widgets/RecommendationsPanel/index.scss

@@ -1,4 +1,4 @@
-@import "@openedx/paragon/scss/core/core";
+@import "../../variables.scss";
 
 .explore-courses-btn {
   padding-top: 16px;