@import "@turbostarter/ui/globals.css";
@import "@turbostarter/ui-web/globals.css";

@source "../../../../../packages/ui";

@layer base {
  @import "@xyflow/react/dist/style.css";

  :root {
    /* Canvas */
    --canvas-bg: oklch(0.985 0.002 247);
    --canvas-grid: oklch(0.92 0.004 286 / 30%);
    /* Nodes */
    --node-bg: oklch(1 0 0);
    --node-border: oklch(0.85 0.01 260);
    --node-selected: oklch(0.623 0.214 260);
    --node-hover: oklch(0.623 0.214 260 / 12%);
    /* Edges */
    --edge-default: oklch(0.65 0.01 286);
    --edge-selected: oklch(0.623 0.214 260);
    /* AI (placeholders for future epics) */
    --ai-accent: oklch(0.623 0.214 260);
    /* Diagram type accents */
    --diagram-bpmn: oklch(0.623 0.214 260);
    --diagram-er: oklch(0.606 0.25 293);
    --diagram-orgchart: oklch(0.723 0.219 150);
    --diagram-architecture: oklch(0.552 0.016 286);
    --diagram-sequence: oklch(0.795 0.184 86);
    --diagram-flowchart: oklch(0.645 0.246 16);
  }

  .dark {
    --canvas-bg: oklch(0.16 0.005 285);
    --canvas-grid: oklch(0.92 0.004 286 / 15%);
    --node-bg: oklch(0.24 0.006 286);
    --node-border: oklch(0.35 0.01 260);
    --node-selected: oklch(0.623 0.214 260);
    --node-hover: oklch(0.623 0.214 260 / 12%);
    --edge-default: oklch(0.55 0.01 286);
    --edge-selected: oklch(0.623 0.214 260);
  }

  /* ELK layout animation — only active during auto-layout transitions */
  .react-flow__node.layouting {
    transition: transform 200ms ease-out;
  }
}
