@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-slate-50 text-slate-800 antialiased;
  }
}

@layer components {
  .glass {
    @apply bg-white/70 backdrop-blur-xl border border-white/60 shadow-card;
  }
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-brand-600 to-brand-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand-500/25 transition hover:from-brand-700 hover:to-brand-600 hover:shadow-brand-500/40 disabled:opacity-50;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50;
  }
  .input-field {
    @apply w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-800 placeholder:text-slate-400 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/20;
  }
  .card {
    @apply rounded-2xl bg-white p-6 shadow-card border border-slate-100;
  }
  .stat-card {
    @apply relative overflow-hidden rounded-2xl p-6 text-white shadow-lg;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  @apply bg-slate-300 rounded-full;
}
