add css kv var, move away from ssr ( multiple queries ), remove colors kv var, add option to disable logging per route

public/css/index.css

@@ -40,6 +40,39 @@
 	}
 }
 
+#loading-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: rgba(0, 0, 0, 0.8);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 99999;
+
+	transition: opacity 0.5s ease;
+}
+
+.loading-spinner {
+	width: 50px;
+	height: 50px;
+	border: 5px solid var(--border-color);
+	border-top: 5px solid var(--progress-fill);
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 /* actual styles below */
 body {
 	font-family: system-ui, sans-serif;

public/css/root.css

@@ -0,0 +1,29 @@
+:root {
+	--background: #0e0e10;
+	--readme-bg: #1a1a1d;
+	--card-bg: #1e1f22;
+	--card-hover-bg: #2a2a2d;
+	--border-color: #2e2e30;
+
+	--text-color: #ffffff;
+	--text-subtle: #bbb;
+	--text-secondary: #b5bac1;
+	--text-muted: #888;
+	--link-color: #00b0f4;
+
+	--button-bg: #5865f2;
+	--button-hover-bg: #4752c4;
+	--button-disabled-bg: #2d2e31;
+
+	--progress-bg: #f23f43;
+	--progress-fill: #5865f2;
+
+	--status-online: #23a55a;
+	--status-idle: #f0b232;
+	--status-dnd: #e03e3e;
+	--status-offline: #747f8d;
+	--status-streaming: #b700ff;
+
+	--blockquote-color: #aaa;
+	--code-bg: #2e2e30;
+}