@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --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);
}

/* Custom scrollbar utility */
@layer utilities {
  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-slate-350, #cbd5e1);
    border-radius: 20px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-slate-450, #94a3b8);
  }
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--color-slate-350, #cbd5e1) transparent;
  }
}