@layer base {
  /* Default theme (Zinc) */
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }

  /* Red theme */
  .theme-red {
    --primary: 0 72.2% 50.6%;
    --primary-foreground: 0 0% 98%;
  }
  .theme-red.dark {
    --primary: 0 72.2% 50.6%;
    --primary-foreground: 0 0% 98%;
  }

  /* Rose theme */
  .theme-rose {
    --primary: 346.8 77.2% 49.8%;
    --primary-foreground: 355.7 100% 97.3%;
  }
  .theme-rose.dark {
    --primary: 346.8 77.2% 49.8%;
    --primary-foreground: 355.7 100% 97.3%;
  }

  /* Orange theme */
  .theme-orange {
    --primary: 24.6 95% 53.1%;
    --primary-foreground: 60 9.1% 97.8%;
  }
  .theme-orange.dark {
    --primary: 20.5 90.2% 48.2%;
    --primary-foreground: 60 9.1% 97.8%;
  }

  /* Green theme */
  .theme-green {
    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;
  }
  .theme-green.dark {
    --primary: 142.1 70.6% 45.3%;
    --primary-foreground: 144.9 80.4% 10%;
  }

  /* Blue theme */
  .theme-blue {
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
  }
  .theme-blue.dark {
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
  }

  /* Yellow theme */
  .theme-yellow {
    --primary: 47.9 95.8% 53.1%;
    --primary-foreground: 26 83.3% 14.1%;
  }
  .theme-yellow.dark {
    --primary: 47.9 95.8% 53.1%;
    --primary-foreground: 26 83.3% 14.1%;
  }

  /* Violet theme */
  .theme-violet {
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 40% 98%;
  }
  .theme-violet.dark {
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 40% 98%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
}

/* Toast styles */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.3s ease;
  z-index: 50;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--primary));
}

.toast-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.toast-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

.toast-description {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}