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

:root {
  --primary-soft: #e6f4ff;
  --accent-soft: #fff3e6;
  --success-soft: #e8f7e8;
  --danger-soft: #ffe6e6;
  --text: #0f172a;
}

/* Custom utility classes */
@layer utilities {
  .card {
    @apply bg-white rounded-lg shadow-sm border border-slate-100 p-4;
  }

  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors;
  }

  .btn-secondary {
    @apply bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg transition-colors;
  }

  .input-field {
    @apply w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all;
  }
}