@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-default: 'Montserrat';

  --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: 142.1 76.2% 36.3%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 142.1 76.2% 36.3%;
  --accent-foreground: 0 0% 100%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 142.1 76.2% 36.3%;
  --sidebar-background: 240 10% 3.9%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-primary: 142.1 76.2% 36.3%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 142.1 76.2% 36.3%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 142.1 76.2% 36.3%;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    font-family: var(--font-default);
    @apply bg-background text-foreground;
  }
}

.kanban-board {
  @apply grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4;
}

.kanban-column {
  @apply bg-secondary rounded-lg p-4 min-w-[300px];
}

.kanban-card {
  @apply bg-card p-3 rounded-md shadow-sm mb-2 cursor-pointer hover:shadow-md transition-shadow;
}

.editor-container .ProseMirror {
  @apply min-h-[300px] p-4 rounded-md bg-secondary focus:outline-none focus:ring-1 focus:ring-primary;
}

.editor-container .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  @apply text-muted-foreground float-left h-0;
}

.project-card {
  @apply bg-secondary p-4 rounded-lg cursor-pointer hover:bg-muted transition-colors;
}

.graph-node {
  @apply fill-primary stroke-primary-foreground stroke-2;
}

.graph-link {
  @apply stroke-muted-foreground stroke-1 opacity-30;
}

/* Galaxy graph styles */
.galaxy-container {
  @apply overflow-hidden relative;
  perspective: 1000px;
}

.galaxy-background {
  @apply bg-black;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(76, 29, 149, 0.08) 0%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 80% 10%, rgba(124, 58, 237, 0.05) 0%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 40% 60%, rgba(79, 70, 229, 0.05) 0%, rgba(0, 0, 0, 0) 40%);
}

/* Fix the circular dependency by using direct CSS properties instead of @apply */
.neo-blur {
  backdrop-filter: blur(16px);
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.shadow-glow {
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);
}

.glow-button {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.glow-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

.cosmic-button {
  @apply border-white/20 text-white/90 bg-black/30 hover:bg-white/10 hover:text-white;
}

.text-gradient-cosmic {
  @apply text-transparent bg-clip-text;
  background-image: linear-gradient(to right, #fff 20%, #a78bfa 40%, #818cf8 60%, #fff 80%);
  background-size: 200% auto;
  animation: shine 3s linear infinite;
}

.cosmic-glow {
  animation: pulse-glow 3s infinite alternate;
}

.star-core {
  filter: saturate(1.2);
}

/* Star twinkle animations with different durations */
.star-twinkle-0 {
  animation: twinkle 2s ease-in-out infinite;
}

.star-twinkle-1 {
  animation: twinkle 3s ease-in-out 0.5s infinite;
}

.star-twinkle-2 {
  animation: twinkle 4s ease-in-out 1s infinite;
}

.star-twinkle-3 {
  animation: twinkle 3.5s ease-in-out 1.5s infinite;
}

.star-twinkle-4 {
  animation: twinkle 2.5s ease-in-out 0.2s infinite;
}

.connection-highlight {
  animation: connection-pulse 2s ease-in-out infinite;
  stroke-width: 1.5px;
  opacity: 0.9;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    r: 0.5;
  }
  50% {
    opacity: 0.8;
    r: 1.2;
  }
}

@keyframes pulse-glow {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes connection-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Legend items for Knowledge Galaxy */
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  backdrop-filter: blur(16px);
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);
}

.legend-item span {
  font-size: 0.75rem;
  color: white;
}
