Implement dark-first design system with Geist typography (#28)

Co-authored-by: Julian Tabel <juliantabel.jt@gmail.com>
Co-committed-by: Julian Tabel <juliantabel.jt@gmail.com>

frontend/src/index.css

@@ -1 +1,85 @@
 @import 'tailwindcss';
+
+/* ── Geist font family (variable, self-hosted) ─────────────────── */
+
+@font-face {
+  font-family: 'Geist Sans';
+  src: url('/fonts/GeistSans-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ── Tailwind v4 theme tokens ──────────────────────────────────── */
+
+@theme {
+  /* Typography */
+  --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+
+  /* Brand surfaces (dark-first) */
+  --color-surface-0: #0d1117;
+  --color-surface-1: #161b22;
+  --color-surface-2: #1c2128;
+  --color-surface-3: #21262d;
+  --color-surface-4: #282e36;
+
+  /* Brand accent (steel blue from logo) */
+  --color-accent-50: #e8f4fa;
+  --color-accent-100: #c5e3f2;
+  --color-accent-200: #9dcde6;
+  --color-accent-300: #7eb0ce;
+  --color-accent-400: #5c95b8;
+  --color-accent-500: #4a7d9e;
+  --color-accent-600: #395e73;
+  --color-accent-700: #2d4a5c;
+  --color-accent-800: #1f3340;
+  --color-accent-900: #142129;
+
+  /* Text on dark */
+  --color-text-primary: #e6edf3;
+  --color-text-secondary: #7d8590;
+  --color-text-tertiary: #484f58;
+  --color-text-link: #7eb0ce;
+
+  /* Borders */
+  --color-border-default: rgba(255, 255, 255, 0.08);
+  --color-border-muted: rgba(255, 255, 255, 0.04);
+  --color-border-accent: rgba(126, 176, 206, 0.3);
+
+  /* Status (tuned for dark surfaces) */
+  --color-status-alive: #2ea043;
+  --color-status-alive-bg: rgba(46, 160, 67, 0.15);
+  --color-status-dead: #da3633;
+  --color-status-dead-bg: rgba(218, 54, 51, 0.15);
+  --color-status-active: #3fb950;
+  --color-status-active-bg: rgba(63, 185, 80, 0.15);
+  --color-status-completed: #58a6ff;
+  --color-status-completed-bg: rgba(88, 166, 255, 0.15);
+  --color-status-failed: #f85149;
+  --color-status-failed-bg: rgba(248, 81, 73, 0.15);
+}
+
+/* ── Base layer ────────────────────────────────────────────────── */
+
+@layer base {
+  html {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-surface-0 text-text-primary font-sans antialiased;
+  }
+
+  ::selection {
+    @apply bg-accent-600/50 text-white;
+  }
+}