new look

web/src/index.css

@@ -1,26 +1,31 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@700;800;900&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-  --background: 282 33% 8%;
-  --foreground: 300 35% 95%;
-  --muted: 287 24% 16%;
-  --muted-foreground: 297 16% 72%;
-  --border: 287 24% 24%;
-  --input: 287 24% 24%;
-  --ring: 264 76% 70%;
-  --primary: 266 72% 67%;
-  --primary-foreground: 296 45% 12%;
-  --secondary: 277 24% 19%;
-  --secondary-foreground: 302 42% 94%;
-  --accent: 279 24% 22%;
-  --accent-foreground: 305 45% 94%;
-  --radius: 0.65rem;
+  color-scheme: dark;
+  --background: 235 45% 4%;
+  --foreground: 258 36% 96%;
+  --muted: 246 30% 13%;
+  --muted-foreground: 247 18% 68%;
+  --border: 251 35% 20%;
+  --input: 252 42% 24%;
+  --ring: 258 92% 70%;
+  --primary: 264 93% 66%;
+  --primary-foreground: 265 55% 98%;
+  --secondary: 244 32% 14%;
+  --secondary-foreground: 254 38% 94%;
+  --accent: 188 86% 50%;
+  --accent-foreground: 230 45% 8%;
+  --radius: 0.5rem;
 }
 
 * {
   @apply border-border;
+  scrollbar-color: hsl(263 92% 68% / 0.42) transparent;
+  scrollbar-width: thin;
 }
 
 html,
@@ -31,8 +36,47 @@ body,
 
 body {
   @apply bg-background text-foreground antialiased;
-  background-image: radial-gradient(circle at top, hsl(274 42% 18%) 0%, hsl(271 34% 12%) 42%, hsl(266 32% 7%) 100%);
-  font-family: "Soehne", "Avenir Next", "Segoe UI", sans-serif;
+  background-color: hsl(var(--background));
+  background-image:
+    linear-gradient(90deg, hsl(187 92% 49% / 0.08), transparent 24%, hsl(264 92% 59% / 0.12) 74%, transparent),
+    linear-gradient(180deg, hsl(250 60% 16% / 0.68), hsl(235 45% 4%) 48%, hsl(235 54% 3%));
+  font-family: "Inter", "Avenir Next", "Segoe UI", sans-serif;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color-scheme: dark;
+}
+
+::selection {
+  background: hsl(264 92% 68% / 0.45);
+  color: hsl(258 36% 98%);
+}
+
+.sybil-wordmark {
+  font-family: "Orbitron", "Inter", sans-serif;
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+.app-grid-surface {
+  background-image:
+    linear-gradient(hsl(244 48% 20% / 0.18) 1px, transparent 1px),
+    linear-gradient(90deg, hsl(244 48% 20% / 0.14) 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+
+.glass-panel {
+  background:
+    linear-gradient(180deg, hsl(243 42% 12% / 0.88), hsl(236 48% 5% / 0.92)),
+    hsl(236 48% 6%);
+  box-shadow:
+    inset 0 1px 0 hsl(252 90% 86% / 0.08),
+    0 14px 36px hsl(240 80% 2% / 0.28);
 }
 
 .md-content {