@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

:root {
  color-scheme: light dark;
}

@keyframes gradient-drift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* Light mode background */
body {
  background: linear-gradient(-45deg, #e0e7ff, #ede9fe, #f1f5f9, #ddd6fe);
  background-size: 400% 400%;
  animation: gradient-drift 18s ease infinite;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  @apply text-gray-900 dark:text-gray-100;
}

/* Dark mode background */
html.dark body {
  background: linear-gradient(-45deg, #1e1b4b, #3b0764, #0f172a, #1e1b4b);
  background-size: 400% 400%;
  animation: gradient-drift 18s ease infinite;
}

@layer components {
  .glass {
    @apply bg-white/60 dark:bg-white/5 backdrop-blur-xl border border-white/80 dark:border-white/10 shadow-xl;
  }
  .glass-card {
    @apply glass rounded-2xl;
  }
  .glass-input {
    @apply bg-white/70 dark:bg-white/5 backdrop-blur-sm border border-white/80 dark:border-white/10 rounded-xl px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400/50;
  }
  .btn-primary {
    @apply bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl px-4 py-2 text-sm font-semibold transition-all duration-200 shadow-md shadow-indigo-500/20 hover:shadow-indigo-500/40 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100;
  }
  .btn-secondary {
    @apply bg-white/20 dark:bg-white/5 hover:bg-white/30 dark:hover:bg-white/10 border border-white/30 dark:border-white/10 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-200;
  }
  .btn-danger {
    @apply bg-red-600/80 hover:bg-red-600 text-white rounded-xl px-3 py-1.5 text-sm font-medium transition-all duration-200;
  }
}