@import "tailwindcss";
@import "@xyflow/react/dist/style.css";

:root {
  --tier-1: #ef4444;
  --tier-2: #f97316;
  --tier-3: #3b82f6;
  --tier-4: #8b5cf6;
  --gate-color: #fbbf24;
}

/* React Flow dark theme overrides */
.react-flow {
  background: #030712;
}

.react-flow__minimap {
  background: #111827;
}

.react-flow__minimap-mask {
  fill: #1f2937;
}

.react-flow__controls {
  background: #111827;
  border: 1px solid #374151;
}

.react-flow__controls-button {
  background: #111827;
  border-bottom: 1px solid #374151;
  color: #9ca3af;
}

.react-flow__controls-button:hover {
  background: #1f2937;
  color: #f9fafb;
}

.react-flow__edge-path {
  stroke: #4b5563;
}

.react-flow__node {
  border-radius: 0.5rem;
}