feat: add comprehensive design system with CSS tokens, dark theme, and brand assets - Closes #19

app/globals.css

@@ -1,26 +1,107 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+/* ============================================================================
+   EquipChain Design System
+   Brand Colors, Typography, Spacing, Shadows, Radii, Transitions
+   ============================================================================ */
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  /* Brand Colors — Blue Primary Palette */
+  --color-brand-50: #eff6ff;
+  --color-brand-100: #dbeafe;
+  --color-brand-200: #bfdbfe;
+  --color-brand-300: #93c5fd;
+  --color-brand-400: #60a5fa;
+  --color-brand-500: #3b82f6;
+  --color-brand-600: #2563eb;
+  --color-brand-700: #1d4ed8;
+  --color-brand-800: #1e40af;
+  --color-brand-900: #1e3a8a;
+  --color-brand-950: #172554;
+
+  /* Status Colors */
+  --color-success: #22c55e;
+  --color-success-light: #bbf7d0;
+  --color-success-dark: #166534;
+  --color-warning: #f59e0b;
+  --color-warning-light: #fde68a;
+  --color-warning-dark: #92400e;
+  --color-error: #ef4444;
+  --color-error-light: #fecaca;
+  --color-error-dark: #991b1b;
+  --color-info: #3b82f6;
+  --color-info-light: #bfdbfe;
+  --color-info-dark: #1e40af;
+
+  /* Surface Colors */
+  --color-surface: #ffffff;
+  --color-surface-secondary: #f8fafc;
+  --color-surface-tertiary: #f1f5f9;
+  --color-border: #e2e8f0;
+  --color-border-light: #f1f5f9;
+
+  /* Text Colors */
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-muted: #94a3b8;
+  --color-text-inverse: #ffffff;
+
+  /* Background */
+  --color-background: #ffffff;
+  --color-foreground: #0f172a;
+
+  /* Typography */
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
 }
 
+/* Dark Theme */
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --color-surface: #0f172a;
+    --color-surface-secondary: #1e293b;
+    --color-surface-tertiary: #334155;
+    --color-border: #334155;
+    --color-border-light: #1e293b;
+    --color-text-primary: #f1f5f9;
+    --color-text-secondary: #94a3b8;
+    --color-text-muted: #64748b;
+    --color-text-inverse: #0f172a;
+    --color-background: #0a0a0a;
+    --color-foreground: #ededed;
   }
 }
 
+/* Base Styles */
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-sans);
+  line-height: 1.5;
+}
+
+/* Focus ring for accessibility */
+*:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+
+/* Text selection */
+::selection {
+  background: var(--color-brand-200);
+  color: var(--color-brand-900);
 }

src/lib/design/DESIGN_TOKENS.md

@@ -0,0 +1,54 @@
+# EquipChain Design Tokens
+
+## Brand Colors
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `brand-50` | `#eff6ff` | Lightest background |
+| `brand-100` | `#dbeafe` | Hover/selected states |
+| `brand-200` | `#bfdbfe` | Selection color |
+| `brand-300` | `#93c5fd` | Borders, dividers |
+| `brand-400` | `#60a5fa` | Interactive hover |
+| `brand-500` | `#3b82f6` | **Primary** buttons, links |
+| `brand-600` | `#2563eb` | Active/pressed states |
+| `brand-700` | `#1d4ed8` | Text on brand bg |
+| `brand-800` | `#1e40af` | Dark hover |
+| `brand-900` | `#1e3a8a` | Darkest brand |
+
+## Status Colors
+
+- `success` — `#22c55e` — Positive actions, confirmations
+- `warning` — `#f59e0b` — Caution, pending actions
+- `error` — `#ef4444` — Errors, destructive actions
+- `info` — `#3b82f6` — Information, guidance
+
+## Typography
+
+| Token | Value |
+|-------|-------|
+| `font-sans` | Geist Sans / system-ui |
+| `font-mono` | Geist Mono / monospace |
+
+## Shadows
+
+| Token | Value |
+|-------|-------|
+| `shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` |
+| `shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` |
+| `shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` |
+| `shadow-xl` | `0 20px 25px rgba(0,0,0,0.1)` |
+
+## Border Radius
+
+| Token | Value |
+|-------|-------|
+| `radius-sm` | `0.25rem` |
+| `radius-md` | `0.375rem` |
+| `radius-lg` | `0.5rem` |
+| `radius-xl` | `0.75rem` |
+| `radius-2xl` | `1rem` |
+| `radius-full` | `9999px` |
+
+## Dark Theme
+
+All tokens have dark variants under `@media (prefers-color-scheme: dark)` with inverted surface/text colors.