@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Luxurious rose gold and blush palette */
  --background: 30 25% 98%;
  --foreground: 345 25% 15%;

  --card: 0 0% 100%;
  --card-foreground: 345 25% 15%;

  --popover: 0 0% 100%;
  --popover-foreground: 345 25% 15%;

  /* Rose gold primary */
  --primary: 10 60% 65%;
  --primary-foreground: 0 0% 100%;

  /* Soft blush secondary */
  --secondary: 340 30% 95%;
  --secondary-foreground: 345 25% 25%;

  --muted: 30 20% 94%;
  --muted-foreground: 345 15% 45%;

  /* Lavender accent */
  --accent: 280 30% 92%;
  --accent-foreground: 280 40% 35%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 30 20% 90%;
  --input: 30 20% 90%;
  --ring: 10 60% 65%;

  --radius: 1rem;

  /* Custom beauty palette */
  --rose: 10 60% 65%;
  --rose-light: 10 80% 92%;
  --rose-dark: 10 50% 50%;
  --blush: 340 45% 90%;
  --lavender: 280 35% 88%;
  --lavender-dark: 280 40% 65%;
  --gold: 40 75% 55%;
  --gold-light: 45 100% 92%;
  --cream: 40 30% 96%;
  --champagne: 35 40% 92%;
  --coral: 15 80% 70%;
  --peach: 25 100% 90%;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, hsl(340 45% 96%) 0%, hsl(10 60% 95%) 50%, hsl(280 35% 95%) 100%);
  --gradient-rose: linear-gradient(135deg, hsl(10 60% 65%) 0%, hsl(340 50% 65%) 100%);
  --gradient-lavender: linear-gradient(135deg, hsl(280 35% 88%) 0%, hsl(260 40% 85%) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(40 75% 55%) 0%, hsl(35 80% 65%) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);

  /* Shadows */
  --shadow-soft: 0 4px 20px -4px hsl(10 60% 65% / 0.15);
  --shadow-glow: 0 0 40px hsl(10 60% 65% / 0.25);
  --shadow-card: 0 8px 40px -12px hsl(345 25% 15% / 0.1);
  --shadow-elevated: 0 20px 60px -20px hsl(345 25% 15% / 0.15);

  /* Sidebar - keeping for compatibility */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 345 20% 8%;
  --foreground: 30 25% 95%;

  --card: 345 20% 12%;
  --card-foreground: 30 25% 95%;

  --popover: 345 20% 12%;
  --popover-foreground: 30 25% 95%;

  --primary: 10 65% 60%;
  --primary-foreground: 345 20% 8%;

  --secondary: 345 20% 18%;
  --secondary-foreground: 30 25% 90%;

  --muted: 345 15% 20%;
  --muted-foreground: 30 15% 60%;

  --accent: 280 25% 25%;
  --accent-foreground: 280 30% 85%;

  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;

  --border: 345 15% 20%;
  --input: 345 15% 20%;
  --ring: 10 65% 60%;

  /* Dark mode custom colors */
  --rose: 10 65% 60%;
  --rose-light: 10 40% 25%;
  --rose-dark: 10 70% 45%;
  --blush: 340 30% 20%;
  --lavender: 280 25% 25%;
  --lavender-dark: 280 35% 50%;
  --gold: 40 70% 50%;
  --gold-light: 45 50% 20%;
  --cream: 40 15% 15%;
  --champagne: 35 20% 18%;
  --coral: 15 70% 55%;
  --peach: 25 50% 25%;

  --gradient-hero: linear-gradient(135deg, hsl(345 20% 10%) 0%, hsl(10 30% 12%) 50%, hsl(280 20% 12%) 100%);
  --gradient-rose: linear-gradient(135deg, hsl(10 65% 50%) 0%, hsl(340 55% 45%) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);

  --shadow-soft: 0 4px 20px -4px hsl(10 65% 60% / 0.2);
  --shadow-glow: 0 0 40px hsl(10 65% 60% / 0.3);
  --shadow-card: 0 8px 40px -12px hsl(0 0% 0% / 0.4);
  --shadow-elevated: 0 20px 60px -20px hsl(0 0% 0% / 0.5);

  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-display {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-sans {
  font-family: 'Inter', system-ui, sans-serif;
}

.text-gradient {
  background: var(--gradient-rose);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-hero {
  background: var(--gradient-hero);
}

.bg-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-elevated {
  box-shadow: var(--shadow-elevated);
}

/* Shimmer animation */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

/* Float animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

/* Pulse glow */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px hsl(var(--rose) / 0.3); }
  50% { box-shadow: 0 0 40px hsl(var(--rose) / 0.5); }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Score reveal */
@keyframes score-reveal {
  0% { 
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  100% { 
    opacity: 1;
    transform: scale(1);
  }
}

.animate-score-reveal {
  animation: score-reveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Progress fill */
@keyframes progress-fill {
  from { width: 0%; }
}

.animate-progress-fill {
  animation: progress-fill 1.5s ease-out forwards;
}

/* Fade slide up */
@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-slide-up {
  animation: fade-slide-up 0.6s ease-out forwards;
}

/* Sparkle */
@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.animate-sparkle {
  animation: sparkle 1.5s ease-in-out infinite;
}

/* Utility for hiding/showing elements (since normal React conditional rendering is gone) */
/* .hidden {
  display: none !important;
} */