@import "tailwindcss";

@theme {
  --color-pop-pink: #FF6B6B;
  --color-pop-yellow: #FFF200;
  --color-pop-orange: #FFA07A;
  --color-pop-red: #FF4500;
  --color-pop-cyan: #E0FFFF;
  --color-pop-green: #98FB98;
  --color-pop-purple: #D8BFD8;
  --color-pop-bg: #FFF0F5;
  --color-pop-black: #333333;

  /* Spa Theme Colors */
  --color-spa-light: #FDFDF9;
  --color-spa-sage: #EAEFEA;
  --color-spa-stone: #4B4B46;
  --color-spa-forest: #1F3D2D;
  --color-spa-gold: #D4AF37;

  --shadow-brutal: 0 10px 25px rgba(0,0,0,0.05);
  --shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1);
  
  --animate-pop-in: fade-in-up 0.6s ease-out forwards;
  --animate-spin-slow: spin 15s linear infinite;

  @keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

@layer base {
  body {
    @apply bg-pop-bg text-pop-black font-sans antialiased;
    background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
    min-height: 100vh;
  }

  h1, h2, h3, h4 {
    @apply text-pop-black font-semibold tracking-tight;
  }
}

@layer components {
  .brutal-box {
    @apply bg-white border border-gray-100 rounded-2xl shadow-brutal transition-all duration-300;
  }
  
  .brutal-box-hover {
    @apply hover:-translate-y-2 hover:shadow-brutal-hover;
  }

  .brutal-button {
    @apply px-8 py-4 bg-pop-pink text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-pop-red hover:-translate-y-1 hover:shadow-brutal-hover;
  }

  .brutal-button-alt {
    @apply px-8 py-4 bg-white text-pop-pink font-medium rounded-full border border-pop-pink shadow-brutal transition-all duration-300 hover:bg-pop-bg hover:-translate-y-1 hover:shadow-brutal-hover;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-pop-bg;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Product Editorial Image Overrides */
.product-editorial img {
  width: 100%;
  max-width: 480px;
  margin: 2rem auto;
  display: block;
  border-radius: 16px;
  box-shadow: var(--shadow-brutal);
}