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

/* カスタムコンポーネント */
@layer components {
  .btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors;
  }
  
  .btn-secondary {
    @apply bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors;
  }
  
  .btn-danger {
    @apply bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors;
  }
  
  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
  }
  
  .alert {
    @apply px-4 py-3 rounded-md mb-4;
  }
  
  .alert-success {
    @apply bg-green-50 border border-green-200 text-green-800;
  }
  
  .alert-error {
    @apply bg-red-50 border border-red-200 text-red-800;
  }
  
  .alert-warning {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-800;
  }
  
  .alert-info {
    @apply bg-blue-50 border border-blue-200 text-blue-800;
  }
  
  /* レスポンシブヘルパー */
  .container-responsive {
    @apply container mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .text-responsive {
    @apply text-base sm:text-lg lg:text-xl;
  }
  
  .heading-responsive {
    @apply text-2xl sm:text-3xl lg:text-4xl;
  }
  
  .space-responsive {
    @apply space-y-4 sm:space-y-6 lg:space-y-8;
  }
  
  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8;
  }
  
  .card-responsive {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6 lg:p-8;
  }
  
  .btn-responsive {
    @apply px-3 py-2 sm:px-4 sm:py-2 lg:px-6 lg:py-3 text-sm sm:text-base;
  }
  
  /* モバイル専用 */
  @media (max-width: 640px) {
    .mobile-full {
      @apply w-full;
    }
    
    .mobile-center {
      @apply text-center;
    }
    
    .mobile-stack {
      @apply flex-col space-y-2;
    }
  }
  
  /* タブレット専用 */
  @media (min-width: 641px) and (max-width: 1024px) {
    .tablet-grid {
      @apply grid-cols-2;
    }
  }
  
  /* デスクトップ専用 */
  @media (min-width: 1025px) {
    .desktop-grid {
      @apply grid-cols-3;
    }
  }
}