@import "tailwindcss";

@theme {
  --color-gold: #D4AF37;
  --color-pale-gold: #C5A028;
  --color-dark-gold: #8B6B0D;
  --color-black-gold: #1A1A1A;
  --color-pale-black: #121212;
  --color-off-white: #E0E0E0;

  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
}

@layer base {
  body {
    @apply bg-pale-black text-off-white font-body scroll-smooth;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display tracking-tight text-white;
  }
}

@layer components {
  .btn-gold {
    @apply px-6 py-2 bg-gold text-black font-semibold rounded-full hover:bg-pale-gold transition-all duration-300 transform hover:scale-105;
  }

  .glass-card {
    @apply bg-black-gold/50 backdrop-blur-md border border-gold/20 rounded-xl p-6 shadow-xl;
  }

  .nav-link {
    @apply text-off-white hover:text-gold transition-colors duration-200 uppercase tracking-widest text-xs font-semibold;
  }

  .gold-border {
    @apply border-b border-gold/30;
  }

  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
  }

  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom styles for specific sections */
.hero-gradient {
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
}

.gold-text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-gold to-pale-gold;
}

/* Product Card Hover Effect */
.product-card {
  @apply hover:border-gold/50 cursor-pointer overflow-hidden relative;
}

.product-card img {
  @apply transition-transform duration-500;
}

.product-card:hover img {
  @apply scale-110;
}

/* Pagination Styles */
.pagination-btn {
  @apply w-10 h-10 flex items-center justify-center rounded-full border border-gold/30 hover:bg-gold hover:text-black transition-all;
}

.pagination-btn.active {
  @apply bg-gold text-black;
}