feat(design): centralize design system with CSS variables and semantic classes in index.css

frontend/tailwind.config.js

@@ -5,35 +5,43 @@ export default {
   theme: {
     extend: {
       colors: {
-        canvas: '#16171a',
-        surface: {
-          DEFAULT: '#222428',
-          elevated: '#282a2f',
-          hover: '#32353b',
-          border: 'rgba(255, 255, 255, 0.07)',
+        canvas: 'var(--bg-app)',
+        panel: {
+          DEFAULT: 'var(--bg-panel)',
+          elevated: 'var(--bg-panel-elevated)',
+          hover: 'var(--bg-panel-hover)',
         },
-        brand: {
-          DEFAULT: '#1d8cf8',
-          hover: '#3b9cfc',
-          dark: '#0066cc',
+        surface: {
+          DEFAULT: 'var(--bg-panel)',
+          elevated: 'var(--bg-panel-elevated)',
+          hover: 'var(--bg-panel-hover)',
+          border: 'var(--border-color)',
         },
         accent: {
-          green: '#22c55e',
-          orange: '#f97316',
-          purple: '#a855f7',
-          red: '#ef4444',
-          yellow: '#eab308',
+          DEFAULT: 'var(--accent-primary)',
+          hover: 'var(--accent-hover)',
+          dim: 'var(--accent-dim)',
+          border: 'var(--accent-border)',
         },
+        brand: {
+          DEFAULT: 'var(--accent-primary)',
+          hover: 'var(--accent-hover)',
+          dark: 'var(--accent-primary)',
+        },
+      },
+      borderColor: {
+        DEFAULT: 'var(--border-color)',
+        subtle: 'var(--border-subtle)',
+      },
+      borderRadius: {
+        card: 'var(--radius-card)',
+        btn: 'var(--radius-btn)',
+        input: 'var(--radius-input)',
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
         mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
       },
-      boxShadow: {
-        soft: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2)',
-        card: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)',
-        glowBlue: '0 0 20px -3px rgba(29, 140, 248, 0.35)',
-      },
     },
   },
   plugins: [],