:root,
:root .tf-theme-light {
  --tf-primary-color: #2563eb;
  --tf-primary-color-hover: #3a6fe3;
  --tf-primary-soft-bg: #eff6ff;
  --tf-primary-soft-border: #bfdbfe;
  --tf-primary-ghost-bg: rgb(37 99 235 / 8%);
  --tf-danger-color: #ef4444;
  --tf-danger-hover: #dc2626;
  --tf-danger-soft-bg: #fff1f1;
  --tf-danger-soft-border: #f5c7c4;
  --tf-danger-soft-text: #b42318;
  --tf-danger-icon-color: #d92d20;
  --tf-warning-soft-bg: #fff8e6;
  --tf-warning-soft-border: #f7d79e;
  --tf-warning-soft-text: #92400e;
  --tf-warning-icon-color: #d97706;
  --tf-bg-canvas: #f8fafc;
  --tf-bg-surface: #fff;
  --tf-bg-surface-alt: #f9fafb;
  --tf-bg-muted: #f3f4f6;
  --tf-bg-hover: #f1f5f9;
  --tf-bg-active: #e2e8f0;
  --tf-bg-input: #fff;
  --tf-bg-input-disabled: #f3f4f6;
  --tf-bg-tag: rgb(0 0 0 / 6%);
  --tf-border-color: #e5e7eb;
  --tf-border-color-strong: #d1d5db;
  --tf-border-color-soft: #f3f4f6;
  --tf-node-outline-color: #d1d5db;
  --tf-node-hover-border: rgb(186 202 239 / 49%);
  --tf-text-primary: #111827;
  --tf-text-secondary: #6b7280;
  --tf-text-muted: #9ca3af;
  --tf-text-disabled: #9ca3af;
  --tf-icon-bg: #cedafb;
  --tf-icon-color: #3474ff;
  --tf-loop-handle-text: #fff;
  --tf-shadow-soft: 0 2px 4px rgb(0 0 0 / 8%);
  --tf-shadow-medium: 0 10px 25px rgb(0 0 0 / 15%);
  --tf-focus-shadow: 0 0 0 2px rgb(37 99 235 / 12%);
  --tf-tip-bg: #0f172a;
  --tf-tip-text: #f8fafc;
  --tf-scrollbar-thumb: #d6dce8;
  --tf-slider-track-bg: #d1d5db;
  --tf-slider-thumb-bg: var(--tf-primary-color);
  --xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);
  --xy-handle-background-color: var(--tf-primary-color);
  --xy-handle-border-color: var(--tf-bg-surface);
  --xy-background-color: var(--tf-bg-canvas);
  --xy-background-pattern-dots-color: #d1d5db;
  --xy-background-pattern-lines-color: #e5e7eb;
  --xy-background-pattern-cross-color: #e2e8f0;
  --xy-edge-stroke: #94a3b8;
  --xy-edge-stroke-selected: var(--tf-primary-color);
  --xy-controls-button-background-color: var(--tf-bg-surface);
  --xy-controls-button-background-color-hover: var(--tf-bg-hover);
  --xy-controls-button-color: var(--tf-text-secondary);
  --xy-controls-button-color-hover: var(--tf-text-primary);
  --xy-controls-button-border-color: var(--tf-border-color);
  --xy-minimap-background-color: var(--tf-bg-surface);
  --xy-minimap-mask-background-color: rgb(241 245 249 / 68%);
  --xy-minimap-node-background-color: #cbd5e1;
  --xy-edge-label-background-color: var(--tf-bg-surface);
  --xy-edge-label-color: var(--tf-text-primary);
}

:root .tf-theme-dark {
  --tf-primary-color: #60a5fa;
  --tf-primary-color-hover: #93c5fd;
  --tf-primary-soft-bg: rgb(96 165 250 / 18%);
  --tf-primary-soft-border: rgb(96 165 250 / 35%);
  --tf-primary-ghost-bg: rgb(96 165 250 / 12%);
  --tf-danger-color: #f87171;
  --tf-danger-hover: #ef4444;
  --tf-danger-soft-bg: rgb(248 113 113 / 16%);
  --tf-danger-soft-border: rgb(248 113 113 / 28%);
  --tf-danger-soft-text: #fca5a5;
  --tf-danger-icon-color: #f87171;
  --tf-warning-soft-bg: rgb(217 119 6 / 20%);
  --tf-warning-soft-border: rgb(217 119 6 / 35%);
  --tf-warning-soft-text: #fbbf24;
  --tf-warning-icon-color: #f59e0b;
  --tf-bg-canvas: #0b1220;
  --tf-bg-surface: #111827;
  --tf-bg-surface-alt: #1f2937;
  --tf-bg-muted: #273449;
  --tf-bg-hover: #334155;
  --tf-bg-active: #3b4b63;
  --tf-bg-input: #0f172a;
  --tf-bg-input-disabled: #0b1324;
  --tf-bg-tag: rgb(148 163 184 / 20%);
  --tf-border-color: #334155;
  --tf-border-color-strong: #475569;
  --tf-border-color-soft: #263449;
  --tf-node-outline-color: #475569;
  --tf-node-hover-border: rgb(96 165 250 / 38%);
  --tf-text-primary: #e5e7eb;
  --tf-text-secondary: #cbd5e1;
  --tf-text-muted: #94a3b8;
  --tf-text-disabled: #64748b;
  --tf-icon-bg: rgb(96 165 250 / 20%);
  --tf-icon-color: #93c5fd;
  --tf-loop-handle-text: #f8fafc;
  --tf-shadow-soft: 0 2px 8px rgb(2 6 23 / 35%);
  --tf-shadow-medium: 0 10px 25px rgb(2 6 23 / 48%);
  --tf-focus-shadow: 0 0 0 2px rgb(96 165 250 / 20%);
  --tf-tip-bg: #020617;
  --tf-tip-text: #e2e8f0;
  --tf-scrollbar-thumb: #475569;
  --tf-slider-track-bg: #475569;
  --tf-slider-thumb-bg: #93c5fd;
  --xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);
  --xy-handle-background-color: var(--tf-primary-color);
  --xy-handle-border-color: var(--tf-bg-canvas);
  --xy-background-color: var(--tf-bg-canvas);
  --xy-background-pattern-dots-color: #334155;
  --xy-background-pattern-lines-color: #334155;
  --xy-background-pattern-cross-color: #334155;
  --xy-edge-stroke: #64748b;
  --xy-edge-stroke-selected: #93c5fd;
  --xy-controls-button-background-color: var(--tf-bg-surface);
  --xy-controls-button-background-color-hover: var(--tf-bg-hover);
  --xy-controls-button-color: var(--tf-text-secondary);
  --xy-controls-button-color-hover: var(--tf-text-primary);
  --xy-controls-button-border-color: var(--tf-border-color);
  --xy-minimap-background-color: var(--tf-bg-surface);
  --xy-minimap-mask-background-color: rgb(15 23 42 / 70%);
  --xy-minimap-node-background-color: #475569;
  --xy-edge-label-background-color: var(--tf-bg-surface);
  --xy-edge-label-color: var(--tf-text-primary);
}