design: apply Pixel design system tokens (Fira Sans/Code, CSS vars, badge helpers); add Playwright E2E setup + auth spec

app/globals.css

@@ -2,63 +2,101 @@
 @tailwind components;
 @tailwind utilities;
 
+/* FiberOps Design System — Pixel/Conan approved */
+/* Primary: #0891B2 | CTA: #059669 | BG: #F8FAFC | Text: #0F172A */
+/* Fonts: Fira Sans (body) + Fira Code (data/numbers) */
+
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-  }
+    /* FiberOps tokens */
+    --color-primary: #0891B2;
+    --color-primary-dark: #0E7490;
+    --color-secondary: #22D3EE;
+    --color-cta: #059669;
+    --color-cta-hover: #047857;
+    --color-bg: #F8FAFC;
+    --color-surface: #FFFFFF;
+    --color-text: #0F172A;
+    --color-muted: #64748B;
+    --color-border: #E2E8F0;
+    --color-danger: #EF4444;
+    --color-warning: #F59E0B;
+    --color-success: #059669;
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    /* Shadows */
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
+    --shadow-lg: 0 10px 15px rgba(0,0,0,0.08);
+    --shadow-xl: 0 20px 25px rgba(0,0,0,0.12);
+
+    /* Radius */
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
   }
 
   * {
-    @apply border-border;
+    box-sizing: border-box;
   }
 
   body {
-    @apply bg-background text-foreground;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-family: 'Fira Sans', 'Inter', system-ui, sans-serif;
+    font-size: 15px;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Data values, numbers, IDs */
+  code, .font-mono, .tabular-nums {
+    font-family: 'Fira Code', 'JetBrains Mono', monospace;
   }
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  /* Skeleton loading animation */
+  .skeleton {
+    @apply animate-pulse bg-slate-200 rounded;
   }
+
+  /* Row hover for tables */
+  .table-row-hover:hover {
+    background-color: #F0FDFF;
+    cursor: pointer;
+  }
+
+  /* Transition helper */
+  .transition-fast {
+    transition: all 150ms ease;
+  }
+
+  .transition-smooth {
+    transition: all 200ms ease;
+  }
+
+  /* Card base */
+  .fiberops-card {
+    background: white;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow-sm);
+  }
+
+  /* Status badge helpers */
+  .badge-active    { background: #DCFCE7; color: #166534; }
+  .badge-inactive  { background: #F1F5F9; color: #475569; }
+  .badge-suspended { background: #FEF3C7; color: #92400E; }
+  .badge-pending   { background: #DBEAFE; color: #1E40AF; }
+  .badge-overdue   { background: #FEE2E2; color: #991B1B; }
+  .badge-paid      { background: #DCFCE7; color: #166534; }
+  .badge-partial   { background: #FEF3C7; color: #92400E; }
+  .badge-void      { background: #F1F5F9; color: #94A3B8; }
+  .badge-open      { background: #DBEAFE; color: #1E40AF; }
+  .badge-in-progress { background: #FEF3C7; color: #92400E; }
+  .badge-resolved  { background: #DCFCE7; color: #166534; }
+  .badge-closed    { background: #F1F5F9; color: #475569; }
+
+  .text-balance { text-wrap: balance; }
 }