@use 'sass:math';

@mixin theme {
	// Primary tokens
	--color--danger: var(--color--red-400);

	// Text
	--color--text--shade-1: var(--color--neutral-125);
	--color--text: var(--color--neutral-250);
	--color--text--tint-1: var(--color--neutral-300);
	--color--text--tint-2: var(--color--neutral-600);
	--color--text--tint-3: var(--color--neutral-800);
	--color--text--danger: var(--color--red-400);

	// Foreground
	--color--foreground--shade-2: var(--color--neutral-400);
	--color--foreground--shade-1: var(--color--neutral-700);
	--color--foreground: var(--color--neutral-800);
	--color--foreground--tint-1: var(--color--neutral-850);
	--color--foreground--tint-2: var(--color--neutral-950);

	// Background
	--color--background--shade-2: var(--color--neutral-150);
	--color--background--shade-1: var(--color--neutral-600);
	--color--background: var(--color--neutral-700);
	--color--background--light-1: var(--color--neutral-850);
	--color--background--light-2: var(--color--neutral-950);
	--color--background--light-3: var(--color--neutral-900);

	--shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
	--shadow--dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
	--shadow--light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);

	// Secondary tokens

	// AI Assistant
	--assistant--color--highlight-1: #8c90f2;
	--assistant--color--highlight-2: #a977f0;
	--assistant--color--highlight-3: #f0778b;
	--assistant--button--color--background--gradient: linear-gradient(#2e2e2e, #2e2e2e);
	--assistant--button--color--background--gradient--hover: linear-gradient(#383839, #383839);
	--assistant--button--color--background--gradient--active: linear-gradient(#414244, #414244);
	--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: #f0f3f9;
	--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--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--orange-red: var(--color--orange-300);
	--node--icon--color--pink-red: #f85d82;
	--node--icon--color--red: var(--color--red-400);
	--node--icon--color--light-green: #20b69e;
	--node--icon--color--green: #38cb7a;
	--node--icon--color--dark-green: #86decc;
	--node--icon--color--purple: #9b6dd5;
	--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: #e1e4e8;
	--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-300);
	--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-300);
	--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: #38cb7a;
	--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);
	--border-color: var(--color--foreground);
	--border-color--light: var(--color--foreground--tint-1);
	--border: var(--border-width) var(--border-style) var(--color--foreground);
	--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-300);

	--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 hsla(0, 0%, 0%, 0.25), 0 5px 10px 0 hsla(0, 0%, 0%, 0.15);
}

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

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