feat(ui): extend design tokens, add dark mode, add UI primitives

- Add warning/success token roles across light and dark themes
- Add Light/Dark/System theme mode (localStorage + Appwrite prefs)
- Derive dark token stacks from existing theme seeds
- Remove forced light app-shell background; dynamic color-scheme
- Add Button/Card/Field/Badge/EmptyState primitives under src/components/ui

src/index.css

@@ -3,7 +3,9 @@
 @tailwind utilities;
 
 :root {
-  color-scheme: light;
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
   font-family: "Google Sans", "SF Pro Display", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: #eef3fb;
 }
@@ -76,10 +78,15 @@ textarea:focus-visible {
 
 .app-shell {
   min-height: 100vh;
+  color: var(--text, #202124);
   background:
     radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--primary-container, #dbe9ff) 42%, transparent), transparent 32rem),
-    #eef3fb !important;
-  color: #202124 !important;
+    var(--bg, #eef3fb);
+  color-scheme: light;
+}
+
+.app-shell[data-mode="dark"] {
+  color-scheme: dark;
 }
 
 .app-layout {
@@ -996,6 +1003,21 @@ textarea:focus-visible {
   color: #80868b;
 }
 
+.field-help-text,
+.field-error-text {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.field-help-text {
+  color: var(--muted, #5f6670);
+}
+
+.field-error-text {
+  color: var(--error, #ba1a1a);
+}
+
 .entry-row {
   display: grid;
   gap: 12px;
@@ -1085,6 +1107,45 @@ textarea:focus-visible {
   border-radius: 999px;
 }
 
+.badge {
+  display: inline-flex;
+  min-height: 26px;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  color: var(--muted, #5f6670);
+  background: var(--surface-container-high, #f1f4f9);
+  border: 1px solid var(--outline-variant, #dce5f1);
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.badge-accent {
+  color: var(--on-primary-container, #10243f);
+  background: var(--primary-container, #dbe9ff);
+  border-color: color-mix(in srgb, var(--primary, #2563c7) 24%, transparent);
+}
+
+.badge-success {
+  color: var(--on-success-container, #03210f);
+  background: var(--success-container, #ceead6);
+  border-color: color-mix(in srgb, var(--success, #0d652d) 24%, transparent);
+}
+
+.badge-warning {
+  color: var(--on-warning-container, #291800);
+  background: var(--warning-container, #ffddb0);
+  border-color: color-mix(in srgb, var(--warning, #8d5700) 24%, transparent);
+}
+
+.badge-danger {
+  color: var(--on-error-container, #410002);
+  background: var(--error-container, #ffdad6);
+  border-color: color-mix(in srgb, var(--error, #ba1a1a) 24%, transparent);
+}
+
 .segmented-control {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));