@use 'sass:math';
@use './tokens.legacy.scss' as tokens-legacy;

@mixin theme {
	@include tokens-legacy.theme-legacy;
	--background--brand: var(--color--orange-500);
	--background--brand--hover: var(--color--orange-600);
	--background--brand--active: var(--color--orange-700);
	--background--brand--focus: var(--color--orange-400);
	--background--brand--disabled: var(--color--neutral-200);

	--background--surface: var(--color--neutral-white);
	--background--subtle: var(--color--neutral-50);
	--background--hover: var(--color--black-alpha-50);
	--background--active: var(--color--black-alpha-100);
	--background--focus: var(--color--black-alpha-100);
	--background--disabled: var(--color--neutral-200);

	/* stylelint-disable @n8n/css-var-naming */
	--border-color: var(--border-color-base, var(--color--black-alpha-100));
	/* stylelint-enable @n8n/css-var-naming */

	--border-color--subtle: var(--color--black-alpha-50);
	--border-color--strong: var(--color--black-alpha-200);
	--border-color--stronger: var(--color--black-alpha-300);
	--border: var(--border-width, 1px) var(--border-style, solid) var(--border-color);

	--icon-color: var(--color--neutral-500);
	--icon-color--subtle: var(--color--neutral-200);
	--icon-color--strong: var(--color--neutral-800);

	--text-color: var(--color--neutral-900);
	--text-color--subtle: var(--color--neutral-700);
	--text-color--subtler: var(--color--neutral-500);
	--text-color--disabled: var(--color--neutral-400);

	--background--success: var(--color--green-50);
	--border-color--success: var(--color--green-200);
	--text-color--success: var(--color--green-800);
	--icon-color--success: var(--color--green-800);

	--background--warning: var(--color--yellow-100);
	--border-color--warning: var(--color--yellow-200);
	--text-color--warning: var(--color--yellow-800);
	--icon-color--warning: var(--color--yellow-800);

	--background--danger: var(--color--red-50);
	--border-color--danger: var(--color--red-200);
	--text-color--danger: var(--color--red-800);
	--icon-color--danger: var(--color--red-800);

	--background--info: var(--color--blue-50);
	--border-color--info: var(--color--blue-200);
	--text-color--info: var(--color--blue-800);
	--icon-color--info: var(--color--blue-800);

	--background--inverse: var(--color--neutral-900);
	--border-color--inverse: var(--color--neutral-700);
	--text-color--inverse: var(--color--neutral-100);
	--icon-color--inverse: var(--color--neutral-100);

	--focus--border-width: 2px;
	--focus--outline-color: var(--color--purple-alpha-200);
	--focus--border-color: var(--color--purple-500);

	// LangChain
	--lm-chat--messages--color--background: var(--color--background);
	--lm-chat--bot--color--background: var(--color--neutral-white);
	--lm-chat--user--color--background: var(--color--green-600);
	--lm-chat--user--color: var(--color--text--tint-3);

	// Canvas
	--canvas--color--background: var(--color--neutral-125);
	--canvas--dot--color: var(--color--neutral-500);
	--canvas--read-only-line--color: var(--color--neutral-200);
	--canvas--color--selected: var(--color--neutral-150);
	--canvas--color--selected-transparent: hsla(220, 47%, 30%, 0.1);
	--canvas--label--color: var(--color--neutral-600);
	--canvas--label--color--background: oklch(from var(--canvas--color--background) l c h / 0.85);

	// Nodes
	--node--color--background: var(--color--background--light-3);
	--node--color--background--executing: var(--color--primary--tint-3);
	--node--color--background--executing-1: var(--color--primary--tint-3);
	--node--border-color--pinned: var(--color--secondary);
	--node--border-color--running: var(--color--primary);
	--node--type-main--color: var(--color--neutral-500);

	// Sticky
	--sticky--color--background: var(--color--yellow-100);
	--sticky--border-color: var(--color--yellow-200);
	--sticky--color--text: var(--color--neutral-850);
	--sticky--code--color--text: var(--color--secondary);
	--sticky--code--color--background: var(--color--background);

	--sticky--color--background--variant-1: var(--sticky--color--background);
	--sticky--border-color--variant-1: var(--sticky--border-color);
	--sticky--color--background--variant-2: var(--color--gold-100);
	--sticky--border-color--variant-2: var(--color--gold-300);
	--sticky--color--background--variant-3: var(--color--red-100);
	--sticky--border-color--variant-3: var(--color--red-250);
	--sticky--color--background--variant-4: var(--color--green-100);
	--sticky--border-color--variant-4: var(--color--green-300);
	--sticky--color--background--variant-5: var(--color--blue-100);
	--sticky--border-color--variant-5: var(--color--blue-200);
	--sticky--color--background--variant-6: var(--color--purple-200);
	--sticky--border-color--variant-6: var(--color--purple-300);
	--sticky--color--background--variant-7: var(--color--neutral-100);
	--sticky--border-color--variant-7: var(--color--neutral-200);

	// AI Assistant
	--assistant--button--color--background--gradient: linear-gradient(
		var(--color--background--light-3),
		var(--color--background--light-3)
	);
	--assistant--button--color--background--gradient--hover: linear-gradient(
		var(--color--background--light-3),
		var(--color--background--light-3)
	);
	--assistant--button--color--background--gradient--active: linear-gradient(
		var(--color--background--light-3),
		var(--color--background--light-3)
	);

	--assistant--color--highlight-1: #5b60e8;
	--assistant--color--highlight-2: #aa7bec;
	--assistant--color--highlight-3: #ec7b8e;
	--assistant--color--highlight-gradient: linear-gradient(
		105deg,
		var(--assistant--color--highlight-1) 0%,
		var(--assistant--color--highlight-2) 50%,
		var(--assistant--color--highlight-3) 100%
	);
	--assistant--color--highlight-gradient--reverse: linear-gradient(
		105deg,
		var(--assistant--color--highlight-3) 0%,
		var(--assistant--color--highlight-2) 50%,
		var(--assistant--color--highlight-1) 100%
	);

	// AI Chat text and icon colors
	--assistant--color--text--subtle: var(--color--neutral-500);
	--assistant--icon-color--subtle: var(--color--neutral-500);
	--assistant--color--text: var(--color--neutral-800);
	--assistant--color--text--user-bubble: var(--color--neutral-750);
	--assistant--color--background--user-bubble: var(--color--neutral-150);
	--assistant--text-message--collapsed--max-height: 200px;

	--assistant--button--color--background--hover: linear-gradient(
		108.82deg,
		rgba(236, 123, 142, 0.12) 0%,
		rgba(170, 123, 236, 0.12) 50.5%,
		rgba(91, 96, 232, 0.12) 100%
	);
	--assistant--button--color--background--active: linear-gradient(
		108.82deg,
		rgba(236, 123, 142, 0.25) 0%,
		rgba(170, 123, 236, 0.25) 50.5%,
		rgba(91, 96, 232, 0.25) 100%
	);

	// NodeIcon
	--node--icon--color--neutral: var(--color--neutral-400);
	--node--icon--color--gray: #7d7d87;
	--node--icon--color--black: var(--color--neutral-800);
	--node--icon--color--blue: #3a42e9;
	--node--icon--color--light-blue: #5fabf7;
	--node--icon--color--dark-blue: #353f6e;
	--node--icon--color--sky-blue: #5699ff;
	--node--icon--color--orange: #ff965a;
	--node--icon--color--orange-red: var(--color--orange-500);
	--node--icon--color--amber: #f92;
	--node--icon--color--rust: #e44d26;
	--node--icon--color--pink-red: #ea4b71;
	--node--icon--color--magenta: #e91e63;
	--node--icon--color--red: var(--color--red-600);
	--node--icon--color--light-green: #31c4ab;
	--node--icon--color--green: var(--color--mint-700);
	--node--icon--color--dark-green: #157562;
	--node--icon--color--emerald: #2fb67c;
	--node--icon--color--forest-green: #4a4;
	--node--icon--color--lime: #62f730;
	--node--icon--color--azure: #54b8c9;
	--node--icon--color--teal: #00b7bc;
	--node--icon--color--purple: #539;
	--node--icon--color--violet: #9b6dd5;
	--node--icon--color--lavender: #8287eb;
	--node--icon--color--crimson: #724;

	// Expressions, autocomplete, infobox
	--expression-editor--resolvable--color--foreground--valid: var(--color--green-600);
	--expression-editor--resolvable--color--background--valid: var(--color--green-100);
	--expression-editor--resolvable--color--foreground--invalid: var(--color--red-600);
	--expression-editor--resolvable--color--background--invalid: var(--color--red-50);
	--expression-editor--resolvable--color--foreground--pending: var(--color--text);
	--expression-editor--resolvable--color--background--pending: var(--color--neutral-125);
	--expression-editor--color--background: var(--color--neutral-white);
	--expression-editor--modal--color--background: var(--color--background);
	--expression-editor--syntax-example--color: var(--color--neutral-125);
	--autocomplete--item--color--selected: var(--color--secondary);
	--autocomplete--section-header--border-color: var(--color--foreground--tint-1);
	--autocomplete--infobox--color--background: var(--color--background--light-1);
	--autocomplete--infobox--examples--border-color: var(--color--foreground--tint-1);

	// Code
	--code-tags--string--color: #032f62;
	--code-tags--regex--color: #032f62;
	--code-tags--primitive--color: #005cc5;
	--code-tags--keyword--color: #d73a49;
	--code-tags--variable--color: #005cc5;
	--code-tags--parameter--color: var(--color--neutral-850);
	--code-tags--function--color: #6f42c1;
	--code-tags--constant--color: #005cc5;
	--code-tags--property--color: #005cc5;
	--code-tags--type--color: #005cc5;
	--code-tags--class--color: #6f42c1;
	--code-tags--heading--color: #005cc5;
	--code-tags--invalid--color: #cb2431;
	--code-tags--comment--color: #6a737d;
	--json--color: var(--color--purple-700);
	--json--null--color: var(--color--red-600);
	--json--boolean--color: var(--color--green-600);
	--json--number--color: var(--color--green-600);
	--json--string--color: var(--color--purple-700);
	--json--key--color: var(--color--neutral-700);
	--json--brackets--color: var(--color--neutral-700);
	--json--brackets--color--hover: var(--color--blue-400);
	--json--line--color: var(--color--neutral-250);
	--json--highlight--color: var(--color--background);
	--code--color--background: var(--color--neutral-white);
	--code--color--background--readonly: var(--color--neutral-125);
	--code--line-highlight--color: var(--color--neutral-300-alpha-100);
	--code--color--foreground: var(--color--neutral-700);
	--code--caret--color: var(--color--neutral-950);
	--code--selection--color: #0366d625;
	--code--selection--color--highlight: #34d05840;
	--code--gutter--color--background: var(--color--neutral-white);
	--code--gutter--color--foreground: var(--color--neutral-300);
	--code--gutter--color--foreground--active: var(--color--neutral-700);
	--code--indentation-marker--color: var(--color--neutral-150);
	--code--indentation-marker--color--active: var(--color--neutral-250);
	--line-break--color: var(--color--neutral-300);
	--code--line-break--color: var(--color--purple-400);

	// Tag
	--tag--height: 20px;
	--tag--padding: 0 var(--spacing--4xs);
	--tag--color--background: var(--color--neutral-125);
	--tag--color--background--hover: var(--color--neutral-150);
	--tag--border-color: var(--color--neutral-150);
	--tag--border-color--hover: var(--color--neutral-200);
	--tag--radius: var(--radius);
	--tag--color--text: var(--color--text);
	--tag--font-size: var(--font-size--2xs);
	--tag--font-weight: var(--font-weight--regular);
	--tag--line-height: 0;

	// Variables
	--variables-usage--color--text: var(--color--success);
	--variables-usage--syntax--color--background: var(--color--success--tint-4);

	// Button primary
	--button--color--text--primary: var(--color--neutral-white);
	--button--border-color--primary: var(--color--orange-500);
	--button--color--background--primary: var(--color--orange-500);
	--button--border-color--primary--hover-active: var(--color--primary);
	--button--color--background--primary--hover-active-focus: var(--color--primary);
	--button--outline-color--primary--focus: var(--color--orange-alpha-300);
	--button--color--text--primary--disabled: var(--color--white-alpha-800);
	--button--border-color--primary--disabled: var(--color--orange-400);
	--button--color--background--primary--disabled: var(--color--orange-400);

	// Button secondary
	--button--color--text--secondary: var(--color--neutral-700);
	--button--border-color--secondary: var(--color--neutral-300);
	--button--color--background--secondary: var(--color--neutral-white);
	--button--color--text--secondary--hover-active-focus: var(--color--orange-500);
	--button--border-color--secondary--hover-active-focus: var(--color--orange-600);
	--button--color--background--secondary--hover: var(--color--orange-50);
	--button--color--background--secondary--active-focus: var(--color--orange-100);
	--button--outline-color--secondary--focus: var(--color--neutral-200);
	--button--color--text--secondary--disabled: var(--color--neutral-250);
	--button--border-color--secondary--disabled: var(--color--neutral-250);

	// Button highlight
	--button--color--text--highlight: var(--color--neutral-700);
	--button--border-color--highlight: transparent;
	--button--color--background--highlight: transparent;
	--button--color--text--highlight--hover-active-focus: var(--color--orange-400);
	--button--border-color--highlight--hover-active-focus: var(--color--neutral-125);
	--button--color--background--highlight--hover: var(--color--neutral-125);
	--button--color--background--highlight--active-focus: var(--color--neutral-125);
	--button--outline-color--highlight--focus: var(--color--neutral-125);
	--button--color--text--highlight--disabled: var(--color--neutral-200);
	--button--border-color--highlight--disabled: transparent;
	--button--color--background--highlight--disabled: transparent;

	// Button highlight-fill
	--button--color--text--highlight-fill: var(--color--text--shade-1);
	--button--border-color--highlight-fill: transparent;
	--button--color--background--highlight-fill: var(--color--background);
	--button--color--text--highlight-fill--hover-active-focus: var(--color--primary);
	--button--border-color--highlight-fill--hover-active-focus: transparent;
	--button--color--background--highlight-fill--hover: var(--color--background);
	--button--color--background--highlight-fill--active-focus: var(--color--background);
	--button--outline-color--highlight-fill--focus: var(--color--neutral-125);
	--button--color--text--highlight-fill--disabled: var(--color--neutral-200);
	--button--border-color--highlight-fill--disabled: transparent;
	--button--color--background--highlight-fill--disabled: var(--color--background);

	// Button success, warning, danger
	--button--color--text--success: var(--color--neutral-white);
	--button--color--text--success--disabled: var(--color--white-alpha-800);
	--button--color--text--warning: var(--color--text--tint-3);
	--button--color--text--warning--disabled: var(--color--white-alpha-800);
	--button--color--text--danger: var(--color--text--tint-3);
	--button--border-color--danger: var(--color--danger);
	--button--outline-color--danger--focus: var(--color--danger--tint-3);
	--button--color--text--danger--disabled: var(--color--white-alpha-800);
	--button--border-color--danger--disabled: var(--color--danger--tint-3);
	--button--color--background--danger--disabled: var(--color--danger--tint-3);

	// Text button
	--text-button--color--text--secondary: var(--color--neutral-700);

	// Node Creator Button
	--node-creator--button--color--text: var(--color--neutral-600);
	--node-creator--button--color--text--hover: var(--color--orange-500);
	--node-creator--button--border-color--hover: var(--color--orange-500);
	--node-creator--button--color--background: var(--color--neutral-white);

	// Table
	--table--header--color--background: var(--color--background);
	--table--row--color--background: var(--color--background--light-3);
	--table--row--color--background--even: var(--color--background--light-2);
	--table--row--color--background--hover: var(--color--primary--tint-3);
	--table--row--color--background--highlight: var(--color--warning--tint-1);

	// Notification
	--notification--color--background: var(--color--background--light-3);

	// Execution
	--execution-card--border-color--new: var(--color--neutral-250);
	--execution-card--border-color--success: var(--color--green-300);
	--execution-card--border-color--error: var(--color--red-300);
	--execution-card--border-color--waiting: var(--color--purple-300);
	--execution-card--border-color--running: var(--color--gold-200);
	--execution-card--border-color--unknown: var(--color--neutral-200);
	--execution-card--color--background: var(--color--foreground--tint-2);
	--execution-card--color--background--hover: var(--color--foreground--tint-1);
	--execution-card--color--text--waiting: var(--color--secondary);
	--execution-selector--color--background: var(--color--background--shade-2);
	--execution-selector--color--text: var(--color--text--tint-3);
	--execution-select-all--color--text: var(--color--danger);

	// NDV
	--run-data--color--background: var(--color--neutral-150);
	--ndvv2--run-data--color--background: var(--color--neutral-125);
	--ndv--droppable-parameter--color: var(--color--secondary);
	--ndv--droppable-parameter--color--background: var(--color--purple-alpha-100);
	--ndv--droppable-parameter--color--background--active: var(--color--green-alpha-100);
	--ndv--back--color--text: var(--color--neutral-white);
	--ndv--background--color: var(--color--background--light-3);
	--ndv--header--color: var(--color--background);

	// Notice
	--notice--border-color--warning: var(--color--warning--tint-1);
	--notice--color--background--warning: var(--color--warning--tint-2);
	--notice--color--text: var(--color--text);

	// Callout
	--callout--border-color--info: var(--color--foreground);
	--callout--color--background--info: var(--color--foreground--tint-2);
	--callout--color--text--info: var(--color--text);
	--callout--icon-color--info: var(--color--text--tint-1);
	--callout--border-color--success: var(--color--success--tint-2);
	--callout--color--background--success: var(--color--success--tint-4);
	--callout--color--text--success: var(--color--success);
	--callout--icon-color--success: var(--color--success);
	--callout--border-color--warning: var(--color--warning--tint-1);
	--callout--color--background--warning: var(--color--warning--tint-2);
	--callout--color--text--warning: var(--color--warning);
	--callout--icon-color--warning: var(--color--warning);
	--callout--border-color--danger: var(--color--danger--tint-3);
	--callout--color--background--danger: var(--color--danger--tint-4);
	--callout--color--text--danger: var(--color--danger);
	--callout--icon-color--danger: var(--color--danger);
	--callout--border-color--secondary: var(--color--secondary--tint-1);
	--callout--color--background--secondary: var(--color--secondary--tint-2);
	--callout--color--text--secondary: var(--color--secondary);
	--callout--icon-color--secondary: var(--color--secondary);

	// Dialogs and overlays
	--dialog--color--background: var(--color--neutral-white);
	--dialog--overlay--color--background: var(--color--white-alpha-800);
	--dialog--overlay--color--background--dark: var(--color--black-alpha-600);
	--block-ui--overlay--color: var(--color--neutral-950);

	// Avatar
	--avatar--color--text: var(--color--text--tint-3);

	// NPS Survey
	--nps-survey--color--background: var(--color--neutral-850);
	--nps-survey--color--text: var(--color--neutral-white);

	// Action Dropdown
	--action-dropdown--item--color--background--active: var(--color--background);

	// Switch (Activation, boolean)
	--switch--color--background: var(--color--neutral-400);
	--switch--color--background--active: var(--color--green-500);
	--switch--border-color: transparent;
	--switch--toggle--color: var(--color--neutral-white);

	// Feature Request
	--feature-request--color--text: var(--color--neutral-white);

	// Input Triple
	--input-triple--color--background: var(--color--background--light-2);

	// Node error
	--node--error-output--color--text: var(--color--danger);

	// MFA Recovery codes
	--mfa--recovery-code--color--background: var(--color--background);
	--mfa--recovery-code--color: var(--color--neutral-500);
	--mfa--lose-access--color--text: var(--color--danger);

	// Text highlight
	--text-highlight--color--background: var(--color--yellow-200);

	// MFA Modal
	--qr-code--border-color: var(--color--neutral-50);

	// AI
	--node-type--color--background--l: 95%;
	--node-type--supplemental--label--color--h: 235;
	--node-type--supplemental--label--color--s: 28%;
	--node-type--supplemental--label--color--l: 40%;
	--node-type--supplemental--color--h: 235;
	--node-type--supplemental--color--s: 28%;
	--node-type--supplemental--color--l: 60%;
	--node-type--supplemental--label--color: hsl(
		var(--node-type--supplemental--label--color--h),
		var(--node-type--supplemental--label--color--s),
		var(--node-type--supplemental--label--color--l)
	);
	--node-type--supplemental--icon--color: var(--color--foreground--shade-1);
	--node-type--supplemental--color: hsl(
		var(--node-type--supplemental--color--h),
		var(--node-type--supplemental--color--s),
		var(--node-type--supplemental--color--l)
	);
	--node-type--supplemental--color--background: hsl(
		var(--node-type--supplemental--color--h),
		var(--node-type--supplemental--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--supplemental--connector--color: var(--color--foreground--shade-1);
	--node-type--ai-chain--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-chain--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-chain--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-chain--color: hsl(
		var(--node-type--ai-chain--color--h),
		var(--node-type--ai-chain--color--s),
		var(--node-type--ai-chain--color--l)
	);
	--node-type--chain--color--background: hsl(
		var(--node-type--ai-chain--color--h),
		var(--node-type--ai-chain--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-document--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-document--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-document--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-document--color: hsl(
		var(--node-type--ai-document--color--h),
		var(--node-type--ai-document--color--s),
		var(--node-type--ai-document--color--l)
	);
	--node-type--ai-document--color--background: hsl(
		var(--node-type--ai-document--color--h),
		var(--node-type--ai-document--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-embedding--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-embedding--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-embedding--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-embedding--color: hsl(
		var(--node-type--ai-embedding--color--h),
		var(--node-type--ai-embedding--color--s),
		var(--node-type--ai-embedding--color--l)
	);
	--node-type--ai-embedding--color--background: hsl(
		var(--node-type--ai-embedding--color--h),
		var(--node-type--ai-embedding--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-language-model--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-language-model--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-language-model--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-language-model--color: hsl(
		var(--node-type--ai-language-model--color--h),
		var(--node-type--ai-language-model--color--s),
		var(--node-type--ai-language-model--color--l)
	);
	--node-type--ai-language-model--color--background: hsl(
		var(--node-type--ai-language-model--color--h),
		var(--node-type--ai-language-model--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-memory--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-memory--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-memory--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-memory--color: hsl(
		var(--node-type--ai-memory--color--h),
		var(--node-type--ai-memory--color--s),
		var(--node-type--ai-memory--color--l)
	);
	--node-type--ai-memory--color--background: hsl(
		var(--node-type--ai-memory--color--h),
		var(--node-type--ai-memory--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-output-parser--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-output-parser--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-output-parser--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-output-parser--color: hsl(
		var(--node-type--ai-output-parser--color--h),
		var(--node-type--ai-output-parser--color--s),
		var(--node-type--ai-output-parser--color--l)
	);
	--node-type--ai-output-parser--color--background: hsl(
		var(--node-type--ai-output-parser--color--h),
		var(--node-type--ai-output-parser--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-tool--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-tool--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-tool--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-tool--color: hsl(
		var(--node-type--ai-tool--color--h),
		var(--node-type--ai-tool--color--s),
		var(--node-type--ai-tool--color--l)
	);
	--node-type--ai-tool--color--background: hsl(
		var(--node-type--ai-tool--color--h),
		var(--node-type--ai-tool--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-retriever--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-retriever--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-retriever--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-retriever--color: hsl(
		var(--node-type--ai-retriever--color--h),
		var(--node-type--ai-retriever--color--s),
		var(--node-type--ai-retriever--color--l)
	);
	--node-type--ai-retriever--color--background: hsl(
		var(--node-type--ai-retriever--color--h),
		var(--node-type--ai-retriever--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-text-splitter--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-text-splitter--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-text-splitter--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-text-splitter--color: hsl(
		var(--node-type--ai-text-splitter--color--h),
		var(--node-type--ai-text-splitter--color--s),
		var(--node-type--ai-text-splitter--color--l)
	);
	--node-type--ai-text-splitter--color--background: hsl(
		var(--node-type--ai-text-splitter--color--h),
		var(--node-type--ai-text-splitter--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-vector-retriever--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-vector-retriever--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-vector-retriever--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-vector-retriever--color: hsl(
		var(--node-type--ai-vector-retriever--color--h),
		var(--node-type--ai-vector-retriever--color--s),
		var(--node-type--ai-vector-retriever--color--l)
	);
	--node-type--ai-vector-retriever--color--background: hsl(
		var(--node-type--ai-vector-retriever--color--h),
		var(--node-type--ai-vector-retriever--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-vector-store--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-vector-store--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-vector-store--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-vector-store--color: hsl(
		var(--node-type--ai-vector-store--color--h),
		var(--node-type--ai-vector-store--color--s),
		var(--node-type--ai-vector-store--color--l)
	);
	--node-type--ai-vector-store--color--background: hsl(
		var(--node-type--ai-vector-store--color--h),
		var(--node-type--ai-vector-store--color--s),
		var(--node-type--color--background--l)
	);

	// Diff colors
	--diff--color--new: #0eab54;
	--diff--color--new--light: #b4efc4;
	--diff--color--new--faint: #ddfbe7;
	--diff--color--modified: #bf941f;
	--diff--color--modified--light: #f3dca1;
	--diff--color--modified--faint: var(--color--yellow-100);
	--diff--color--deleted: #f51f32;
	--diff--color--deleted--light: var(--color--red-200);
	--diff--color--deleted--faint: var(--color--red-50);

	// Various
	--avatar--color--accent-1: var(--color--neutral-200);
	--avatar--color--accent-2: var(--color--blue-500);
	--color--info: var(--color--neutral-400);
	--color--info--tint-1: var(--color--neutral-200);
	--color--info--tint-2: var(--color--neutral-125);
	--color--neutral: var(--color--neutral-250);
	--color--neutral--light: var(--color--neutral-200);
	--node--configurable-name--color: var(--color--text--shade-1);
	--link--color--secondary: var(--color--secondary);
	--link--color--secondary--hover: var(--color--secondary--shade-1);

	// Menu
	--menu--color--background: var(--color--neutral-white);
	--menu--color--background--hover: var(--color--neutral-200);
	--menu--color--background--active: var(--color--neutral-200);

	// Params
	--icon--color: var(--color--text--tint-1);
	--icon--color--hover: var(--color--orange-600);

	/* Ag Grid */
	--grid--row--color--background--selected: var(--color--purple-200);
	--grid--cell--border-color--editing: 2px solid var(--color--secondary);

	--command-bar-item--color--background--hover: var(--color--background);
	--command-bar-item--height: 40px;
	--command-bar--shadow:
		0 15px 45px 0 var(--color--black-alpha-200), 0 5px 10px 0 var(--color--black-alpha-200);

	// Animation
	--animation--duration: var(--duration--base);
	--animation--duration--snappy: var(--duration--snappy);
	--animation--easing: var(--easing--ease-out);
}

@mixin theme-dark {
	@include tokens-legacy.theme-dark-legacy;

	--background--brand: var(--color--orange-500);
	--background--brand--hover: var(--color--orange-600);
	--background--brand--active: var(--color--orange-700);
	--background--brand--focus: var(--color--orange-400);
	--background--brand--disabled: var(--color--neutral-800);

	--background--surface: var(--color--neutral-900);
	--background--subtle: var(--color--neutral-800);
	--background--hover: var(--color--white-alpha-100);
	--background--active: var(--color--white-alpha-150);
	--background--focus: var(--color--white-alpha-150);
	--background--disabled: var(--color--neutral-800);

	/* stylelint-disable @n8n/css-var-naming */
	--border-color: var(--border-color-base, var(--color--white-alpha-100));
	/* stylelint-enable @n8n/css-var-naming */
	--border-color--subtle: var(--color--white-alpha-50);
	--border-color--strong: var(--color--white-alpha-200);
	--border-color--stronger: var(--color--white-alpha-400);

	--icon-color--subtle: var(--color--neutral-600);
	--icon-color: var(--color--neutral-300);
	--icon-color--strong: var(--color--neutral-white);

	--text-color: var(--color--neutral-white);
	--text-color--subtle: var(--color--neutral-200);
	--text-color--subtler: var(--color--neutral-400);
	--text-color--disabled: var(--color--neutral-600);

	--background--success: var(--color--green-950);
	--border-color--success: var(--color--green-800);
	--text-color--success: var(--color--green-50);
	--icon-color--success: var(--color--green-50);

	--background--warning: var(--color--yellow-900);
	--border-color--warning: var(--color--yellow-800);
	--text-color--warning: var(--color--yellow-100);
	--icon-color--warning: var(--color--yellow-100);

	--background--danger: var(--color--red-950);
	--border-color--danger: var(--color--red-800);
	--text-color--danger: var(--color--red-50);
	--icon-color--danger: var(--color--red-50);

	--background--info: var(--color--blue-900);
	--border-color--info: var(--color--blue-800);
	--text-color--info: var(--color--blue-50);
	--icon-color--info: var(--color--blue-50);

	--background--inverse: var(--color--neutral-white);
	--border-color--inverse: var(--color--neutral-200);
	--text-color--inverse: var(--color--neutral-800);
	--icon-color--inverse: var(--color--neutral-800);

	// AI Assistant
	--assistant--color--highlight-1: #8c90f2;
	--assistant--color--highlight-2: #a977f0;
	--assistant--color--highlight-3: #f0778b;
	--assistant--button--color--background--gradient: linear-gradient(
		var(--color--neutral-850),
		var(--color--neutral-850)
	);
	--assistant--button--color--background--gradient--hover: linear-gradient(#383839, #383839);
	--assistant--button--color--background--gradient--active: linear-gradient(
		var(--color--neutral-750),
		var(--color--neutral-750)
	);
	--assistant--button--color--background--hover: var(
		--assistant--button--color--background--gradient--hover
	);
	--assistant--button--color--background--active: var(
		--assistant--button--color--background--gradient--active
	);

	--assistant--color--highlight-gradient: linear-gradient(
		105deg,
		var(--assistant--color--highlight-1) 0%,
		var(--assistant--color--highlight-2) 50%,
		var(--assistant--color--highlight-3) 100%
	);
	--assistant--color--highlight-gradient--reverse: linear-gradient(
		105deg,
		var(--assistant--color--highlight-3) 0%,
		var(--assistant--color--highlight-2) 50%,
		var(--assistant--color--highlight-1) 100%
	);

	// AI Chat text and icon colors
	--assistant--color--text--subtle: var(--color--neutral-250);
	--assistant--icon-color--subtle: var(--color--neutral-250);
	--assistant--color--text: var(--color--neutral-white);
	--assistant--color--text--user-bubble: var(--color--blue-50);
	--assistant--color--background--user-bubble: var(--color--neutral-800);

	// LangChain
	--lm-chat--messages--color--background: var(--color--neutral-950);
	--lm-chat--bot--color--background: var(--color--neutral-850);
	--lm-chat--bot--border-color: var(--color--neutral-500);
	--lm-chat--user--color--background: var(--color--green-700);
	--lm-chat--user--border-color: var(--color--green-600);

	// Canvas
	--canvas--color--background: var(--color--neutral-950);
	--canvas--dot--color: var(--color--neutral-700);
	--canvas--read-only-line--color: var(--color--neutral-900);
	--canvas--color--selected: var(--color--white-alpha-400);
	--canvas--color--selected-transparent: var(--canvas--color--selected);
	--canvas--label--color: var(--color--neutral-500);
	--canvas--label--color--background: oklch(from var(--canvas--color--background) l c h / 0.85);

	// Nodes
	--node--color--background: var(--color--neutral-850);
	--node--color--background--executing: var(--color--neutral-700);
	--node--color--background--executing-1: var(--color--neutral-700);
	--node--border-color--pinned: var(--color--purple-500);
	--node--type-main--color: var(--color--neutral-400);

	// Sticky
	--sticky--color--background: var(--color--yellow-900);
	--sticky--border-color: var(--color--yellow-800);
	--sticky--color--text: var(--color--neutral-125);
	--sticky--code--color--text: var(--color--purple-300);
	--sticky--code--color--background: var(--color--neutral-150-alpha-100);

	--sticky--color--background--variant-1: var(--color--yellow-900);
	--sticky--border-color--variant-1: var(--color--yellow-800);
	--sticky--color--background--variant-2: var(--color--gold-900);
	--sticky--border-color--variant-2: var(--color--gold-800);
	--sticky--color--background--variant-3: var(--color--red-950);
	--sticky--border-color--variant-3: var(--color--red-900);
	--sticky--color--background--variant-4: var(--color--green-950);
	--sticky--border-color--variant-4: var(--color--green-900);
	--sticky--color--background--variant-5: var(--color--blue-900);
	--sticky--border-color--variant-5: var(--color--blue-800);
	--sticky--color--background--variant-6: var(--color--purple-950);
	--sticky--border-color--variant-6: var(--color--purple-800);
	--sticky--color--background--variant-7: var(--color--neutral-900);
	--sticky--border-color--variant-7: var(--color--neutral-800);

	// NodeIcon
	--node--icon--color--neutral: var(--color--neutral-200);
	--node--icon--color--gray: #a5a5ad;
	--node--icon--color--black: var(--color--neutral-200);
	--node--icon--color--blue: #898fff;
	--node--icon--color--light-blue: #58abff;
	--node--icon--color--dark-blue: #7ba7ff;
	--node--icon--color--sky-blue: #7fb3ff;
	--node--icon--color--orange: #ffb080;
	--node--icon--color--orange-red: var(--color--orange-500);
	--node--icon--color--amber: #ffb966;
	--node--icon--color--rust: #f75;
	--node--icon--color--pink-red: #f85d82;
	--node--icon--color--magenta: #ff4d80;
	--node--icon--color--red: var(--color--red-400);
	--node--icon--color--light-green: #20b69e;
	--node--icon--color--green: var(--color--green-500);
	--node--icon--color--dark-green: #86decc;
	--node--icon--color--emerald: #50d499;
	--node--icon--color--forest-green: #6c6;
	--node--icon--color--lime: #7fff55;
	--node--icon--color--azure: #7dd6e3;
	--node--icon--color--teal: #33d6db;
	--node--icon--color--purple: #9b6dd5;
	--node--icon--color--violet: #b48de6;
	--node--icon--color--lavender: #a8acff;
	--node--icon--color--crimson: #f188a2;

	// Expressions, autocomplete, infobox
	--expression-editor--resolvable--color--foreground--valid: var(--color--green-300);
	--expression-editor--resolvable--color--background--valid: var(--color--green-alpha-200);
	--expression-editor--resolvable--color--foreground--invalid: var(--color--red-300);
	--expression-editor--resolvable--color--background--invalid: var(--color--red-alpha-020);
	--expression-editor--resolvable--color--foreground--pending: var(--color--text);
	--expression-editor--resolvable--color--background--pending: var(--color--neutral-150-alpha-100);
	--expression-editor--color--background: var(--color--neutral-900);
	--expression-editor--modal--color--background: var(--color--neutral-900);
	--expression-editor--syntax-example--color: var(--color--neutral-700);
	--autocomplete--item--color--selected: var(--color--purple-400);
	--autocomplete--section-header--border-color: var(--color--neutral-600);
	--autocomplete--infobox--color--background: var(--color--neutral-900);
	--autocomplete--infobox--examples--border-color: var(--color--neutral-700);

	// Code
	--code-tags--string--color: #9ecbff;
	--code-tags--regex--color: #9ecbff;
	--code-tags--primitive--color: #79b8ff;
	--code-tags--keyword--color: #f97583;
	--code-tags--variable--color: #79b8ff;
	--code-tags--parameter--color: var(--color--slate-100);
	--code-tags--function--color: #b392f0;
	--code-tags--constant--color: #79b8ff;
	--code-tags--property--color: #79b8ff;
	--code-tags--type--color: #b392f0;
	--code-tags--class--color: #b392f0;
	--code-tags--heading--color: #79b8ff;
	--code-tags--invalid--color: #f97583;
	--code-tags--comment--color: #6a737d;
	--json--color: var(--color--purple-400);
	--json--null--color: var(--color--danger);
	--json--boolean--color: var(--color--green-600);
	--json--number--color: var(--color--green-600);
	--json--string--color: var(--color--purple-400);
	--json--key--color: var(--color--text--shade-1);
	--json--brackets--color: var(--color--neutral-700);
	--json--brackets--color--hover: var(--color--blue-400);
	--json--line--color: var(--color--neutral-250);
	--json--highlight--color: var(--color--background);
	--code--color--background: var(--color--neutral-950);
	--code--color--background--readonly: var(--color--neutral-850);
	--code--line-highlight--color: var(--color--neutral-300-alpha-100);
	--code--color--foreground: var(--color--neutral-150);
	--code--caret--color: var(--color--neutral-50);
	--code--selection--color: #3392ff44;
	--code--selection--color--highlight: #17e5e633;
	--code--gutter--color--background: var(--color--neutral-950);
	--code--gutter--color--foreground: var(--color--neutral-300);
	--code--gutter--color--foreground--active: var(--color--neutral-50);
	--code--indentation-marker--color: var(--color--neutral-850);
	--code--indentation-marker--color--active: var(--color--neutral-700);
	--line-break--color: var(--color--neutral-400);
	--code--line-break--color: var(--color--purple-500);

	// Tag
	--tag--color--background: var(--color--neutral-700);
	--tag--color--background--hover: var(--color--neutral-600);
	--tag--border-color: var(--color--neutral-800);
	--tag--border-color--hover: var(--color--neutral-700);
	--tag--color--text: var(--color--text--shade-1);

	// Variables
	--variables-usage--color--text: var(--color--green-300);
	--variables-usage--syntax--color--background: var(--color--green-alpha-200);

	// Button primary
	--button--outline-color--primary--focus: var(--color--orange-alpha-300);
	--button--color--text--primary--disabled: var(--color--white-alpha-500);
	--button--border-color--primary--disabled: transparent;
	--button--color--background--primary--disabled: var(--color--orange-alpha-500);

	// Button secondary
	--button--color--text--secondary: var(--color--neutral-150);
	--button--border-color--secondary: var(--color--foreground);
	--button--color--background--secondary: var(--color--background--light-2);
	--button--color--text--secondary--hover-active-focus: var(--color--orange-250);
	--button--color--background--secondary--hover: var(--color--background--light-2);
	--button--color--background--secondary--active-focus: var(--color--orange-alpha-100);
	--button--outline-color--secondary--focus: var(--color--orange-alpha-300);
	--button--color--text--secondary--disabled: var(--color--white-alpha-500);
	--button--border-color--secondary--disabled: var(--color--foreground);

	// Button highlight
	--button--color--text--highlight: var(--color--neutral-300);
	--button--border-color--highlight: transparent;
	--button--color--background--highlight: transparent;
	--button--color--text--highlight--hover-active-focus: var(--color--orange-400);
	--button--border-color--highlight--hover-active-focus: var(--color--neutral-700);
	--button--color--background--highlight--hover: var(--color--neutral-700);
	--button--color--background--highlight--active-focus: var(--color--neutral-700);
	--button--outline-color--highlight--focus: var(--color--neutral-700);
	--button--color--text--highlight--disabled: var(--color--neutral-600);
	--button--border-color--highlight--disabled: transparent;

	// Button highlight-fill
	--button--color--text--highlight-fill: var(--color--text--shade-1);
	--button--border-color--highlight-fill: transparent;
	--button--color--background--highlight-fill: var(--color--background);
	--button--color--text--highlight-fill--hover-active-focus: var(--color--primary);
	--button--border-color--highlight-fill--hover-active-focus: transparent;
	--button--color--background--highlight-fill--hover: var(--color--background);
	--button--color--background--highlight-fill--active-focus: var(--color--background);
	--button--outline-color--highlight-fill--focus: var(--color--neutral-700);
	--button--color--text--highlight-fill--disabled: var(--color--neutral-600);
	--button--border-color--highlight-fill--disabled: transparent;
	--button--color--background--highlight-fill--disabled: var(--color--background);

	// Button success, warning, danger
	--button--color--text--danger: var(--color--neutral-white);
	--button--border-color--danger: transparent;
	--button--outline-color--danger--focus: var(--color--red-300);
	--button--color--text--danger--disabled: var(--color--white-alpha-400);
	--button--border-color--danger--disabled: transparent;
	--button--color--background--danger--disabled: var(--color--red-alpha-020);

	// Text button
	--text-button--color--text--secondary: var(--color--neutral-300);

	// Node Creator Button
	--node-creator--button--color--text: var(--button--color--text--secondary);
	--node-creator--button--color--text--hover: var(
		--button--color--text--secondary--hover-active-focus
	);
	--node-creator--button--border-color--hover: var(--color--orange-500);
	--node-creator--button--color--background: var(--color--orange-alpha-100);

	// Table
	--table--header--color--background: var(--color--neutral-850);
	--table--row--color--background: var(--color--neutral-950);
	--table--row--color--background--even: var(--color--neutral-900);
	--table--row--color--background--hover: var(--color--neutral-850);
	--table--row--color--background--highlight: var(--color--warning--tint-1);

	// Notification
	--notification--color--background: var(--color--neutral-850);

	// Execution
	--execution-card--color--background: var(--color--foreground--tint-1);
	--execution-card--color--background--hover: var(--color--foreground);
	--execution-selector--color--background: var(--color--background--shade-2);
	--execution-selector--color--text: var(--color--text--tint-3);
	--execution-select-all--color--text: var(--color--text);
	--execution-card--color--text--waiting: var(--color--purple-500);

	// NDV
	--run-data--color--background: var(--color--neutral-900);
	--ndvv2--run-data--color--background: var(--color--neutral-900);
	--ndv--droppable-parameter--color: var(--color--orange-500);
	--ndv--droppable-parameter--color--background: var(--color--orange-alpha-100);
	--ndv--droppable-parameter--color--background--active: var(--color--green-alpha-100);
	--ndv--back--color--text: var(--color--neutral-white);
	--ndv--background--color: var(--color--background--light-1);
	--ndv--header--color: var(--color--neutral-750);

	// Notice
	--notice--border-color--warning: var(--color--gold-200);
	--notice--color--background--warning: var(--color--gold-alpha-020);
	--notice--color--text: var(--color--neutral-white);

	// Callout
	--callout--border-color--info: var(--color--foreground);
	--callout--color--background--info: var(--color--neutral-900);
	--callout--color--text--info: var(--color--neutral-white);
	--callout--border-color--success: var(--color--success);
	--callout--color--background--success: var(--color--green-900);
	--callout--color--text--success: var(--color--neutral-white);
	--callout--border-color--warning: var(--color--warning);
	--callout--color--background--warning: var(--color--gold-800);
	--callout--color--text--warning: var(--color--neutral-white);
	--callout--border-color--danger: var(--color--red-800);
	--callout--color--background--danger: var(--color--red-950);
	--callout--color--text--danger: var(--color--neutral-white);
	--callout--icon-color--danger: var(--color--danger);
	--callout--border-color--secondary: var(--color--secondary);
	--callout--color--background--secondary: var(--color--purple-alpha-200);
	--callout--color--text--secondary: var(--color--neutral-white);

	// Dialogs and overlays
	--dialog--color--background: var(--color--neutral-900);
	--dialog--overlay--color--background: var(--color--slate-alpha-700);
	--dialog--overlay--color--background--dark: var(--color--black-alpha-600);

	// Avatar
	--avatar--color--text: var(--color--neutral-white);

	// NPS Survey
	--nps-survey--color--background: var(--color--neutral-850);
	--nps-survey--color--text: var(--color--neutral-white);

	// Switch (Activation, boolean)
	--switch--color--background: var(--color--neutral-950);
	--switch--border-color: var(--color--neutral-700);
	--switch--toggle--color: var(--color--neutral-125);

	// Action Dropdown
	--action-dropdown--item--color--background--active: var(--color--background--light-3);

	// Input Triple
	--input-triple--color--background: var(--color--neutral-900);

	// Node error
	--node--error-output--color--text: var(--color--danger);

	// MFA Recovery codes
	--mfa--recovery-code--color--background: var(--color--background--light-3);
	--mfa--recovery-code--color: var(--color--text--shade-1);
	--mfa--lose-access--color--text: var(--color--danger);

	// Text highlight
	--text-highlight--color--background: var(--color--yellow-700);

	// AI
	--node-type--color--background--l: 20%;
	--node-type--supplemental--label--color--h: 235;
	--node-type--supplemental--label--color--s: 28%;
	--node-type--supplemental--label--color--l: 40%;
	--node-type--supplemental--color--h: 235;
	--node-type--supplemental--color--s: 13%;
	--node-type--supplemental--color--l: 60%;
	--node-type--supplemental--label--color: hsl(
		var(--node-type--supplemental--label--color--h),
		var(--node-type--supplemental--label--color--s),
		var(--node-type--supplemental--label--color--l)
	);
	--node-type--supplemental--icon--color: var(--color--foreground--shade-1);
	--node-type--supplemental--color: hsl(
		var(--node-type--supplemental--color--h),
		var(--node-type--supplemental--color--s),
		var(--node-type--supplemental--color--l)
	);
	--node-type--supplemental--color--background: hsl(
		var(--node-type--supplemental--color--h),
		var(--node-type--supplemental--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--supplemental--connector--color: var(--color--foreground--shade-1);
	--node-type--ai-chain--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-chain--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-chain--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-chain--color: hsl(
		var(--node-type--ai-chain--color--h),
		var(--node-type--ai-chain--color--s),
		var(--node-type--ai-chain--color--l)
	);
	--node-type--chain--color--background: hsl(
		var(--node-type--ai-chain--color--h),
		var(--node-type--ai-chain--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-document--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-document--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-document--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-document--color: hsl(
		var(--node-type--ai-document--color--h),
		var(--node-type--ai-document--color--s),
		var(--node-type--ai-document--color--l)
	);
	--node-type--ai-document--color--background: hsl(
		var(--node-type--ai-document--color--h),
		var(--node-type--ai-document--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-embedding--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-embedding--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-embedding--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-embedding--color: hsl(
		var(--node-type--ai-embedding--color--h),
		var(--node-type--ai-embedding--color--s),
		var(--node-type--ai-embedding--color--l)
	);
	--node-type--ai-embedding--color--background: hsl(
		var(--node-type--ai-embedding--color--h),
		var(--node-type--ai-embedding--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-language-model--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-language-model--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-language-model--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-language-model--color: hsl(
		var(--node-type--ai-language-model--color--h),
		var(--node-type--ai-language-model--color--s),
		var(--node-type--ai-language-model--color--l)
	);
	--node-type--ai-language-model--color--background: hsl(
		var(--node-type--ai-language-model--color--h),
		var(--node-type--ai-language-model--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-memory--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-memory--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-memory--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-memory--color: hsl(
		var(--node-type--ai-memory--color--h),
		var(--node-type--ai-memory--color--s),
		var(--node-type--ai-memory--color--l)
	);
	--node-type--ai-memory--color--background: hsl(
		var(--node-type--ai-memory--color--h),
		var(--node-type--ai-memory--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-output-parser--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-output-parser--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-output-parser--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-output-parser--color: hsl(
		var(--node-type--ai-output-parser--color--h),
		var(--node-type--ai-output-parser--color--s),
		var(--node-type--ai-output-parser--color--l)
	);
	--node-type--ai-output-parser--color--background: hsl(
		var(--node-type--ai-output-parser--color--h),
		var(--node-type--ai-output-parser--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-tool--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-tool--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-tool--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-tool--color: hsl(
		var(--node-type--ai-tool--color--h),
		var(--node-type--ai-tool--color--s),
		var(--node-type--ai-tool--color--l)
	);
	--node-type--ai-tool--color--background: hsl(
		var(--node-type--ai-tool--color--h),
		var(--node-type--ai-tool--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-retriever--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-retriever--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-retriever--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-retriever--color: hsl(
		var(--node-type--ai-retriever--color--h),
		var(--node-type--ai-retriever--color--s),
		var(--node-type--ai-retriever--color--l)
	);
	--node-type--ai-retriever--color--background: hsl(
		var(--node-type--ai-retriever--color--h),
		var(--node-type--ai-retriever--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-text-splitter--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-text-splitter--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-text-splitter--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-text-splitter--color: hsl(
		var(--node-type--ai-text-splitter--color--h),
		var(--node-type--ai-text-splitter--color--s),
		var(--node-type--ai-text-splitter--color--l)
	);
	--node-type--ai-text-splitter--color--background: hsl(
		var(--node-type--ai-text-splitter--color--h),
		var(--node-type--ai-text-splitter--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-vector-retriever--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-vector-retriever--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-vector-retriever--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-vector-retriever--color: hsl(
		var(--node-type--ai-vector-retriever--color--h),
		var(--node-type--ai-vector-retriever--color--s),
		var(--node-type--ai-vector-retriever--color--l)
	);
	--node-type--ai-vector-retriever--color--background: hsl(
		var(--node-type--ai-vector-retriever--color--h),
		var(--node-type--ai-vector-retriever--color--s),
		var(--node-type--color--background--l)
	);
	--node-type--ai-vector-store--color--h: var(--node-type--supplemental--color--h);
	--node-type--ai-vector-store--color--s: var(--node-type--supplemental--color--s);
	--node-type--ai-vector-store--color--l: var(--node-type--supplemental--color--l);
	--node-type--ai-vector-store--color: hsl(
		var(--node-type--ai-vector-store--color--h),
		var(--node-type--ai-vector-store--color--s),
		var(--node-type--ai-vector-store--color--l)
	);
	--node-type--ai-vector-store--color--background: hsl(
		var(--node-type--ai-vector-store--color--h),
		var(--node-type--ai-vector-store--color--s),
		var(--node-type--color--background--l)
	);

	// Diff colors (dark theme overrides)
	--diff--color--new: var(--color--green-500);
	--diff--color--new--light: #43674f;
	--diff--color--new--faint: #3a463e;
	--diff--color--modified: #d6a625;
	--diff--color--modified--light: #6a5c38;
	--diff--color--modified--faint: #464236;
	--diff--color--deleted: #fb887a;
	--diff--color--deleted--light: #7a524e;
	--diff--color--deleted--faint: #4d3e3d;

	// Various
	--color--info--tint-1: var(--color--neutral-400);
	--color--info--tint-2: var(--color--neutral-850);
	--node-type--supplemental--label--color--l: 100%;
	--node-type--supplemental--label--color: hsl(
		var(--node-type--supplemental--label--color--h),
		var(--node-type--supplemental--label--color--s),
		var(--node-type--supplemental--label--color--l)
	);
	--node--configurable-name--color: var(--color--text--shade-1);
	--link--color--secondary: var(--color--purple-400);
	--link--color--secondary--hover: var(--color--purple-500);
	// Params
	--icon--color: var(--color--text--tint-1);
	--icon--color--hover: var(--color--orange-500);

	--menu--color--background: var(--color--neutral-900);
	--menu--color--background--hover: var(--color--neutral-700);
	--menu--color--background--active: var(--color--neutral-700);

	/* Ag Grid */
	--grid--row--color--background--selected: var(--color--purple-900);

	--command-bar-item--color--background--hover: var(--color--background--light-1);
	--command-bar--shadow:
		0 15px 45px 0 var(--color--black-alpha-400), 0 5px 10px 0 var(--color--black-alpha-200);

	--shadow-color: var(--color--black-alpha-250);
}

:root {
	color-scheme: light dark;
	@include theme;
}

body[data-theme='light'] {
	color-scheme: light;
}

body[data-theme='dark'] {
	@include theme-dark;
	color-scheme: dark;
}

body:not([data-theme]) {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	body:not([data-theme]) {
		@include theme-dark;
	}
}