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

/* ── Swiper ────────────────────────────────────────────────────────────────── */
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
@import 'swiper/css/effect-fade';
@import 'swiper/css/free-mode';

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ── Base ──────────────────────────────────────────────────────────────────── */
@layer base {
  :root {
    --font-sans:    'Nunito', system-ui, sans-serif;
    --font-display: 'Poppins', system-ui, sans-serif;
    --dm-bg:       #0f1a0f;   /* COLORS.dm.bg       */
    --dm-surface:  #182a18;   /* COLORS.dm.surface  */
    --dm-surface2: #1e321e;   /* COLORS.dm.surface2 */
    --dm-border:   #2d472d;   /* COLORS.dm.border   */
    --dm-text:     #e8f5e8;   /* COLORS.dm.text     */
    --dm-muted:    #9db89d;   /* COLORS.dm.muted    */
  }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    color: #1a1a1a;
    background: #F8F9FA;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .dark body {
    background-color: var(--dm-bg);
    color: var(--dm-text);
  }
  * { box-sizing: border-box; }
  a { text-decoration: none; }
  img { max-width: 100%; }
}

/* ── Components ────────────────────────────────────────────────────────────── */
@layer components {
  .btn-primary {
    @apply inline-flex items-center gap-2 bg-primary-700 hover:bg-primary-800 text-white font-bold px-5 py-2.5 rounded-xl transition-all duration-200 hover:shadow-md hover:-translate-y-px disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 active:scale-95 cursor-pointer;
  }
  .btn-outline {
    @apply inline-flex items-center gap-2 border-2 border-primary-700 text-primary-700 hover:bg-primary-700 hover:text-white font-bold px-5 py-2.5 rounded-xl transition-all duration-200 cursor-pointer;
  }
  .btn-secondary {
    @apply inline-flex items-center gap-2 bg-secondary-500 hover:bg-secondary-600 text-white font-bold px-5 py-2.5 rounded-xl transition-all duration-200 cursor-pointer;
  }
  .card {
    @apply bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 overflow-hidden;
  }
  .dark .card {
    background-color: var(--dm-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  .dark .card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  .section-title {
    @apply text-xl font-black text-gray-800 font-display;
  }
  .dark .section-title {
    color: var(--dm-text);
  }
  .badge-sale {
    @apply bg-red-500 text-white font-bold text-xs px-2 py-0.5 rounded-full;
  }
  .price-original {
    @apply text-gray-400 line-through;
  }
  .container-custom {
    @apply max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .input-field {
    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-sm focus:outline-none focus:border-primary-400 transition-colors;
  }
  .dark .input-field {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
  }
  .skeleton {
    @apply bg-gray-200 rounded animate-pulse;
  }
  .dark .skeleton {
    background-color: var(--dm-border);
  }
  .font-display {
    font-family: var(--font-display);
  }
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #E5E7EB transparent;
  }
  .scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
  .scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
  .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
  .scrollbar-thin::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 4px; }
}

/* ── Animations ────────────────────────────────────────────────────────────── */
@layer utilities {
  .animate-fade-in     { animation: fadeIn 0.3s ease-in-out; }
  .animate-slide-up    { animation: slideUp 0.4s ease-out; }
  .animate-slide-down  { animation: slideDown 0.2s ease-out; }
  .animate-bounce-in   { animation: bounceIn 0.35s cubic-bezier(0.34,1.56,0.64,1); }
  .animate-slide-left  { animation: slideLeft 0.3s ease-out; }
  .animate-slide-right { animation: slideRight 0.3s ease-out; }
  .page-enter          { animation: fadeIn 0.4s ease-out; }
}

@keyframes fadeIn    { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes slideUp   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounceIn  { from { opacity: 0; transform: scale(0.9); }       to { opacity: 1; transform: scale(1); } }
@keyframes slideLeft  { from { opacity: 0; transform: translateX(100%);  } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }

/* ── Swiper bullet overrides ───────────────────────────────────────────────── */
.swiper-pagination-bullet        { background: #fff !important; opacity: 0.5 !important; }
.swiper-pagination-bullet-active { opacity: 1 !important; background: #fff !important; transform: scale(1.3); }

/* ── Prose overrides ───────────────────────────────────────────────────────── */
.prose p, .prose li { color: #4B5563; line-height: 1.75; }
.prose h2, .prose h3 { color: #1F2937; font-family: var(--font-display); }