@import "tailwindcss";

@theme {
  --color-saturn-bg: #0a0a0a;
  --color-saturn-panel: #141414;
  --color-saturn-accent: #3b82f6;
  --color-saturn-accent-glow: rgba(59, 130, 246, 0.3);
  --color-saturn-text-primary: #f4f4f5;
  --color-saturn-text-secondary: #a1a1aa;
  --color-saturn-border: #27272a;
}

@layer base {
  body {
    @apply bg-saturn-bg text-saturn-text-primary font-sans antialiased;
    overflow: hidden;
    user-select: none;
  }
}

@layer components {
  .btn-primary {
    @apply bg-saturn-accent hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-md transition-all duration-200 shadow-[0_0_15px_rgba(59,130,246,0.2)] hover:shadow-[0_0_20px_rgba(59,130,246,0.4)];
  }

  .sidebar-icon {
    @apply w-10 h-10 flex items-center justify-center rounded-lg transition-all duration-200 text-saturn-text-secondary hover:text-white hover:bg-white/5 cursor-pointer;
  }

  .sidebar-icon.active {
    @apply text-saturn-accent bg-saturn-accent/10;
  }

  .panel {
    @apply bg-saturn-panel border border-saturn-border rounded-lg overflow-hidden;
  }
}

/* Custom scrollbar for dense UI */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}