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

/* Custom styles for Japanese vocab app */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

@layer base {
  body {
    font-family: 'Noto Sans JP', sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 shadow-lg hover:shadow-xl;
  }
  
  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-6 rounded-lg transition-colors duration-200;
  }
  
  .input-field {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all duration-200;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg p-6 border border-gray-100;
  }
  
  .japanese-text {
    @apply text-2xl font-medium text-gray-800;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .max-w-20 {
    max-width: 5rem;
  }
  
  .auto-rows-fr {
    grid-auto-rows: 1fr;
  }
  
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  
  .vocab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    grid-auto-rows: min-content;
    align-items: start;
  }
  
  /* Text truncation utilities */
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Word breaking utilities */
  .break-words {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  
  @media (min-width: 768px) {
    .vocab-grid {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  
  @media (min-width: 1280px) {
    .vocab-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}