@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

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

@layer base {
  * {
    @apply border-gray-200;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 font-sans;
    @apply dark:bg-gray-900 dark:text-gray-100;
    margin: 0;
    min-height: 100vh;
  }

  /* カスタムスクロールバー */
  ::-webkit-scrollbar {
    @apply w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
  }
}

@layer components {
  /* カスタムボタンコンポーネント */
  .btn {
    @apply inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
    @apply focus:ring-blue-500;
    @apply dark:bg-blue-500 dark:hover:bg-blue-600;
  }

  .btn-secondary {
    @apply bg-white text-gray-900 border border-gray-300 hover:bg-gray-50;
    @apply focus:ring-blue-500;
    @apply dark:bg-gray-800 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-700;
  }

  /* サイズバリエーション */
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }

  .btn-md {
    @apply px-4 py-2 text-sm;
  }

  .btn-lg {
    @apply px-6 py-3 text-base;
  }

  /* カードコンポーネント */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200;
    @apply dark:bg-gray-800 dark:border-gray-700;
  }
}