add initial components and utility functions for simulation and builder modules

app/src/styles/abstracts/variables.scss

@@ -71,7 +71,7 @@ $font-roboto: "Roboto", sans-serif; // Roboto font
 // Font sizes (converted to rem using a utility function)
 $tiny: 0.625rem; // Extra small text (10px)
 $small: 0.75rem; // Small text (12px)
-$regular: 0.875rem; // Default text size (14px)
+$regular: 0.8rem; // Default text size (14px)
 $large: 1rem; // Large text size (16px)
 $xlarge: 1.125rem; // Extra large text size (18px)
 $xxlarge: 1.5rem; // Double extra large text size (24px)
@@ -89,6 +89,10 @@ $bold-weight: 600; // Bold font weight
 
 // Z-index variables for layering
 $z-index-drei-html: 1; // For drei's Html components
+$z-index-default: 1; // For drei's Html components
+$z-index-marketplace: 2; // For drei's Html components
+$z-index-tools: 3; // For drei's Html components
+$z-index-negative: -1; // For drei's Html components
 $z-index-ui-base: 10; // Base UI elements
 $z-index-ui-overlay: 20; // Overlay UI elements (e.g., modals, tooltips)
 $z-index-ui-popup: 30; // Popups, dialogs, or higher-priority UI elements

app/src/styles/components/moduleToggle.scss

@@ -10,6 +10,7 @@
   left: 50%;
   top: 32px;
   transform: translateX(-50%);
+  z-index: #{$z-index-tools};
   .module-list {
     display: flex;
     align-items: center;

app/src/styles/components/tools.scss

@@ -14,6 +14,7 @@
   width: fit-content;
   transition: width 0.2s;
   background-color: var(--background-color);
+  z-index: #{$z-index-tools};
   .split {
     height: 20px;
     width: 2px;
@@ -72,6 +73,7 @@
         box-shadow: #{$box-shadow-medium};
         padding: 8px;
         border-radius: #{$border-radius-large};
+        background: var(--background-color);
         .option-list {
           margin: 4px 0;
           display: flex;

app/src/styles/layout/sidebar.scss

@@ -9,7 +9,7 @@
   background-color: var(--background-color);
   border-radius: #{$border-radius-extra-large};
   box-shadow: #{$box-shadow-medium};
-
+  z-index: #{$z-index-tools};
   .header-container {
     @include flex-space-between;
     padding: 10px;
@@ -179,6 +179,7 @@
   background-color: var(--background-color);
   border-radius: #{$border-radius-extra-large};
   box-shadow: #{$box-shadow-medium};
+  z-index: #{$z-index-tools};
 
   .header-container {
     @include flex-space-between;

app/src/styles/layout/toast.scss

@@ -1,9 +1,13 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 .toast-container {
   position: fixed;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   gap: 10px;
+  z-index: #{$z-index-ui-highest};
 }
 
 .toast-container.bottom-center {