@layer base {
  :root {
    --background: 220 60% 99%;
    --foreground: 220 48% 19%;
    --card: 0 0% 100%;
    --card-foreground: 220 48% 19%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 48% 19%;
    --primary: 130 70% 60%;
    --primary-foreground: 220 48% 10%;
    --secondary: 220 40% 96%;
    --secondary-foreground: 220 48% 19%;
    --muted: 220 40% 96%;
    --muted-foreground: 220 30% 60%;
    --accent: 41 55% 90%;
    --accent-foreground: 220 48% 19%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 40% 90%;
    --input: 220 40% 90%;
    --ring: 41 55% 52%;
    --radius: 0.8rem;
  }

  .dark {
    --background: 220 48% 10%;
    --foreground: 210 40% 98%;
    --card: 220 48% 12%;
    --card-foreground: 210 40% 98%;
    --popover: 220 48% 12%;
    --popover-foreground: 210 40% 98%;
    --primary: 130 70% 60%;
    --primary-foreground: 220 48% 10%;
    --secondary: 220 40% 20%;
    --secondary-foreground: 210 40% 98%;
    --muted: 220 40% 20%;
    --muted-foreground: 210 40% 90%;
    --accent: 220 40% 25%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 40% 25%;
    --input: 220 40% 25%;
    --ring: 41 55% 52%;
  }
}

/* Custom Base Styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Utilities from globals.css */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.section-padding {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .section-padding {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

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

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

@keyframes pulse-slow {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.accordion-item.active .accordion-content {
  /* max-height handled by JS */
}

.accordion-trigger[data-state="open"] svg {
  transform: rotate(180deg);
}

/* Mobile Menu Transition */
#mobile-menu {
  transition: transform 0.3s ease-in-out;
}

#mobile-menu.open {
  transform: translateX(0);
}

#mobile-menu.closed {
  transform: translateX(100%);
}