@import "./base.css";

.aine-theme-react-flow-light,
.aine-theme-light,
.aine-color-light {
  color-scheme: light;
  --aine-bg: #f7f9fc;
  --aine-grid-dot: #d8e0ea;
  --aine-grid-major: #c2ccda;
  --aine-toolbar-bg: #ffffff;
  --aine-toolbar-border: #d1d9e4;
  --aine-panel-bg: #ffffff;
  --aine-panel-bg-2: #f3f6f9;
  --aine-panel-border: #d5dde8;
  --aine-node-bg: #ffffff;
  --aine-node-header: #4f7fca;
  --aine-node-header-bg: color-mix(in srgb, var(--aine-node-header) 9%, #ffffff);
  --aine-node-header-border: 1px solid var(--aine-row-divider);
  --aine-node-radius: 6px;
  --aine-node-accent-strip-height: 4px;
  --aine-node-accent-strip-bg: var(--aine-node-header);
  --aine-node-port-padding-x: 8px;
  --aine-node-title-font-weight: 600;
  --aine-node-inline-label-width: 76px;
  --aine-node-border: #b8c3d1;
  --aine-node-hover: #718096;
  --aine-node-selected: #2563eb;
  --aine-node-shadow: 0 4px 12px rgba(30, 45, 68, 0.14), 0 1px 2px rgba(30, 45, 68, 0.08);
  --aine-node-selected-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), 0 8px 20px rgba(37, 99, 235, 0.14);
  --aine-text: #152033;
  --aine-text-muted: #344054;
  --aine-text-dim: #64748b;
  --aine-accent: #2563eb;
  --aine-blue-selection: #2563eb;
  --aine-error: #d64545;
  --aine-warning: #c98720;
  --aine-success: #28965a;
  --aine-on-danger: #ffffff;
  --aine-header-text: #111827;
  --aine-header-muted: #64748b;
  --aine-field-bg: #f8fafc;
  --aine-field-border: #d3dbe6;
  --aine-floating-bg: #ffffff;
  --aine-floating-border: #cfd4dc;
  --aine-menu-active: rgba(37, 99, 235, 0.1);
  --aine-focus-ring: rgba(37, 99, 235, 0.72);
  --aine-backdrop: rgba(0, 0, 0, 0.28);
  --aine-overlay-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
  --aine-floating-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  --aine-dialog-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  --aine-edge-stroke: #8491a3;
  --aine-edge-stroke-width: 1.9px;
  --aine-edge-selected: #2563eb;
  --aine-edge-hit: rgba(0, 0, 0, 0.001);
  --aine-edge-filter: none;
  --aine-edge-action-bg: #ffffff;
  --aine-edge-action-border: #b8c0cb;
  --aine-edge-action-color: #475467;
  --aine-edge-action-shadow: 0 3px 10px rgba(23, 32, 51, 0.2);
  --aine-node-action-bg: rgba(255, 255, 255, 0.96);
  --aine-node-action-shadow: 0 12px 32px rgba(30, 45, 68, 0.18);
  --aine-resize-bg: #3367d9;
  --aine-resize-line: rgba(255, 255, 255, 0.72);
  --aine-row-divider: #e2e7ee;
  --aine-status-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  --aine-socket-border: #ffffff;
  --aine-socket-shadow: 0 0 0 1px rgba(52, 64, 84, 0.68), 0 1px 2px rgba(15, 23, 42, 0.2);
  --aine-socket-size: 10px;
  --aine-socket-multiple-width: 18px;
  --aine-socket-radius: 999px;
  --aine-minimap-bg: #f8fafc;
  --aine-minimap-node: rgba(51, 103, 217, 0.7);
  --aine-minimap-node-stroke: rgba(30, 41, 59, 0.3);
  --aine-minimap-node-selected: #3367d9;
  --aine-minimap-viewport-fill: rgba(0, 89, 220, 0.08);
  --aine-minimap-viewport-stroke: #3367d9;
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light) .aine-node-header {
  color: var(--aine-header-text);
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light) .aine-node-port {
  color: #344054;
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light) .aine-node-port-row:hover {
  background: #f8fafc;
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light) .aine-node-inline-prop {
  border-color: #dce3ec;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light) .aine-node-inline-prop span:first-child {
  color: #64748b;
  font-weight: 500;
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light) .aine-node-inline-prop span:last-child {
  color: #243247;
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light) :is(.aine-inspector, .aine-node-library) {
  background: #ffffff;
  box-shadow: -8px 0 24px rgba(30, 45, 68, 0.04);
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light)
  :is(.aine-inspector-panel summary, .aine-node-library-title, .aine-execution-log-title) {
  border-bottom: 1px solid #e1e7ef;
  background: #f3f6f9;
  color: #1f2a3d;
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light)
  :is(.aine-minimap-panel, .aine-viewport-controls) {
  border-color: #cbd5e1;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(30, 45, 68, 0.14);
}

:where(.aine-theme-react-flow-light, .aine-theme-light, .aine-color-light) .aine-breadcrumb-bar {
  background: #f7f9fc;
}