style.css

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

:root {
  --primary: #42b883;
  --primary-dark: #33a06f;
  --secondary: #35495e;
}

body {
  @apply bg-gray-50;
  font-family: 'Inter', sans-serif;
}

.btn-primary {
  @apply px-6 py-3 bg-[--primary] text-white font-medium rounded-lg 
         hover:bg-[--primary-dark] transition-colors duration-200 
         focus:outline-none focus:ring-2 focus:ring-[--primary] focus:ring-opacity-50;
}

.btn-secondary {
  @apply px-6 py-3 bg-[--secondary] text-white font-medium rounded-lg 
         hover:opacity-90 transition-colors duration-200 
         focus:outline-none focus:ring-2 focus:ring-[--secondary] focus:ring-opacity-50;
}

.input-primary {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg 
         focus:outline-none focus:ring-2 focus:ring-[--primary] focus:ring-opacity-50 
         focus:border-transparent transition-all duration-200;
}