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

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

@layer base {
  /* Responsive typography for big screens */
  html {
    font-size: 18px;
    scroll-behavior: smooth;
  }

  @media (min-width: 1280px) {
    html {
      font-size: 20px;
    }
  }

  @media (min-width: 1536px) {
    html {
      font-size: 22px;
    }
  }

  @media (min-width: 1920px) {
    html {
      font-size: 24px;
    }
  }

  body {
    @apply font-sans text-secondary-800 antialiased;
  }

  /* Modern scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-secondary-100;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-primary-500 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-primary-600;
  }
}

@layer components {
  /* Modern card with hover effects */
  .card {
    @apply bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 
           hover:shadow-2xl hover:-translate-y-1;
  }

  /* Gradient button with modern effects */
  .btn-primary {
    @apply bg-gradient-to-r from-primary-600 to-primary-500 text-white px-8 py-3 rounded-xl
           font-medium shadow-lg hover:shadow-xl transition-all duration-300
           hover:from-primary-500 hover:to-primary-400 active:scale-95;
  }

  .btn-secondary {
    @apply bg-white text-primary-600 px-8 py-3 rounded-xl border-2 border-primary-500
           font-medium shadow-md hover:shadow-lg transition-all duration-300
           hover:bg-primary-50 active:scale-95;
  }

  /* Product card styling */
  .product-card {
    @apply card cursor-pointer;
  }

  .product-card-image {
    @apply relative overflow-hidden bg-gradient-to-br from-secondary-50 to-secondary-100
           aspect-square flex items-center justify-center;
  }

  .product-card-image img {
    @apply w-full h-full object-contain p-6 transition-transform duration-500
           group-hover:scale-110;
  }

  /* Modern section styling */
  .section {
    @apply py-16 md:py-24;
  }

  .section-title {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-6
           animate-fade-in;
  }

  .section-subtitle {
    @apply text-lg md:text-xl text-secondary-600 max-w-3xl animate-fade-in;
  }

  /* Container with modern spacing */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Gradient background */
  .gradient-bg {
    @apply bg-gradient-to-br from-primary-50 via-white to-accent-50;
  }

  /* Modern navbar */
  .navbar {
    @apply sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-secondary-200
           transition-all duration-300;
  }

  /* Footer styling */
  .footer {
    @apply bg-gradient-to-br from-secondary-900 to-secondary-800 text-white;
  }

  /* Table styling - responsive */
  .modern-table {
    @apply w-full border-collapse rounded-xl overflow-hidden shadow-lg;
  }

  .modern-table th {
    @apply bg-primary-600 text-white px-6 py-4 text-left font-semibold uppercase tracking-wider;
  }

  .modern-table td {
    @apply px-6 py-4 border-b border-secondary-200;
  }

  .modern-table tr:last-child td {
    @apply border-b-0;
  }

  .modern-table tr:hover td {
    @apply bg-primary-50;
  }

  /* Badge styling */
  .badge {
    @apply inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium
           bg-primary-100 text-primary-700;
  }

  /* Modern input fields */
  .input-modern {
    @apply w-full px-4 py-3 rounded-xl border-2 border-secondary-300
           focus:border-primary-500 focus:ring-4 focus:ring-primary-100
           transition-all duration-300 outline-none;
  }
}

@layer utilities {
  /* Animation utilities */
  .animate-on-scroll {
    @apply opacity-0 translate-y-4 transition-all duration-700;
  }

  .animate-on-scroll.visible {
    @apply opacity-100 translate-y-0;
  }

  /* Gradient text */
  .gradient-text {
    @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
  }

  /* Glass morphism */
  .glass {
    @apply bg-white/10 backdrop-blur-lg border border-white/20;
  }
}