:root {
	--primarya0: #84bd00;
	--primarya20: #95c922;
	--primarya40: #a6d544;
	--primarya60: #b7e166;
	--primarya80: #c8ed88;
	--primarya100: #ebffcd;

	--surfacea0: #121212;
	--surfacea10: #1a1a1a;
	--surfacea20: #282828;
	--surfacea40: #3f3f3f;
	--surfacea60: #575757;
	--surfacea80: #717171;
	--surfacea100: #8b8b8b;

	--fontcolor: #fff;
	--fontcolor-secondary: #ccc;
	--fontcolor-muted: #999;

	--animTime: 0.2s;

	/* Sidebar specific - Dark theme */
	--sidebar-bg: rgba(30, 30, 30, 0.98);
	--sidebar-border: rgba(255, 255, 255, 0.1);
	--sidebar-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

	--input-bg: rgba(40, 40, 40, 1);
	--input-border: rgba(255, 255, 255, 0.15);
	--input-hover-bg: rgba(50, 50, 50, 1);
	--input-focus-shadow: 0 0 0 3px rgba(132, 189, 0, 0.2);

	--button-bg: rgba(40, 40, 40, 0.8);
	--button-border: rgba(255, 255, 255, 0.1);
	--button-hover-bg: var(--primarya80);

	--separator-color: rgba(255, 255, 255, 0.08);

	--id-input-bg: var(--surfacea40);
	--id-input-color: var(--fontcolor);
	--id-input-color-focused: var(--surfacea80);
	--choice-input-bg: rgba(40, 40, 40, 1);
	--ai-input-bg: rgba(60, 60, 60, 1);

	--background-color-default: var(--surfacea20) !important;
	--background-pattern-color-default: var(--surfacea40) !important;
	--background-blur: rgba(87, 87, 87, 0.5);
}

[data-theme='light'] {
	--primarya0: #77aa00;
	--primarya20: #95c922;
	--primarya40: #a6d544;
	--primarya60: #b7e166;
	--primarya80: #c8ed88;
	--primarya100: #d9f9aa;

	/* 
    --primarya0: #8b8c26;
	--primarya20: #9d9e3c;
	--primarya40: #afb052;
	--primarya60: #c1c268;
	--primarya80: #d3d47e;
	--primarya100: #e5e694;
    */
	--surfacea0: #f8f8f8;
	--surfacea10: #fcfcfc;
	--surfacea20: #f0f0f0;
	--surfacea40: #e0e0e0;
	--surfacea60: #c8c8c8;
	--surfacea80: #a8a8a8;
	--surfacea100: #888888;

	--fontcolor: #1a1a1a;
	--fontcolor-secondary: #333;
	--fontcolor-muted: #999;

	/* Sidebar specific - Light theme */
	--sidebar-bg: rgba(255, 255, 255, 0.98);
	--sidebar-border: rgba(0, 0, 0, 0.08);
	--sidebar-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

	--input-bg: rgba(255, 255, 255, 1);
	--input-border: rgba(0, 0, 0, 0.12);
	--input-hover-bg: rgba(248, 248, 248, 1);
	--input-focus-shadow: 0 0 0 3px rgba(132, 189, 0, 0.1);

	--button-bg: rgba(255, 255, 255, 0.8);
	--button-border: rgba(0, 0, 0, 0.08);
	--button-hover-bg: var(--primarya100);

	--separator-color: rgba(0, 0, 0, 0.06);

	--id-input-bg: var(--primarya100);
	--id-input-color: var(--primarya0);
	--id-input-color-focused: var(--primarya80);
	--choice-input-bg: rgba(255, 255, 255, 1);
	--ai-input-bg: rgba(240, 240, 240, 1);

	--background-color-default: var(--surfacea20) !important;
	--background-pattern-color-default: var(--surfacea40) !important;
	--background-blur: rgba(200, 200, 200, 0.5);
}

.svelte-flow {
	--xy-edge-stroke-default: var(--primarya0) !important;
	--xy-edge-stroke-width-default: 1 !important;
	--xy-edge-stroke-selected-default: var(--primarya100) !important;
	--xy-connectionline-stroke-default: var(--primarya0) !important;

	--xy-background-pattern-dots-color-default: #8b8b8b80 !important;
	--xy-background-pattern-lines-color-default: #8b8b8b80 !important;

	--xy-node-background-color-default: var(--surfacea20);
	--xy-node-color-default: var(--fontcolor) !important;
}

[data-theme='light'] .svelte-flow {
	--xy-edge-stroke-default: var(--primarya0) !important;
	--xy-edge-stroke-width-default: 2 !important;
	--xy-background-pattern-dots-color-default: #44444440 !important;
	--xy-background-pattern-lines-color-default: #44444440 !important;
}

.svelte-flow__controls-button {
	background-color: var(--surfacea40) !important;
	color: var(--fontcolor) !important;
	border: 0;
	border-radius: 0.5rem;
	padding: 0.5rem;
	margin: 0.25rem;
	cursor: pointer;
}

.svelte-flow__controls-button:hover {
	background-color: var(--surfacea60) !important;
}