@import "./base.css";

.aine-theme-react-flow-system,
.aine-theme-system,
.aine-color-system {
  color-scheme: light dark;
  --aine-node-header-bg: var(--aine-node-bg);
  --aine-node-header-border: 1px solid var(--aine-row-divider);
  --aine-node-radius: 5px;
  --aine-node-accent-strip-height: 3px;
  --aine-node-accent-strip-bg: var(--aine-node-header);
  --aine-node-port-padding-x: 8px;
  --aine-node-title-font-weight: 500;
  --aine-node-inline-label-width: 76px;
  --aine-socket-size: 10px;
  --aine-socket-multiple-width: 18px;
  --aine-socket-radius: 999px;
}

@media (prefers-color-scheme: dark) {
  .aine-theme-react-flow-system,
  .aine-theme-system,
  .aine-color-system {
    --aine-bg: #111113;
    --aine-grid-dot: rgba(255, 255, 255, 0.09);
    --aine-grid-major: rgba(255, 255, 255, 0.16);
    --aine-toolbar-bg: #171719;
    --aine-toolbar-border: #2a2a2f;
    --aine-panel-bg: #1e1e22;
    --aine-panel-bg-2: #25252a;
    --aine-panel-border: #33333a;
    --aine-node-bg: #1f1f23;
    --aine-node-header: #343840;
    --aine-node-header-bg: var(--aine-node-bg);
    --aine-node-header-border: 1px solid var(--aine-row-divider);
    --aine-node-radius: 5px;
    --aine-node-accent-strip-height: 3px;
    --aine-node-accent-strip-bg: var(--aine-node-header);
    --aine-node-port-padding-x: 8px;
    --aine-node-title-font-weight: 500;
    --aine-node-inline-label-width: 76px;
    --aine-node-border: #454754;
    --aine-node-hover: #6a6a75;
    --aine-node-selected: #7aa2ff;
    --aine-node-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
    --aine-node-selected-shadow: 0 0 0 1px rgba(122, 162, 255, 0.58);
    --aine-text: #f2f2f3;
    --aine-text-muted: #c4c4ca;
    --aine-text-dim: #9898a3;
    --aine-accent: #7aa2ff;
    --aine-blue-selection: #7aa2ff;
    --aine-error: #ff6b6b;
    --aine-warning: #e6a447;
    --aine-success: #60c785;
    --aine-on-danger: #ffffff;
    --aine-header-text: #f2f2f3;
    --aine-header-muted: rgba(255, 255, 255, 0.76);
    --aine-field-bg: #151518;
    --aine-field-border: #414149;
    --aine-floating-bg: #202024;
    --aine-floating-border: #3a3a42;
    --aine-menu-active: rgba(122, 162, 255, 0.2);
    --aine-focus-ring: rgba(122, 162, 255, 0.78);
    --aine-backdrop: rgba(0, 0, 0, 0.48);
    --aine-overlay-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
    --aine-floating-shadow: 0 18px 45px rgba(0, 0, 0, 0.52);
    --aine-dialog-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    --aine-edge-stroke: #8f96a3;
    --aine-edge-stroke-width: 1.8px;
    --aine-edge-selected: #8fb1ff;
    --aine-edge-hit: rgba(255, 255, 255, 0.001);
    --aine-edge-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45));
    --aine-edge-action-bg: #25252a;
    --aine-edge-action-border: #555865;
    --aine-edge-action-color: #f2f2f3;
    --aine-edge-action-shadow: 0 4px 14px rgba(0, 0, 0, 0.48);
    --aine-node-action-bg: rgba(30, 30, 34, 0.96);
    --aine-node-action-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    --aine-shape-stroke: rgba(242, 242, 243, 0.42);
    --aine-shape-label: #f6f7fb;
    --aine-shape-selection: #7aa2ff;
    --aine-shape-handle: #7aa2ff;
    --aine-shape-toolbar-bg: rgba(34, 34, 34, 0.96);
    --aine-shape-palette-bg: rgba(30, 30, 30, 0.97);
    --aine-resize-bg: #7aa2ff;
    --aine-resize-line: rgba(255, 255, 255, 0.75);
    --aine-row-divider: rgba(255, 255, 255, 0.1);
    --aine-status-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    --aine-socket-border: rgba(0, 0, 0, 0.72);
    --aine-socket-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --aine-socket-size: 10px;
    --aine-socket-multiple-width: 18px;
    --aine-socket-radius: 999px;
    --aine-minimap-bg: rgba(255, 255, 255, 0.06);
    --aine-minimap-node: rgba(122, 162, 255, 0.62);
    --aine-minimap-node-stroke: rgba(255, 255, 255, 0.14);
    --aine-minimap-node-selected: #7aa2ff;
    --aine-minimap-viewport-fill: rgba(122, 162, 255, 0.14);
    --aine-minimap-viewport-stroke: #7aa2ff;
  }
}