add secondary colors to css variables

src/index.css

@@ -4,7 +4,8 @@
 :root {
   --background: #f7f7f7;
   --foreground: #181818;
-  --primary-light: #fff;
+  --secondary-background: #ffffff;
+  --secondary-foreground: #0a0a0a;
   --primary-dark: #0a0a0a;
   --primary: #ffb700;
   --primary2: #ffc600;
@@ -33,7 +34,9 @@
 /* Dark theme variables */
 [data-theme="dark"] {
   --background: #181818;
-  --foreground: #ffffff;
+  --foreground: #f7f7f7;
+  --secondary-background: #0a0a0a;
+  --secondary-foreground: #ffffff;
 }
 
 html,

src/pages/cart/components/cartFooter/footer.module.css

@@ -9,8 +9,9 @@
   flex-direction: row;
   justify-content: space-around;
   gap: 1rem;
-  background-color: var(--primary-light);
+  background-color: var(--secondary-background);
   box-shadow: none;
+  z-index: 999;
 }
 /* :global(.darkApp) .cartFooter {
   background-color: var(--background) !important;