@import "tailwindcss";

@theme {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", serif;
  
  --color-luxury-gold: #D4AF37;
  --color-luxury-burgundy: #4A0E0E;
  --color-luxury-cream: #FDFBF7;
  --color-luxury-rose: #E5B7B7;
  --color-luxury-midnight: #1A1A1A;
  
  --color-brand-50: var(--brand-50);
  --color-brand-100: var(--brand-100);
  --color-brand-200: var(--brand-200);
  --color-brand-300: var(--brand-300);
  --color-brand-400: var(--brand-400);
  --color-brand-500: var(--brand-500);
  --color-brand-600: var(--brand-600);
  --color-brand-700: var(--brand-700);
  --color-brand-800: var(--brand-800);
  --color-brand-900: var(--brand-900);

  --color-slate-50: var(--slate-50);
  --color-slate-100: var(--slate-100);
  --color-slate-200: var(--slate-200);
  --color-slate-300: var(--slate-300);
  --color-slate-400: var(--slate-400);
  --color-slate-500: var(--slate-500);
  --color-slate-600: var(--slate-600);
  --color-slate-700: var(--slate-700);
  --color-slate-800: var(--slate-800);
  --color-slate-900: var(--slate-900);
  --color-slate-950: var(--slate-950);

  --color-white: var(--color-white);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-6: var(--chart-6);
  --color-chart-7: var(--chart-7);
  --color-chart-8: var(--chart-8);
  --color-chart-9: var(--chart-9);
  --color-chart-10: var(--chart-10);

  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --shadow-glass-hover: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes slideUp {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  --animate-blob: blob 10s infinite;
  --animate-fade-in: fadeIn 0.5s ease-out forwards;
  --animate-slide-up: slideUp 0.5s ease-out forwards;
}

@layer base {
  body {
    @apply font-sans antialiased;
    background-color: var(--bg-color);
    color: var(--slate-900);
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif;
    color: var(--slate-900);
  }
}

.glass-luxury {
  @apply backdrop-blur-md border shadow-glass;
  background-color: color-mix(in srgb, var(--color-white) 70%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 20%, transparent);
}

.text-gradient-gold {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-luxury-gold via-yellow-600 to-luxury-gold;
}

.button-luxury {
  @apply relative overflow-hidden px-8 py-3 rounded-full font-medium transition-all duration-500;
  @apply bg-luxury-midnight text-white hover:bg-luxury-burgundy hover:shadow-xl;
}

.button-luxury::after {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 -translate-x-full;
  transition: transform 0.6s ease;
}

.button-luxury:hover::after {
  @apply translate-x-full;
}

.card-luxury {
  @apply rounded-3xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-700 border border-black/5;
  background-color: var(--color-white);
}

.glow-gold {
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
}

.glow-rose {
  box-shadow: 0 0 30px rgba(229, 183, 183, 0.2);
}

.font-serif {
  font-feature-settings: "swsh" 1, "cswh" 1;
}

.perfume-story-mask {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}