:root {
  --background: 20 30% 98%;
  --foreground: 20 10% 10%;
  --primary: 14 85% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 45 93% 47%;
  --secondary-foreground: 0 0% 100%;
  --muted: 20 10% 90%;
  --muted-foreground: 20 10% 40%;
  --border: 20 10% 85%;
  --card: 0 0% 100%;
  --card-foreground: 20 10% 10%;
  --radius-lg: 1rem;
  --radius-md: 0.75rem;
  --radius-sm: 0.5rem;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.dark {
  --background: 20 10% 5%;
  --foreground: 20 5% 95%;
  --primary: 14 85% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 45 93% 55%;
  --secondary-foreground: 0 0% 100%;
  --muted: 20 10% 12%;
  --muted-foreground: 20 5% 65%;
  --border: 20 10% 18%;
  --card: 20 10% 8%;
  --card-foreground: 20 5% 95%;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.burger-shadow {
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}

.dark .burger-shadow {
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}

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

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

/* Smooth transitions for theme-aware elements */
.bg-white, .bg-\[hsl\(var\(--card\)\)\], .bg-\[hsl\(var\(--background\)\)\], .bg-\[hsl\(var\(--muted\)\)\] {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}