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

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:wght@400;500;600;700&display=swap');

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    @apply font-sans text-warm-800 bg-warm-50 antialiased;
    line-height: 1.6;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans font-semibold text-warm-900 leading-tight;
  }
  a { @apply transition-colors duration-200; }
  img { @apply max-w-full; }
}

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 font-semibold text-sm rounded-[10px] transition-all duration-200 cursor-pointer select-none border border-transparent;
  }
  .btn-primary {
    @apply btn bg-primary-500 hover:bg-primary-600 active:bg-primary-700 text-white px-6 py-3 shadow-sm hover:shadow-md;
  }
  .btn-secondary {
    @apply btn border-warm-300 hover:border-primary-500 text-warm-700 hover:text-primary-600 bg-white hover:bg-primary-50 px-6 py-3;
  }
  .btn-ghost {
    @apply btn text-primary-600 hover:text-primary-700 hover:bg-primary-50 px-4 py-2;
  }
  .btn-danger {
    @apply btn bg-red-500 hover:bg-red-600 text-white px-6 py-3;
  }
  .btn-sm  { @apply px-4 py-2 text-xs; }
  .btn-lg  { @apply px-8 py-4 text-base; }

  /* Forms */
  .input {
    @apply w-full px-4 py-3 rounded-[10px] border border-warm-300 focus:border-primary-400 focus:ring-2 focus:ring-primary-100 text-warm-800 placeholder:text-warm-400 text-sm transition-all duration-200 outline-none bg-white;
  }
  .input-error { @apply border-red-400 focus:border-red-400 focus:ring-red-100; }
  .label { @apply block text-sm font-medium text-warm-700 mb-1.5; }
  .error-msg { @apply text-xs text-red-500 mt-1; }

  /* Cards */
  .card       { @apply bg-white rounded-[10px] border border-warm-200 shadow-card; }
  .card-hover { @apply card hover:shadow-card-hover transition-shadow duration-200; }

  /* Tags & Badges */
  .tag           { @apply inline-block bg-primary-50 text-primary-600 px-3 py-1 rounded-[10px] text-xs font-medium; }
  .tag-secondary { @apply inline-block bg-secondary-100 text-secondary-700 px-3 py-1 rounded-[10px] text-xs font-medium; }
  .badge         { @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium; }
  .badge-verified  { @apply badge bg-primary-50 text-primary-600; }
  .badge-featured  { @apply badge bg-amber-50 text-amber-600; }
  .badge-pending   { @apply badge bg-yellow-50 text-yellow-700; }
  .badge-approved  { @apply badge bg-green-50 text-green-700; }
  .badge-rejected  { @apply badge bg-red-50 text-red-700; }

  /* Layout */
  .container-main { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }
  .section        { @apply py-16 lg:py-20; }
  .section-sm     { @apply py-10 lg:py-14; }

  /* Catalog grid */
  .catalog-grid { @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6; }

  /* Dashboard layout */
  .dashboard-layout   { @apply flex min-h-screen bg-warm-50; }
  .dashboard-sidebar  { @apply w-64 bg-white border-r border-warm-200 flex-shrink-0; }
  .dashboard-content  { @apply flex-1 p-6 lg:p-8 overflow-x-hidden; }

  /* Pagination */
  .page-link        { @apply px-4 py-2 rounded-[10px] text-sm font-medium border border-warm-200 text-warm-700 hover:border-primary-400 hover:text-primary-600 transition-all duration-200; }
  .page-link-active { @apply bg-primary-500 text-white border-primary-500; }

  /* Alerts */
  .alert         { @apply rounded-[10px] px-4 py-3 text-sm font-medium border; }
  .alert-success { @apply alert bg-green-50 text-green-700 border-green-200; }
  .alert-error   { @apply alert bg-red-50 text-red-700 border-red-200; }
  .alert-warning { @apply alert bg-amber-50 text-amber-700 border-amber-200; }
  .alert-info    { @apply alert bg-primary-50 text-primary-700 border-primary-200; }

  /* Stars */
  .stars { @apply inline-flex items-center gap-0.5 text-amber-400; }
}