@import "tailwindcss";

@theme {
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;

  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;

  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-500: #f43f5e;
  --color-rose-600: #dc2626;

  /* Custom generic variables */
  --font-sans: "Inter", "Roboto", "Outfit", system-ui, sans-serif;
}

@layer utilities {
  .glass {
    @apply bg-white/70 backdrop-blur-md border border-slate-100 shadow-xl;
  }
}

html, body {
  @apply m-0 p-0 w-full h-full text-slate-600 bg-slate-50;
  font-family: var(--font-sans);
}

#root {
  @apply w-full h-full flex flex-col;
}