fix/improve colors usage

frontend/src/components/Status/index.tsx

@@ -22,7 +22,7 @@ export default component$((props: Props) => {
 	const handleContentClick = $(() => nav(statusUrl))
 
 	return (
-		<div class="p-4 border-t border-wildebeest-600 pointer">
+		<div class="p-4 border-t border-wildebeest-700 pointer">
 			<div onClick$={handleContentClick}>
 				<div class="flex justify-between mb-3">
 					<div class="flex">

frontend/src/routes/(frontend)/explore/layout.scss

@@ -1,5 +1,5 @@
 .active {
-  color: #dcebfe;
+  color: var(--wildebeest-color-200);
   position: relative;
 
   &::before,
@@ -12,7 +12,7 @@
     width: 0;
     height: 0;
     transform: translateX(-50%);
-    border-color: transparent transparent #9baec8;
+    border-color: transparent transparent var(--wildebeest-color-400);
     border-style: solid;
     border-width: 0 10px 10px;
     bottom: -1px;
@@ -20,6 +20,6 @@
 
   &::after {
     bottom: -1px;
-    border-color: transparent transparent var(--wildebeest-color-700);
+    border-color: transparent transparent var(--wildebeest-color-600);
   }
 }

frontend/src/styles.scss

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+:root, ::before, ::after {
 	// Change the value of wildebeest-hue to change the hue/base color
 	// of the whole wildebeest application
 	--wildebeest-hue: 225;