@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Outfit", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  
  /* Theme Colors */
  --color-primary: #4DA3FF;
  --color-accent: #FF2E88;
  --color-glass-bg: rgba(246, 249, 255, 0.8);
  --color-glass-card: rgba(255, 255, 255, 0.7);
  
  /* Shadows */
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --shadow-emboss: inset 2px 2px 4px #dbe6ff, inset -2px -2px 4px #ffffff;
}

@layer base {
  body {
    @apply bg-[#F6F9FF] text-gray-900 antialiased overflow-hidden transition-colors duration-500;
    font-feature-settings: "ss01", "ss02", "cv01", "cv11";
  }

  body.dark {
    @apply bg-[#0a0a0a] text-gray-100;
  }
}

@layer components {
  .glass-panel {
    @apply bg-white/70 backdrop-blur-xl border border-white/40 shadow-glass transition-all duration-300;
  }
  
  .dark .glass-panel {
    @apply bg-white/5 border-white/10 shadow-2xl;
  }
  
  .glass-card {
    @apply bg-white/50 backdrop-blur-md border border-white/40 hover:bg-white/80 transition-all duration-300 shadow-sm;
  }

  .dark .glass-card {
    @apply bg-white/5 border-white/10 hover:bg-white/10;
  }

  .emboss-btn {
    @apply shadow-glass border border-white/40 transition-all duration-200 active:shadow-emboss;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.05), -4px -4px 8px rgba(255,255,255,0.8);
  }

  .dark .emboss-btn {
    @apply border-white/10 shadow-none active:bg-white/10;
    box-shadow: none;
  }

  .sidebar-item {
    @apply flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 cursor-pointer;
  }

  .sidebar-item-active {
    @apply bg-primary/20 text-primary border border-primary/30;
  }

  .sidebar-item:hover:not(.sidebar-item-active) {
    @apply bg-white/20;
  }
  
  .dark .sidebar-item:hover:not(.sidebar-item-active) {
    @apply bg-white/5;
  }

  .neon-glow:hover {
    box-shadow: 0 0 15px rgba(255, 46, 136, 0.4);
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-black/10 rounded-full hover:bg-black/20;
  }
  
  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-white/10 hover:bg-white/20;
  }
}

/* Animation for the background glow */
@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(2%, 2%) scale(1.1); }
  66% { transform: translate(-1%, 3%) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

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

.animate-float-delayed {
  animation: float 25s ease-in-out infinite reverse;
}

/* Hide TransformControls UI when rendering */
.rendering-hide {
  display: none !important;
}