Add new styles for app shell, tokens, and vault components

- Introduced `shell.css` for the main application layout, including styles for the app shell, top bar, and user interactions.
- Created `tokens.css` to define CSS variables for theming, including colors, shadows, and transition durations for light and dark modes.
- Developed `vault.css` for the vault component, implementing grid layouts, sidebar styles, search inputs, and list item designs.

webapp/src/styles/tokens.css

@@ -0,0 +1,46 @@
+:root {
+  --bg-accent: #e7edf8;
+  --panel: #f9fbff;
+  --panel-soft: #f2f6fd;
+  --panel-muted: #e8eff9;
+  --line: rgba(128, 152, 192, 0.32);
+  --line-soft: rgba(143, 167, 206, 0.18);
+  --text: #0b1730;
+  --muted: #60708b;
+  --muted-strong: #334765;
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-strong: #0f3f98;
+  --danger: #d92d57;
+  --overlay-strong: rgba(15, 23, 42, 0.56);
+  --shadow-sm: 0 10px 22px rgba(13, 31, 68, 0.045);
+  --shadow-md: 0 22px 48px rgba(13, 31, 68, 0.08);
+  --shadow-lg: 0 28px 76px rgba(13, 31, 68, 0.11);
+  --ease-out-strong: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-out-soft: cubic-bezier(0.24, 0.8, 0.32, 1);
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --dur-fast: 180ms;
+  --dur-medium: 240ms;
+  --dur-panel: 280ms;
+  --actions-gap: clamp(0px, calc((100vw - 520px) * 1), 10px);
+}
+
+:root[data-theme='dark'] {
+  --bg-accent: #06111d;
+  --panel: #0d192b;
+  --panel-soft: #112136;
+  --panel-muted: #0a1626;
+  --line: rgba(108, 141, 190, 0.28);
+  --line-soft: rgba(120, 152, 198, 0.16);
+  --text: #edf4ff;
+  --muted: #8fa6c6;
+  --muted-strong: #c3d5ef;
+  --primary: #84b6ff;
+  --primary-hover: #a6ccff;
+  --primary-strong: #f3f8ff;
+  --danger: #ff8ba8;
+  --overlay-strong: rgba(2, 8, 20, 0.84);
+  --shadow-sm: 0 14px 28px rgba(1, 7, 18, 0.24);
+  --shadow-md: 0 24px 52px rgba(1, 7, 18, 0.36);
+  --shadow-lg: 0 34px 88px rgba(1, 7, 18, 0.46);
+}