From e256a771d5debbfc936bbbc0e4e741034e8279a7 Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Thu, 21 May 2026 12:30:34 -0400
Subject: [PATCH] =?UTF-8?q?web-ui:=20wave-1=20foundation=20=E2=80=94=20ser?=
 =?UTF-8?q?vices/web-ui/src/css/app.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 services/web-ui/src/css/app.css | 77 +++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 services/web-ui/src/css/app.css

diff --git a/services/web-ui/src/css/app.css b/services/web-ui/src/css/app.css
new file mode 100644
index 0000000..09731e2
--- /dev/null
+++ b/services/web-ui/src/css/app.css
@@ -0,0 +1,77 @@
+/* app.css ─ Tailwind directives + primitive imports.
+ *
+ * Order matters:
+ *   1. tokens (CSS custom properties for legacy callers)
+ *   2. tailwind base (CSS reset)
+ *   3. tailwind components
+ *   4. our primitives (use tokens + can be overridden by utilities)
+ *   5. tailwind utilities (highest specificity, last word)
+ *   6. motion (animations + reduced-motion override)
+ */
+
+@import "./components/tokens.css";
+
+@tailwind base;
+@tailwind components;
+
+/* Primitives — each one ~50-200 lines, one responsibility per file */
+@import "./components/sidebar.css";
+@import "./components/topbar.css";
+@import "./components/button.css";
+@import "./components/form-controls.css";
+@import "./components/field-group.css";
+@import "./components/slide-panel.css";
+@import "./components/card-asset.css";
+@import "./components/card-operational.css";
+@import "./components/list-row.css";
+@import "./components/empty-state.css";
+@import "./components/badge.css";
+@import "./components/toast.css";
+
+@tailwind utilities;
+
+@import "./components/motion.css";
+
+/* Global base — self-hosted fonts */
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-600.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+html {
+  font-family: var(--font);
+  background: var(--bg-base);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+}