@import "tailwindcss";
@import "../../../internal-packages/ui/style.css";
@import "../../../internal-packages/workflow-designer-ui/src/style.css";

@source "../../../internal-packages/ui";
@source "../../../internal-packages/workflow-designer-ui/src";
@source "../../../packages/text-editor/src/react/";

@theme {
	--color-black-950: hsl(0, 0%, 0%);
	--color-black-900: hsl(229, 100%, 2%);
	--color-black-850: hsl(231, 62%, 6%);
	--color-black-820: hsl(207, 27%, 15%);
	--color-black-800: hsl(231, 47%, 22%);
	--color-black-600: hsl(222, 17%, 53%);
	--color-black-400: hsl(222, 21%, 40%);
	--color-black-350: hsl(207, 11%, 47%);
	--color-black-300: hsl(222, 21%, 50%);
	--color-black-200: hsl(209, 17%, 75%);
	--color-black-250: hsl(222, 57%, 73%);
	--color-black-100: hsl(234, 91%, 5%);
	--color-black-80: hsl(218, 58%, 21%);
	--color-black-70: hsl(222, 21%, 40%);
	--color-black-50: hsl(222, 21%, 40%);
	--color-black-40: hsl(207, 12%, 57%);
	--color-black-30: hsl(207, 19%, 77%);
	--color-black--30: hsl(192, 73%, 84%);
	--color-black--50: hsl(210, 58%, 71%);
	--color-black--70: hsl(202, 52%, 46%);

	--color-white-950: hsl(0 0% 100%);
	--color-white-900: hsl(220, 60%, 98%);
	--color-white-850: hsl(0, 0%, 96%);
	--color-white-800: hsl(207, 43%, 91%);
	--color-white-400: hsl(207, 16%, 75%);
	--color-white-350: hsl(207, 19%, 77%);
	--color-white-300: hsl(220, 24%, 67%);
	--color-white-30: hsl(0, 0%, 100%);
	--color-white: var(--color-white-900);

	--color-blue-950: hsl(219, 90%, 52%);
	--color-blue-900: hsl(219, 90%, 52%);
	--color-blue-800: hsl(219, 90%, 60%);
	--color-blue-400: hsl(224, 82%, 68%);
	--color-blue-300: hsl(216, 35%, 64%);
	--color-blue-200: hsl(212, 79%, 87%);
	--color-blue-100: hsl(192, 73%, 84%);

	--color-green-900: hsl(141, 100%, 61%);

	--color-chartreuse-900: hsl(69, 100%, 52%);

	--color-turquoise-900: hsl(178, 94%, 49%);

	--color-red-900: hsl(344, 100%, 62%);
	--color-red-400: hsl(344, 100%, 62%);
	--color-red-300: hsl(344, 100%, 70%);
	--color-red-200: hsl(344, 100%, 80%);

	--color-deep-purple-900: hsl(275, 96%, 44%);

	--color-primary-950: var(--color-blue-950);
	--color-primary-900: var(--color-blue-900);
	--color-primary-800: var(--color-blue-800);
	--color-primary-400: var(--color-blue-400);
	--color-primary-300: var(--color-blue-300);
	--color-primary-200: var(--color-blue-200);
	--color-primary-100: var(--color-blue-100);

	--color-text-node-1: var(--color-node-text-primary);
	--color-text-node-2: var(--color-node-text-secondary);

	--color-file-node-1: var(--color-node-file-primary);
	--color-file-node-2: var(--color-node-file-secondary);

	--color-webPage-node-1: var(--color-node-web-page-primary);
	--color-webPage-node-2: var(--color-node-web-page-secondary);

	--color-node-data-900: var(--color-chartreuse-900);
	--color-node-plaintext-900: var(--color-turquoise-900);

	--color-generation-node-1: var(--color-node-generation-primary);
	--color-generation-node-2: var(--color-node-generation-secondary);

	--color-trigger-node-1: var(--color-node-trigger-primary);
	--color-trigger-node-2: var(--color-node-trigger-secondary);
	--shadow-trigger-node-1: 0px 4px 12px hsla(220, 15%, 50%, 0.3);

	/* Stage nodes (App Entry / End) */
	--color-stage-node-1: var(--color-blue-muted);
	--shadow-stage-node-1: 0px 4px 12px
		color-mix(in srgb, var(--color-stage-node-1) 30%, transparent);

	--color-action-node-1: var(--color-node-action-primary);
	--color-action-node-2: var(--color-node-action-secondary);

	--color-github-node-1: var(--color-node-github-primary);
	--color-github-node-2: var(--color-node-github-secondary);

	--color-web-search-node-1: var(--color-node-web-search-primary);
	--color-web-search-node-2: var(--color-node-web-search-secondary);

	--color-image-generation-node-1: var(--color-node-image-generation-primary);
	--color-image-generation-node-2: var(--color-node-image-generation-secondary);

	--color-audio-generation-node-1: var(--color-node-audio-generation-primary);
	--color-audio-generation-node-2: var(--color-node-audio-generation-secondary);

	--color-video-generation-node-1: var(--color-node-video-generation-primary);
	--color-video-generation-node-2: var(--color-node-video-generation-secondary);

	--color-query-node-1: var(--color-node-query-primary);
	--color-query-node-2: var(--color-node-query-secondary);

	--color-vector-store-node-1: var(--color-node-vector-store-primary);
	--color-vector-store-node-2: var(--color-node-vector-store-secondary);

	--color-data-store-node-1: var(--color-node-data-store-primary);
	--color-data-store-node-2: var(--color-node-data-store-secondary);

	--color-data-query-node-1: var(--color-node-data-query-primary);
	--color-data-query-node-2: var(--color-node-data-query-secondary);

	--color-end-node-1: var(--color-blue-400);
	--color-end-node-2: var(--color-blue-800);

	--color-error-900: var(--color-red-900);
	--error_900: var(--color-red-900);
	--red_900: var(--color-red-900);
	--red_400: var(--color-red-400);
	--red_300: var(--color-red-300);
	--red_200: var(--color-red-200);

	--font-accent: var(--font-dm-sans);
	--font-sans: var(--font-dm-sans);
	--font-mono: var(--font-dm-mono);

	--spacing-navigation-rail-expanded: 240px;
	--spacing-navigation-rail-collapsed: 52px;
	--spacing-navigation-rail-header: 52px;
	--spacing-navigation-rail-footer: 60px;
}

@layer components {
	.prompt-editor,
	.markdown-renderer {
		/* Base variables */
		--base-font-size: 14;
		--rem-base: calc(var(--base-font-size) / 16);
		--line-height-ratio: 1.6;

		/* Font sizes */
		--text-base: calc(var(--rem-base) * 1rem);
		--text-sm: calc(var(--base-font-size) * 0.857142857 / 16 * 1rem); /* 12px */

		/* Spacing */
		--spacing-1: calc(1 / var(--base-font-size) * 1em);
		--spacing-2: calc(6 / var(--base-font-size) * 1em);
		--spacing-4: calc(16 / var(--base-font-size) * 1em);
		--spacing-5: calc(20 / var(--base-font-size) * 1em);
		--spacing-6: calc(22 / var(--base-font-size) * 1em);

		/* Border radius */
		--radius-base: calc(4 / var(--base-font-size) * 1rem);

		/* Base styles */
		color: var(--color-white-900);
		font-size: var(--text-base);
		line-height: var(--line-height-ratio);

		&:focus-visible {
			outline: none;
		}

		/* Headings */
		h1 {
			font-size: calc(24 / var(--base-font-size) * 1em);
			font-weight: 600;
			line-height: calc(32 / 24);
			margin-top: calc(32 / 24 * 1em);
			margin-bottom: calc(16 / 24 * 1em);
		}
		h1:first-child {
			margin-top: 0;
		}

		h2 {
			font-size: calc(20 / var(--base-font-size) * 1em);
			font-weight: 600;
			line-height: calc(28 / 20);
			margin-top: calc(32 / 20 * 1em);
			margin-bottom: calc(16 / 20 * 1em);
		}

		h3 {
			font-size: calc(18 / var(--base-font-size) * 1em);
			font-weight: 600;
			line-height: calc(28 / 18);
			margin-top: calc(24 / 18 * 1em);
			margin-bottom: calc(12 / 18 * 1em);
		}

		h4 {
			font-size: calc(16 / var(--base-font-size) * 1em);
			font-weight: 600;
			line-height: calc(24 / 16);
			margin-top: calc(24 / 16 * 1em);
			margin-bottom: calc(12 / 16 * 1em);
		}

		h5 {
			font-size: calc(14 / var(--base-font-size) * 1em);
			font-weight: 600;
			line-height: calc(20 / 14);
			margin-top: calc(20 / 14 * 1em);
			margin-bottom: calc(12 / 14 * 1em);
		}

		h6 {
			font-size: calc(12 / var(--base-font-size) * 1em);
			font-weight: 600;
			line-height: calc(16 / 12);
			margin-top: calc(20 / 12 * 1em);
			margin-bottom: calc(12 / 12 * 1em);
		}

		/* Paragraph */
		p {
			margin-top: var(--spacing-1);
			margin-bottom: var(--spacing-1);
		}

		/* Bold */
		strong {
			font-weight: 600;
		}

		/* Italic */
		em {
			font-style: italic;
		}

		/* Strike */
		del {
			text-decoration: line-through;
		}

		/* Lists */
		ul {
			list-style-type: disc;
			margin-top: var(--spacing-4);
			margin-bottom: var(--spacing-4);
			padding-left: var(--spacing-6);
		}

		ol {
			list-style-type: decimal;
			margin-top: var(--spacing-4);
			margin-bottom: var(--spacing-4);
			padding-left: var(--spacing-6);
		}

		li {
			margin-top: var(--spacing-1);
			margin-bottom: var(--spacing-1);
			padding-left: var(--spacing-2);
		}

		/* Inline code */
		code {
			color: var(--color-white-900);
			font-weight: 600;
			font-size: var(--text-sm);
		}

		code::before {
			content: "`";
		}

		code::after {
			content: "`";
		}

		/* Code block */
		pre {
			--pre-font-size: 12;
			--pre-line-height: calc(20 / var(--pre-font-size));

			color: #e5e7eb;
			background-color: #1f2937;
			overflow-x: auto;
			font-weight: 400;
			font-size: var(--text-sm);
			line-height: var(--pre-line-height);
			margin-bottom: calc(20 / var(--pre-font-size) * 1em);
			padding-top: calc(8 / var(--pre-font-size) * 1em);
			padding-bottom: calc(8 / var(--pre-font-size) * 1em);
			padding-left: calc(12 / var(--pre-font-size) * 1em);
			padding-right: calc(12 / var(--pre-font-size) * 1em);
		}

		pre code {
			background-color: transparent;
			border-width: 0;
			border-radius: 0;
			padding: 0;
			font-weight: inherit;
			color: inherit;
			font-size: inherit;
			font-family: inherit;
			line-height: inherit;
		}

		pre code::before {
			content: none;
		}

		pre code::after {
			content: none;
		}
	}
}

@layer components {
	/* Auth Container Styles */
	.auth-glass-container {
		/* Moved to Tailwind utilities inside AuthContainer component */
	}

	/* moved to UI package: internal-packages/ui/style.css */

	.auth-corner-dot {
		@apply absolute w-1 h-1 rounded-full;
		background-color: hsl(192, 73%, 84%);
		box-shadow: 0 0 16px hsla(192, 73%, 84%, 0.6);
	}

	.auth-corner-dot--top-left {
		@apply top-4 left-4;
	}

	.auth-corner-dot--top-right {
		@apply top-4 right-4;
	}

	.auth-corner-dot--bottom-left {
		@apply bottom-4 left-4;
	}

	.auth-corner-dot--bottom-right {
		@apply bottom-4 right-4;
	}

	.auth-container-header {
		@apply text-center mb-[32px];
	}

	.auth-container-title {
		@apply text-[20px] font-[500] text-text font-sans mb-4;
	}

	.auth-container-description {
		@apply text-[14px] font-sans text-black-200;
	}

	.auth-form-section {
		@apply mb-4;
	}

	.auth-legal-section {
		@apply text-center mb-8;
	}

	.auth-action-section {
		@apply text-center mb-7.5;
	}

	.auth-divider-section {
		@apply py-2;
	}
}

@keyframes custom-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.2;
	}
}

/* Stage chat input fluid blob animations */
@keyframes blob1 {
	0%,
	100% {
		transform: translateY(-50%) translateX(0);
	}
	50% {
		transform: translateY(-30%) translateX(20px);
	}
}

@keyframes blob2 {
	0%,
	100% {
		transform: translateX(0) translateY(0);
	}
	33% {
		transform: translateX(30px) translateY(20px);
	}
	66% {
		transform: translateX(-20px) translateY(10px);
	}
}

@keyframes blob3 {
	0%,
	100% {
		transform: translateX(-50%) scale(1);
	}
	50% {
		transform: translateX(-40%) scale(1.1);
	}
}

@keyframes blob4 {
	0%,
	100% {
		transform: translateX(0) translateY(0);
	}
	50% {
		transform: translateX(-15px) translateY(-20px);
	}
}

@keyframes slideIn {
	from {
		transform: translateX(var(--slide-from));
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOut {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(var(--slide-to));
		opacity: 0;
	}
}

@keyframes border-glow-rotate {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 200% 0%;
	}
}

@layer utilities {
	.animate-custom-pulse {
		animation: custom-pulse 1s ease-in-out infinite;
	}

	.scrollbar-hide::-webkit-scrollbar {
		display: none;
	}
}

/* Revert to component defaults; no global background override for inputs */
