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

@theme {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* Force class-based dark mode for Tailwind v4 */
@custom-variant dark (&:where(.dark, .dark *));

body {
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow: hidden;
}

#root {
  height: 100vh;
  width: 100vw;
}

/* ReactFlow Theming Overrides */
.react-flow__background {
  background-color: var(--bg-primary) !important;
}

.react-flow__controls {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.react-flow__controls-button {
  background: var(--bg-secondary) !important;
  border: none !important;
  fill: var(--text-secondary) !important;
}

.react-flow__controls-button:hover {
  background: var(--interactive-hover) !important;
  fill: var(--text-primary) !important;
}

/* Remove default group node container styling - keep inner nodes intact */
.react-flow__node-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove the default white background and black border from ALL node wrappers */
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}