:root {
    --vf-node-bg: #ffffff;
    --vf-node-text: #222222;
    --vf-connection-path: #b1b1b7;
    --vf-handle: #555555;

    /* custom node + UI tokens */
    --vf-node-border: rgba(0, 0, 0, 0.2);
    --vf-node-border-selected: #3b82f6;
    --vf-node-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    --vf-node-shadow-selected: 0 0 0 1px rgba(59, 130, 246, 0.7),
    0 4px 10px rgba(37, 99, 235, 0.25);

    --vf-input-bg: #ffffff;
    --vf-input-text: #111827;
    --vf-input-border: rgba(148, 163, 184, 0.9);
    --vf-input-border-focus: #3b82f6;
    --vf-input-shadow-focus: 0 0 0 1px rgba(59, 130, 246, 0.35);

    --vf-placeholder-text: #9ca3af;

    --vf-menu-bg: #ffffff;
    --vf-menu-border: rgba(15, 23, 42, 0.15);
    --vf-menu-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);

    --vf-image-bg: #f9fafb;

    --vf-accent: #1d4ed8;
    --vf-accent-soft-bg: #e5f0ff;
    --vf-accent-soft-border: #bfdbfe;

    --vf-error-bg: #fecaca;
    --vf-error-text: #b91c1c;

    --vf-danger-bg: #eb311c;
    --vf-danger-text: #ffffff;
}

/* canvas background for flows using this theme */
.basic-flow {
    background: #f3f4f6;
    color: var(--vf-node-text);
}

/* edges and labels */
.vue-flow__edge.updating .vue-flow__edge-path {
    stroke: #777777;
}

.vue-flow__edge-text {
    font-size: 10px;
}

.vue-flow__edge-textbg {
    fill: #ffffff;
}

.vue-flow__connection-path,
.vue-flow__edge-path {
    stroke: var(--vf-connection-path);
}

/* generic node card for all nodes inside .basic-flow */
.basic-flow .vue-flow__node {
    cursor: grab;
    background-color: var(--vf-node-bg);
    color: var(--vf-node-text);
    border-radius: 8px;
    border: 1px solid var(--vf-node-border);
    box-shadow: var(--vf-node-shadow);
    overflow: visible;
    box-sizing: border-box;
}

.basic-flow .vue-flow__node.selectable:focus,
.basic-flow .vue-flow__node.selectable:focus-visible {
    outline: none;
}

/* single selection border, shared for all node types */
.basic-flow .vue-flow__node.selected {
    border-color: var(--vf-node-border-selected);
    box-shadow: var(--vf-node-shadow-selected);
}

.basic-flow .vue-flow__node:has(.vf-node-menu-open) {
    z-index: 1000;
    overflow: visible;
}

/* optional accents for built in node types */
.basic-flow .vue-flow__node-input {
    border-color: #0041d0;
}

.basic-flow .vue-flow__node-default {
    border-color: #1a192b;
}

.basic-flow .vue-flow__node-output {
    border-color: #ff0072;
}

.basic-flow .vue-flow__node.vf-comment-node {
    background-color: #dbeafe;
    border-color: #93c5fd;
    color: #1e3a5f;
}

.basic-flow .vue-flow__node.vf-comment-node.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45);
}

.basic-flow.dark .vue-flow__node.vf-comment-node {
    background-color: #1e3a5f;
    border-color: #3b82f6;
    color: #dbeafe;
}

.basic-flow.dark .vue-flow__node.vf-comment-node.selected {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.5);
}

/* handles */
.vue-flow__handle {
    width: 6px;
    height: 6px;
    background: var(--vf-handle);
    border: 1px solid #ffffff;
    border-radius: 100%;
}

/* selection rectangle */
.vue-flow__nodesselection-rect,
.vue-flow__selection {
    background: rgba(0, 89, 220, 0.08);
    border: 1px dotted rgba(0, 89, 220, 0.8);
}

.vue-flow__nodesselection-rect:focus,
.vue-flow__nodesselection-rect:focus-visible,
.vue-flow__selection:focus,
.vue-flow__selection:focus-visible {
    outline: none;
}