Refactor styles to utilize Tailwind CSS utility classes for improved consistency and maintainability across forms, motion, shell, and vault components. Remove deprecated reduced-motion styles and consolidate motion-related animations. Update color tokens for better contrast and accessibility. Introduce a new Tailwind CSS configuration file.

tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./webapp/index.html', './webapp/src/**/*.{ts,tsx}'],
+  darkMode: ['class', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        canvas: 'var(--bg-accent)',
+        panel: 'var(--panel)',
+        'panel-soft': 'var(--panel-soft)',
+        'panel-muted': 'var(--panel-muted)',
+        line: 'var(--line)',
+        'line-soft': 'var(--line-soft)',
+        ink: 'var(--text)',
+        muted: 'var(--muted)',
+        'muted-strong': 'var(--muted-strong)',
+        brand: 'var(--primary)',
+        'brand-hover': 'var(--primary-hover)',
+        'brand-strong': 'var(--primary-strong)',
+        danger: 'var(--danger)',
+      },
+      boxShadow: {
+        soft: 'var(--shadow-sm)',
+        panel: 'var(--shadow-md)',
+        elevated: 'var(--shadow-lg)',
+      },
+      fontFamily: {
+        sans: ['Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+};