style: change primary color

src/components/buttons/play/play.module.css

@@ -6,10 +6,10 @@
   justify-content: center;
   border: none;
   border-radius: 100px;
-  border-top: 2px solid #818cf8;
+  border-top: 2px solid #34d399;
-  border-bottom: 3px solid #4f46e5;
+  border-bottom: 3px solid #059669;
-  background-color: #6366f1;
+  background-color: #10b981;
-  color: var(--color-foreground);
+  color: #022c22;
   cursor: pointer;
   font-family: var(--font-heading);
   font-size: var(--font-base);

src/components/buttons/unselect/unselect.module.css

@@ -23,10 +23,10 @@
   }
 
   &.restore {
-    border-top-color: #34d399;
+    border-top-color: var(--color-neutral-950);
-    border-bottom-color: #047857;
+    border-bottom-color: var(--color-neutral-600);
-    background-color: #10b981;
+    background-color: var(--color-neutral-700);
-    color: var(--color-foreground);
+    color: var(--color-neutral-200);
   }
 }
 

src/components/sections/why/why.module.css

@@ -37,7 +37,7 @@
       border-radius: 12px;
       margin-bottom: 12px;
       background: linear-gradient(var(--color-neutral-100), transparent);
-      color: #818cf8;
+      color: #34d399;
       font-size: var(--font-lg);
     }
 

src/components/sound/sound.module.css

@@ -72,11 +72,11 @@
   &.selected {
     border-color: transparent;
     box-shadow:
-      0 0 0 2px #818cf8,
+      0 0 0 2px #34d399,
-      0 10px 20px #818cf833;
+      0 10px 20px #34d39933;
 
     & .icon {
-      color: #818cf8;
+      color: #34d399;
     }
   }
 

src/components/sounds/sounds.module.css

@@ -44,7 +44,7 @@
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background-color: #818cf8;
+    background-color: #34d399;
     content: '';
   }
 }