feat: add new design2.css, add fonts

web/package.json

@@ -23,6 +23,8 @@
 		"vitest": "^4.1.11"
 	},
 	"dependencies": {
+		"@fontsource/ibm-plex-mono": "^5.3.0",
+		"@fontsource/ibm-plex-sans": "^5.3.0",
 		"@lucide/svelte": "^1.33.0"
 	}
 }

web/pnpm-lock.yaml

@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@fontsource/ibm-plex-mono':
+        specifier: ^5.3.0
+        version: 5.3.0
+      '@fontsource/ibm-plex-sans':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@lucide/svelte':
         specifier: ^1.33.0
         version: 1.33.0(svelte@5.56.9)
@@ -39,6 +45,12 @@ importers:
 
 packages:
 
+  '@fontsource/ibm-plex-mono@5.3.0':
+    resolution: {integrity: sha512-eTgnZjZEGk1QtD3ZstF+Vclo2HLAni8YMy34/DxllwZvyz1lR/1RF/xTiAquOBO7MvqBx8D2Ig2WCPMVfdZu7Q==}
+
+  '@fontsource/ibm-plex-sans@5.3.0':
+    resolution: {integrity: sha512-CbE4CbbEEZJX860XyUiRpsksXIQR8Rp2XDva2VO53NJox9tVNtusrysd2x5YkUEY3ErQ66W1IiiQL8/wihhw5w==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -617,6 +629,10 @@ packages:
 
 snapshots:
 
+  '@fontsource/ibm-plex-mono@5.3.0': {}
+
+  '@fontsource/ibm-plex-sans@5.3.0': {}
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5

web/src/lib/styles/design2.css

@@ -0,0 +1,43 @@
+@import '@fontsource/ibm-plex-sans/400.css';
+@import '@fontsource/ibm-plex-sans/500.css';
+@import '@fontsource/ibm-plex-sans/600.css';
+@import '@fontsource/ibm-plex-sans/700.css';
+@import '@fontsource/ibm-plex-mono/400.css';
+@import '@fontsource/ibm-plex-mono/500.css';
+
+/* Новый дизайн: токены (§2 плана redesign).
+   Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
+   глобально не конфликтует со старым app.css. */
+
+:root {
+	--font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
+	--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
+
+	--background: #eef1f4;
+	--panel: #f8fafb;
+	--foreground: #17212b;
+	--muted: #6d7883;
+	--line: #cbd3da;
+
+	--blue: #1769d2;
+	--cyan: #00a8c7;
+	--amber: #bd7411;
+	--success: #25a96a;
+	--danger: #e5484d;
+
+	--radius: 4px;
+}
+
+[data-theme='dark'] {
+	--background: #11171d;
+	--panel: #182129;
+	--foreground: #e8eef2;
+	--muted: #91a0ac;
+	--line: #33414c;
+
+	--blue: #54a2ff;
+	--cyan: #00a8c7;
+	--amber: #bd7411;
+	--success: #25a96a;
+	--danger: #ff7479;
+}