@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --font-sans: "Inter", "Noto Sans Khmer", ui-sans-serif, system-ui, sans-serif;
  
  /* Breakpoints */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Colors */
  --color-haven-50: #f0f9ff;
  --color-haven-100: #e0f2fe;
  --color-haven-200: #bae6fd;
  --color-haven-300: #7dd3fc;
  --color-haven-400: #38bdf8;
  --color-haven-500: #0ea5e9;
  --color-haven-600: #0284c7;
  --color-haven-700: #0369a1;
  --color-haven-800: #075985;
  --color-haven-900: #0c4a6e;
  --color-haven-950: #082f49;
}

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
    font-size: 16px;
  }
  
  @media (min-width: 768px) {
    html {
      font-size: 18px;
    }
  }

  @media (min-width: 1024px) {
    html {
      font-size: 19px;
    }
  }
  
  body {
    @apply bg-slate-50 text-slate-900 antialiased;
    line-height: 1.6;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply tracking-tight font-bold text-slate-900;
    line-height: 1.2;
  }

  h1 { @apply text-2xl md:text-3xl lg:text-4xl; }
  h2 { @apply text-xl md:text-2xl lg:text-3xl; }
  h3 { @apply text-lg md:text-xl lg:text-2xl; }
}

@layer components {
  .container-padding {
    @apply px-4 md:px-8 lg:px-12;
  }
  
  .section-spacing {
    @apply space-y-6 md:space-y-8;
  }

  .card-base {
    @apply bg-white rounded-3xl border border-slate-100 shadow-sm transition-all;
  }

  .btn-primary {
    @apply bg-haven-600 text-white px-6 py-3.5 rounded-xl font-bold text-sm md:text-base flex items-center justify-center gap-2 hover:bg-haven-700 transition-all shadow-sm active:scale-95 w-full md:w-auto;
  }
}

/* Custom scrollbar for chat windows */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}