@use 'sass:math';

/**
 * CSS Variable Naming Migration with Backwards Compatibility
 *
 * We are migrating from single-dash format (--color-primary-shade-1) to a new
 * double-dash format (--color--primary--shade-1) to align with design system guidelines.
 *
 * To maintain backwards compatibility for users (for example embed customers that customize n8n)
 * we use CSS variable fallbacks:
 * --color--primary: var(--color-primary, var(--color--orange-300))
 *
 * This ensures:
 * 1. New code using --color--primary--* works correctly
 * 2. Legacy code using --color-primary-* continues to work
 * 3. External integrations and custom CSS won't break
 * 4. Gradual migration path without breaking changes
 *
 */

@mixin theme {
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--primary--h: 7;
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--primary--s: 100%;
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--primary--l: 68%;

	// Primary tokens

	// Primary
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--primary--shade-1: var(--color-primary-shade-1, var(--color--primary));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--primary: var(--color-primary, var(--color--orange-300));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--primary--tint-1: var(--color-primary-tint-1, var(--color--orange-200));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--primary--tint-2: var(--color-primary-tint-2, var(--color--orange-150));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--primary--tint-3: var(--color-primary-tint-3, var(--color--orange-50));

	// Secondary
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--secondary--shade-1: var(--color-secondary-shade-1, var(--color--purple-700));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--secondary: var(--color-secondary, var(--color--purple-600));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--secondary--tint-1: var(--color-secondary-tint-1, var(--color--purple-300));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--secondary--tint-2: var(--color-secondary-tint-3, var(--color--purple-200));

	// Success
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--success--shade-1: var(--color-success-shade-1, var(--color--green-700));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--success: var(--color-success, var(--color--green-600));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--success--tint-1: var(--color-success-light, var(--color--green-300));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--success--tint-2: var(--color-success-light-2, var(--color--green-200));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--success--tint-3: var(--color-success-tint-1, var(--color--green-100));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--success--tint-4: var(--color-success-tint-2, var(--color--green-50));

	// Warning
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--warning--shade-1: var(--color-warning-shade-1, var(--color--gold-500));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--warning: var(--color-warning, var(--color--gold-600));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--warning--tint-1: var(--color-warning-tint-1, var(--color--gold-200));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--warning--tint-2: var(--color-warning-tint-2, var(--color--gold-50));

	// Danger
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--danger--shade-1: var(--color-danger-shade-1, var(--color--red-700));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--danger: var(--color-danger, var(--color--red-600));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--danger--tint-1: var(--color-danger-light, var(--color--red-400));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--danger--tint-2: var(--color-danger-light-2, var(--color--red-300));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--danger--tint-3: var(--color-danger-tint-1, var(--color--red-100));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--danger--tint-4: var(--color-danger-tint-2, var(--color--red-50));

	// Text
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--text--shade-1: var(--color-text-dark, var(--color--neutral-850));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--text: var(--color-text-base, var(--color--neutral-600));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--text--tint-1: var(--color-text-light, var(--color--neutral-400));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--text--tint-2: var(--color-text-lighter, var(--color--neutral-200));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--text--tint-3: var(--color-text-xlight, var(--color--neutral-white));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--text--danger: var(--color-text-danger, var(--color--red-600));

	// Foreground
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--foreground--shade-2: var(--color-foreground-xdark, var(--color--neutral-500));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--foreground--shade-1: var(--color-foreground-dark, var(--color--neutral-250));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--foreground: var(--color-foreground-base, var(--color--neutral-200));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--foreground--tint-1: var(--color-foreground-light, var(--color--neutral-150));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--foreground--tint-2: var(--color-foreground-xlight, var(--color--neutral-white));

	// Background
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--background--shade-2: var(--color-background-dark, var(--color--neutral-950));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--background--shade-1: var(--color-background-medium, var(--color--neutral-200));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--background: var(--color-background-base, var(--color--neutral-125));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--background--light-1: var(--color-background-light-base, var(--color--neutral-100));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--background--light-2: var(--color-background-light, var(--color--neutral-50));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--color--background--light-3: var(--color-background-xlight, var(--color--neutral-white));

	/* stylelint-disable-next-line @n8n/css-var-naming */
	--shadow: var(--box-shadow-base, 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04));
	--shadow--dark: var(
		/* stylelint-disable-next-line @n8n/css-var-naming */ --box-shadow-dark,
		0 2px 4px rgba(0, 0, 0, 0.12),
		0 0 6px rgba(0, 0, 0, 0.12)
	);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--shadow--light: var(--box-shadow-light, 0 2px 12px 0 rgba(0, 0, 0, 0.07));

	/* stylelint-disable-next-line @n8n/css-var-naming */
	--radius--xl: var(--border-radius-xlarge, 12px);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--radius--lg: var(--border-radius-large, 8px);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--radius: var(--border-radius-base, 4px);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--radius--sm: var(--border-radius-small, 2px);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--border-color: var(--border-color-base, var(--color--foreground));
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--border-color--light: var(--border-color-light, var(--color--foreground--tint-1));

	/* stylelint-disable-next-line @n8n/css-var-naming */
	--border-style: var(--border-style-base, solid);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--border-width: var(--border-width-base, 1px);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	--border: var(--border-base, var(--border-width) var(--border-style) var(--color--foreground));

	// Secondary tokens

	// 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-100);
	--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: #414244;
	--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--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--orange: #ff965a;
	--node--icon--color--orange-red: #ff6d5a;
	--node--icon--color--pink-red: #ea4b71;
	--node--icon--color--red: var(--color--red-600);
	--node--icon--color--light-green: #31c4ab;
	--node--icon--color--green: #108e49;
	--node--icon--color--dark-green: #157562;
	--node--icon--color--azure: #54b8c9;
	--node--icon--color--purple: #539;
	--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: #24292e;
	--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-300);
	--button--color--background--primary: var(--color--orange-300);
	--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-200);
	--button--color--background--primary--disabled: var(--color--orange-200);

	// 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-400);
	--button--border-color--secondary--hover-active-focus: var(--color--orange-300);
	--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-300);
	--node-creator--button--border-color--hover: var(--color--orange-300);
	--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--mint-600);
	--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: #fbf1d4;
	--diff--color--deleted: #f51f32;
	--diff--color--deleted--light: #fad3d0;
	--diff--color--deleted--faint: #ffedec;

	// 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-300);

	/* 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--shadow: 0 15px 45px 0 hsla(0, 0%, 0%, 0.13), 0 5px 10px 0 hsla(0, 0%, 0%, 0.08);

	// Animation
	--animation--duration: 0.3s;
	--animation--duration--snappy: 0.2s;
	// Spring easing, generated at https://animejs.com/easing-editor/spring/default preset:snappy mode:perceived bounce:0.15
	--animation--easing: linear(
		0,
		0.0088,
		0.0327,
		0.068,
		0.1117,
		0.1614,
		0.2149,
		0.2706,
		0.327,
		0.3831,
		0.4379,
		0.4907,
		0.5412,
		0.5889,
		0.6336,
		0.6751,
		0.7135,
		0.7487,
		0.7809,
		0.81,
		0.8362,
		0.8597,
		0.8807,
		0.8994,
		0.9158,
		0.9302,
		0.9428,
		0.9537,
		0.9632,
		0.9712,
		0.9781,
		0.9839,
		0.9888,
		0.9928,
		0.9961,
		0.9988,
		1.001,
		1.0026,
		1.0039,
		1.0049,
		1.0055,
		1.006,
		1.0062,
		1.0063,
		1.0062,
		1.0061,
		1.0059,
		1.0056,
		1.0053,
		1.005,
		1.0046,
		1.0043,
		1.0039,
		1.0036,
		1.0032,
		1.0029,
		1.0026,
		1.0023,
		1.0021,
		1.0018,
		1.0016,
		1.0014,
		1.0012,
		1.0011,
		1.0009,
		1.0008,
		1.0006,
		1.0005,
		1.0005,
		1.0004,
		1.0003,
		1.0002,
		1.0002,
		1.0001,
		1.0001,
		1.0001,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1,
		1
	);
}

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

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

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

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