@import "tailwindcss";

@theme {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="number"],
  textarea,
  select {
    font-family: inherit;
  }

  h1 {
    @apply text-3xl font-extrabold tracking-tight text-gray-900;
  }

  h2 {
    @apply text-xl font-bold tracking-tight text-gray-900;
  }

  h3 {
    @apply text-lg font-semibold text-gray-900;
  }

  p {
    @apply text-sm text-gray-700 leading-relaxed;
  }

  small,
  .meta {
    @apply text-xs text-gray-500;
  }
}

/* Turbo loading states */
turbo-frame[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s;
}

.turbo-progress-bar {
  background: linear-gradient(90deg, var(--color-indigo-500, #6366f1), var(--color-indigo-600, #4f46e5));
  height: 3px;
}

/* Reusable component classes */
.btn-primary {
  @apply inline-flex items-center justify-center rounded-xl
         bg-gradient-to-b from-indigo-500 to-indigo-600
         px-5 py-2.5 text-sm font-semibold text-white
         shadow-md shadow-indigo-500/25
         transition-all duration-200
         hover:from-indigo-600 hover:to-indigo-700 hover:shadow-lg hover:shadow-indigo-500/30
         focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
         disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer;
}

.btn-secondary {
  @apply inline-flex items-center justify-center rounded-xl border border-gray-300 bg-white px-5 py-2.5 text-sm
         font-semibold text-gray-700 shadow-sm transition-all duration-200
         hover:bg-gray-50 hover:border-gray-400 hover:shadow-md
         focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 cursor-pointer;
}

.input-field {
  @apply block w-full rounded-xl border border-gray-200 bg-gray-50/50 px-4 py-2.5 text-sm
         shadow-sm transition-all duration-200 placeholder:text-gray-400
         focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-500/20 focus:outline-none;
}

.card {
  @apply bg-white rounded-2xl border border-gray-200/60
         shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_24px_rgba(0,0,0,0.04)];
}

/* Cart item enter animation */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.cart-item-enter {
  animation: slideIn 0.2s ease-out;
}

/* Bottom sheet animation */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.bottom-sheet-enter {
  animation: slideUp 0.3s ease-out;
}