udpates on the ui changesand api integration

src/index.css

@@ -12,4 +12,73 @@
   --spacing-xl: 32px;
   --spacing-gutter: 20px;
   --spacing-container-margin: 24px;
+
+  /* Intermediate color shades used across the app. Tailwind's default palette
+     only ships shades in steps of 100, but the UI references finer steps
+     (e.g. -450, -650, -755, -505). Each is interpolated in OKLab from its
+     adjacent standard shade(s) so utilities like `bg-purple-650` /
+     `text-slate-450` resolve to a real color instead of generating nothing
+     (which left e.g. the "Add Team Member" button's white text on a
+     transparent background — invisible). */
+
+  /* slate */
+  --color-slate-55:  color-mix(in oklab, #f8fafc 90%, #f1f5f9);
+  --color-slate-150: color-mix(in oklab, #f1f5f9, #e2e8f0);
+  --color-slate-350: color-mix(in oklab, #cbd5e1, #94a3b8);
+  --color-slate-405: color-mix(in oklab, #94a3b8 95%, #64748b);
+  --color-slate-450: color-mix(in oklab, #94a3b8, #64748b);
+  --color-slate-455: color-mix(in oklab, #94a3b8 45%, #64748b);
+  --color-slate-505: color-mix(in oklab, #64748b 95%, #475569);
+  --color-slate-650: color-mix(in oklab, #475569, #334155);
+  --color-slate-750: color-mix(in oklab, #334155, #1e293b);
+  --color-slate-850: color-mix(in oklab, #1e293b, #0f172a);
+
+  /* zinc */
+  --color-zinc-55:  color-mix(in oklab, #fafafa 90%, #f4f4f5);
+  --color-zinc-150: color-mix(in oklab, #f4f4f5, #e4e4e7);
+  --color-zinc-205: color-mix(in oklab, #e4e4e7 95%, #d4d4d8);
+  --color-zinc-405: color-mix(in oklab, #a1a1aa 95%, #71717a);
+  --color-zinc-450: color-mix(in oklab, #a1a1aa, #71717a);
+  --color-zinc-455: color-mix(in oklab, #a1a1aa 45%, #71717a);
+  --color-zinc-505: color-mix(in oklab, #71717a 95%, #52525b);
+  --color-zinc-550: color-mix(in oklab, #71717a, #52525b);
+  --color-zinc-555: color-mix(in oklab, #71717a 45%, #52525b);
+  --color-zinc-650: color-mix(in oklab, #52525b, #3f3f46);
+  --color-zinc-655: color-mix(in oklab, #52525b 45%, #3f3f46);
+  --color-zinc-750: color-mix(in oklab, #3f3f46, #27272a);
+  --color-zinc-755: color-mix(in oklab, #3f3f46 45%, #27272a);
+  --color-zinc-805: color-mix(in oklab, #27272a 95%, #18181b);
+
+  /* stone */
+  --color-stone-750: color-mix(in oklab, #44403c, #292524);
+
+  /* purple */
+  --color-purple-250: color-mix(in oklab, #e9d5ff, #d8b4fe);
+  --color-purple-650: color-mix(in oklab, #9333ea, #7e22ce);
+  --color-purple-750: color-mix(in oklab, #7e22ce, #6b21a8);
+  --color-purple-755: color-mix(in oklab, #7e22ce 45%, #6b21a8);
+  --color-purple-955: color-mix(in oklab, #3b0764 90%, black);
+
+  /* emerald */
+  --color-emerald-250: color-mix(in oklab, #a7f3d0, #6ee7b7);
+  --color-emerald-450: color-mix(in oklab, #34d399, #10b981);
+  --color-emerald-455: color-mix(in oklab, #34d399 45%, #10b981);
+  --color-emerald-505: color-mix(in oklab, #10b981 95%, #059669);
+  --color-emerald-650: color-mix(in oklab, #059669, #047857);
+  --color-emerald-750: color-mix(in oklab, #047857, #065f46);
+
+  /* rose */
+  --color-rose-505: color-mix(in oklab, #f43f5e 95%, #e11d48);
+  --color-rose-650: color-mix(in oklab, #e11d48, #be123c);
+  --color-rose-750: color-mix(in oklab, #be123c, #9f1239);
+
+  /* amber */
+  --color-amber-750: color-mix(in oklab, #b45309, #92400e);
+  --color-amber-955: color-mix(in oklab, #451a03 90%, black);
+
+  /* indigo */
+  --color-indigo-650: color-mix(in oklab, #4f46e5, #4338ca);
+
+  /* orange */
+  --color-orange-850: color-mix(in oklab, #9a3412, #7c2d12);
 }