:root {
  --background: 0 0% 100%;
  --foreground: 220 15% 10%;

  --card: 0 0% 100%;
  --card-foreground: 220 15% 10%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 10%;

  --primary: 24 95% 53%;
  --primary-foreground: 0 0% 100%;

  --secondary: 189 94% 43%;
  --secondary-foreground: 0 0% 100%;

  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;

  --accent: 340 82% 52%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 24 95% 53%;

  --radius: 1rem;
  
  /* Modern design tokens */
  --vibrant-coral: 24 95% 53%;
  --ocean-teal: 189 94% 43%;
  --sunset-pink: 340 82% 52%;
  --warm-sand: 35 100% 97%;
  
  /* Modern gradients */
  --gradient-hero: linear-gradient(135deg, hsl(24 95% 53% / 0.05), hsl(189 94% 43% / 0.05));
  --gradient-sunset: linear-gradient(135deg, hsl(340 82% 52%), hsl(24 95% 53%));
  --gradient-ocean: linear-gradient(180deg, hsl(189 94% 43%), hsl(200 100% 35%));
  --gradient-glass: linear-gradient(135deg, hsl(0 0% 100% / 0.1), hsl(0 0% 100% / 0.05));
  
  /* Modern shadows */
  --shadow-soft: 0 2px 20px hsl(220 15% 10% / 0.05);
  --shadow-medium: 0 8px 30px hsl(220 15% 10% / 0.08);
  --shadow-glow: 0 0 60px hsl(24 95% 53% / 0.15);
  
  /* Animations */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

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

.gradient-sunset {
  background: var(--gradient-sunset);
}

.gradient-ocean {
  background: var(--gradient-ocean);
}

.glass-card {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsl(0 0% 100% / 0.2);
}

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

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

.animate-fade-in {
  animation: fadeIn 1s ease-out;
}

.animate-fade-out {
  animation: fadeOut 1s ease-out;
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Accordion Styles */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-content.open {
  max-height: 500px; /* Arbitrary large height */
}

/* Mobile Menu */
.mobile-menu {
  display: none;
}

.mobile-menu.open {
  display: block;
}