Fixed colour styling in CSS and js.

Scripts/Garden/Garden.js

@@ -556,14 +556,20 @@ function RenderGarden() {
     );
 
     const GardenBorderColours = [
-        "var(--Lavender)",
+        "var(--Rosewater)",
-        "var(--Mauve)",
+        "var(--Flamingo)",
         "var(--Pink)",
-        "var(--Blue)",
+        "var(--Mauve)",
-        "var(--Teal)",
+        "var(--Red)",
+        "var(--Maroon)",
         "var(--Peach)",
         "var(--Yellow)",
-        "var(--Green)"
+        "var(--Green)",
+        "var(--Teal)",
+        "var(--Sky)",
+        "var(--Sapphire)",
+        "var(--Blue)",
+        "var(--Lavender)"
     ];
 
     GardenPanel.style.setProperty(

Styles/Style.css

@@ -7,32 +7,31 @@
 
 :root, :root[data-palette="CatppuccinMocha"] {
     --Rosewater: #f5e0dc;
-    --Flamingo: #f2cdcd;
+    --Flamingo:  #f2cdcd;
-    --Pink: #f5c2e7;
+    --Pink:      #f5c2e7;
-    --Mauve: #cba6f7;
+    --Mauve:     #cba6f7;
-    --Red: #f38ba8;
+    --Red:       #f38ba8;
-    --Maroon: #eba0ac;
+    --Maroon:    #eba0ac;
-    --Peach: #fab387;
+    --Peach:     #fab387;
-    --Yellow: #f9e2af;
+    --Yellow:    #f9e2af;
-    --Green: #a6e3a1;
+    --Green:     #a6e3a1;
-    --Teal: #94e2d5;
+    --Teal:      #94e2d5;
-    --Sky: #89dceb;
+    --Sky:       #89dceb;
-    --Sapphire: #74c7ec;
+    --Sapphire:  #74c7ec;
-    --Blue: #89b4fa;
+    --Blue:      #89b4fa;
-    --Lavender: #b4befe;
+    --Lavender:  #b4befe;
-    --Text: #cdd6f4;
+    --Text:      #cdd6f4;
-    --Subtext1: #bac2de;
+    --Subtext1:  #bac2de;
-    --Subtext0: #a6adc8;
+    --Subtext0:  #a6adc8;
-    --Overlay2: #9399b2;
+    --Overlay2:  #9399b2;
-    --Overlay1: #7f849c;
+    --Overlay1:  #7f849c;
-    --Overlay0: #6c7086;
+    --Overlay0:  #6c7086;
-    --Surface2: #585b70;
+    --Surface2:  #585b70;
-    --Surface1: #45475a;
+    --Surface1:  #45475a;
-    --Surface0: #313244;
+    --Surface0:  #313244;
-    --Base: #1e1e2e;
+    --Base:      #1e1e2e;
-    --Mantle: #181825;
+    --Mantle:    #181825;
-    --Crust: #11111b;
+    --Crust:     #11111b;
-    --PlantBackground: var(--Surface0);
 }
 
 html {
@@ -103,7 +102,7 @@ body {
 
 .PlantTile {
     overflow: hidden;
-    background-color: var(--PlantBackground);
+    background-color: var(--Surface0);
     border: 3px solid var(--Surface2);
 }
 
@@ -379,7 +378,7 @@ input, button, textarea, select {
     --GrowthProgress: 0%;
     --GrowthColour: var(--Green);
     --PlotBorderColour: var(--Surface2);
-    --TileBackground: var(--PlantBackground);
+    --TileBackground: var(--Surface0);
     position: relative;
     display: grid;
     width: 100%;
@@ -454,7 +453,7 @@ input, button, textarea, select {
 }
 
 .GardenPlotEmpty:hover {
-    --TileBackground: var(--PlantBackground);
+    --TileBackground: var(--Surface0);
 }
 
 .GardenPlotMature:hover {
@@ -1424,17 +1423,17 @@ input, button, textarea, select {
 
 .MutationRecipeMatcher {
     color: var(--Sky);
-    background-color: var(--PlantBackground);
+    background-color: var(--Surface0);
 }
 
 .MutationRecipeKeep {
     color: var(--Subtext1);
-    background-color: var(--PlantBackground);
+    background-color: var(--Surface0);
 }
 
 .MutationRecipeCapture {
     color: var(--Lavender);
-    background-color: var(--PlantBackground);
+    background-color: var(--Surface0);
 }
 
 .MutationRecipeText {