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

@layer base {
  body {
    @apply bg-slate-950 text-slate-100;
    font-family: 'Inter', system-ui, sans-serif;
  }
}

@layer components {
  .vue-flow {
    @apply bg-slate-900;
  }

  .vue-flow__node {
    @apply bg-slate-800 border border-slate-700 rounded-lg shadow-lg;
  }

  .vue-flow__node.selected {
    @apply border-blue-500 ring-2 ring-blue-500/50;
  }

  .vue-flow__edge-path {
    stroke: #475569;
    stroke-width: 2;
  }

  .vue-flow__controls {
    @apply bg-slate-800 border-slate-700;
  }

  .vue-flow__controls-button {
    @apply bg-slate-700 text-slate-200 hover:bg-slate-600;
  }
}