style(ui): refresh dashboard theme

ui/src/styles/base.css

@@ -1,54 +1,60 @@
-@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Unbounded:wght@400;500;600&family=Work+Sans:wght@400;500;600;700&display=swap");
 
 :root {
-  --bg: #0a0e14;
-  --bg-accent: #101826;
-  --bg-grad-1: #1a2740;
-  --bg-grad-2: #241626;
-  --bg-overlay: rgba(255, 255, 255, 0.03);
-  --bg-glow: rgba(54, 207, 201, 0.08);
-  --panel: rgba(18, 24, 36, 0.92);
-  --panel-strong: rgba(24, 32, 46, 0.95);
-  --chrome: rgba(10, 14, 20, 0.75);
-  --chrome-strong: rgba(10, 14, 20, 0.82);
-  --text: rgba(246, 248, 252, 0.95);
-  --chat-text: rgba(246, 248, 252, 0.88);
-  --muted: rgba(210, 218, 230, 0.62);
-  --border: rgba(255, 255, 255, 0.08);
-  --accent: #ff7a3d;
-  --accent-2: #36cfc9;
-  --ok: #1bd98a;
+  --bg: #0a0f14;
+  --bg-accent: #111826;
+  --bg-grad-1: #162031;
+  --bg-grad-2: #1f2a22;
+  --bg-overlay: rgba(255, 255, 255, 0.05);
+  --bg-glow: rgba(245, 159, 74, 0.12);
+  --panel: rgba(14, 20, 30, 0.88);
+  --panel-strong: rgba(18, 26, 38, 0.96);
+  --chrome: rgba(9, 14, 20, 0.72);
+  --chrome-strong: rgba(9, 14, 20, 0.86);
+  --text: rgba(244, 246, 251, 0.96);
+  --chat-text: rgba(231, 237, 244, 0.92);
+  --muted: rgba(156, 169, 189, 0.72);
+  --border: rgba(255, 255, 255, 0.09);
+  --border-strong: rgba(255, 255, 255, 0.16);
+  --accent: #f59f4a;
+  --accent-2: #34c7b7;
+  --ok: #2bd97f;
   --warn: #f2c94c;
-  --danger: #ff5c5c;
+  --danger: #ff6b6b;
+  --focus: rgba(245, 159, 74, 0.35);
+  --grid-line: rgba(255, 255, 255, 0.04);
   --theme-switch-x: 50%;
   --theme-switch-y: 50%;
-  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
-  --font-body: "Space Grotesk", system-ui, sans-serif;
-  --font-display: "Fraunces", "Times New Roman", serif;
+  --font-body: "Work Sans", system-ui, sans-serif;
+  --font-display: "Unbounded", "Times New Roman", serif;
   color-scheme: dark;
 }
 
 :root[data-theme="light"] {
-  --bg: #f5f7fb;
+  --bg: #f5f1ea;
   --bg-accent: #ffffff;
-  --bg-grad-1: #e3edf9;
-  --bg-grad-2: #f7e6f0;
-  --bg-overlay: rgba(28, 32, 46, 0.04);
-  --bg-glow: rgba(54, 207, 201, 0.12);
+  --bg-grad-1: #f1e6d6;
+  --bg-grad-2: #e5eef4;
+  --bg-overlay: rgba(28, 32, 46, 0.05);
+  --bg-glow: rgba(52, 199, 183, 0.14);
   --panel: rgba(255, 255, 255, 0.9);
-  --panel-strong: rgba(255, 255, 255, 0.98);
-  --chrome: rgba(255, 255, 255, 0.72);
-  --chrome-strong: rgba(255, 255, 255, 0.82);
-  --text: rgba(20, 24, 36, 0.96);
-  --chat-text: rgba(20, 24, 36, 0.82);
-  --muted: rgba(50, 58, 76, 0.6);
-  --border: rgba(16, 24, 40, 0.12);
-  --accent: #ff7a3d;
-  --accent-2: #1bb9b1;
-  --ok: #15b97a;
-  --warn: #c58a1a;
-  --danger: #e84343;
+  --panel-strong: rgba(255, 255, 255, 0.97);
+  --chrome: rgba(255, 255, 255, 0.75);
+  --chrome-strong: rgba(255, 255, 255, 0.88);
+  --text: rgba(27, 36, 50, 0.98);
+  --chat-text: rgba(36, 48, 66, 0.9);
+  --muted: rgba(80, 94, 114, 0.7);
+  --border: rgba(18, 24, 40, 0.12);
+  --border-strong: rgba(18, 24, 40, 0.2);
+  --accent: #e28a3f;
+  --accent-2: #1ba99d;
+  --ok: #1aa86c;
+  --warn: #b3771c;
+  --danger: #d44848;
+  --focus: rgba(226, 138, 63, 0.35);
+  --grid-line: rgba(18, 24, 40, 0.06);
   color-scheme: light;
 }
 
@@ -63,16 +69,13 @@ body {
 
 body {
   margin: 0;
-  font: 15px/1.4 var(--font-body);
-  background: radial-gradient(
-        1200px 900px at 20% 0%,
-        var(--bg-grad-1) 0%,
-        var(--bg) 55%
-      )
+  font: 15px/1.5 var(--font-body);
+  background:
+    radial-gradient(1200px 900px at 15% -10%, var(--bg-grad-1) 0%, transparent 55%)
       fixed,
-    radial-gradient(900px 700px at 90% 10%, var(--bg-grad-2) 0%, transparent 55%)
+    radial-gradient(900px 700px at 80% 10%, var(--bg-grad-2) 0%, transparent 60%)
       fixed,
-    var(--bg);
+    linear-gradient(160deg, var(--bg) 0%, var(--bg-accent) 100%) fixed;
   color: var(--text);
 }
 
@@ -80,16 +83,37 @@ body::before {
   content: "";
   position: fixed;
   inset: 0;
-  background: linear-gradient(
-      135deg,
+  background:
+    linear-gradient(
+      140deg,
       var(--bg-overlay) 0%,
-      rgba(255, 255, 255, 0) 35%
+      rgba(255, 255, 255, 0) 40%
     ),
-    radial-gradient(
-      600px 400px at 80% 80%,
-      var(--bg-glow),
-      transparent 60%
+    radial-gradient(620px 420px at 75% 75%, var(--bg-glow), transparent 60%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background:
+    repeating-linear-gradient(
+      90deg,
+      var(--grid-line) 0,
+      var(--grid-line) 1px,
+      transparent 1px,
+      transparent 140px
+    ),
+    repeating-linear-gradient(
+      0deg,
+      var(--grid-line) 0,
+      var(--grid-line) 1px,
+      transparent 1px,
+      transparent 140px
     );
+  opacity: 0.45;
   pointer-events: none;
   z-index: 0;
 }
@@ -160,3 +184,14 @@ select {
     transform: translateY(0);
   }
 }
+
+@keyframes dashboard-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}