US02-01: Extract Safety and Existing Web UI Donors (#54)

frontend/css/app.css

@@ -1,16 +1,4 @@
-:root {
-  --bg: #000;
-  --surface: #0e0e11;
-  --surface-2: #17171c;
-  --border: #26262e;
-  --text: #f4f4f6;
-  --muted: #9a9aa6;
-  --accent: #5b8cff;
-  --danger: #ff5b6e;
-  --ok: #3ddc97;
-  --warn: #ffcf5b;
-  --radius: 10px;
-}
+@import "./tokens.css";
 
 * { box-sizing: border-box; }
 

frontend/css/tokens.css

@@ -0,0 +1,20 @@
+/* Shared design tokens — the reusable visual language extracted from the donor
+ * web UIs (nsfwtag review + Photo Analyzer webapp): the dark OLED palette, status
+ * colors, radius, and surfaces. Every view (inventory, duplicates, and the
+ * upcoming safety/analyze views) consumes these instead of hard-coded values, so
+ * the look stays consistent as the workflow shell grows.
+ *
+ * donor_ledger.yaml: nt-ui, wa-server, pa-ui-terminal (design tokens). */
+:root {
+  --bg: #000;
+  --surface: #0e0e11;
+  --surface-2: #17171c;
+  --border: #26262e;
+  --text: #f4f4f6;
+  --muted: #9a9aa6;
+  --accent: #5b8cff;
+  --danger: #ff5b6e;
+  --ok: #3ddc97;
+  --warn: #ffcf5b;
+  --radius: 10px;
+}