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

@layer base {
  html {
    @apply text-secondary-900;
  }
  
  body {
    @apply bg-white;
  }
  
  h1 {
    @apply text-3xl font-bold mb-4;
  }
  
  h2 {
    @apply text-2xl font-bold mb-3;
  }
  
  h3 {
    @apply text-xl font-bold mb-2;
  }
  
  p {
    @apply mb-4;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors;
  }
  
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700;
  }
  
  .btn-secondary {
    @apply bg-secondary-200 text-secondary-800 hover:bg-secondary-300;
  }
  
  .btn-danger {
    @apply bg-danger-600 text-white hover:bg-danger-700;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
  
  .input {
    @apply w-full px-3 py-2 border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-transparent;
  }
  
  .select {
    @apply w-full px-3 py-2 border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-transparent bg-white;
  }
}

@layer utilities {
  .flex-center {
    @apply flex items-center justify-center;
  }
  
  .flex-between {
    @apply flex items-center justify-between;
  }
} 