@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 224 71.4% 4.1%;
		--card: 0 0% 100%;
		--card-foreground: 224 71.4% 4.1%;
		--popover: 0 0% 100%;
		--popover-foreground: 224 71.4% 4.1%;
		--primary: 262.1 83.3% 57.8%;
		--primary-foreground: 210 20% 98%;
		--secondary: 220 14.3% 95.9%;
		--secondary-foreground: 220.9 39.3% 11%;
		--muted: 220 14.3% 95.9%;
		--muted-foreground: 220 8.9% 46.1%;
		--accent: 220 14.3% 95.9%;
		--accent-foreground: 220.9 39.3% 11%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 210 20% 98%;
		--border: 220 13% 91%;
		--input: 220 13% 91%;
		--ring: 262.1 83.3% 57.8%;
		--radius: 0.3rem;
		--chart-1: 12 76% 61%;
		--chart-2: 173 58% 39%;
		--chart-3: 197 37% 24%;
		--chart-4: 43 74% 66%;
		--chart-5: 27 87% 67%;
	}

	.dark {
		--background: 224 71.4% 4.1%;
		--foreground: 210 20% 98%;
		--card: 224 71.4% 4.1%;
		--card-foreground: 210 20% 98%;
		--popover: 224 71.4% 4.1%;
		--popover-foreground: 210 20% 98%;
		--primary: 263.4 70% 50.4%;
		--primary-foreground: 210 20% 98%;
		--secondary: 215 27.9% 16.9%;
		--secondary-foreground: 210 20% 98%;
		--muted: 215 27.9% 16.9%;
		--muted-foreground: 217.9 10.6% 64.9%;
		--accent: 215 27.9% 16.9%;
		--accent-foreground: 210 20% 98%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 210 20% 98%;
		--border: 215 27.9% 16.9%;
		--input: 215 27.9% 16.9%;
		--ring: 263.4 70% 50.4%;
		--chart-1: 220 70% 50%;
		--chart-2: 160 60% 45%;
		--chart-3: 30 80% 55%;
		--chart-4: 280 65% 60%;
		--chart-5: 340 75% 55%;
	}
}

@layer base {
	:root {
		--sidebar-background: 0 0% 98%;
		--sidebar-foreground: 240 5.3% 26.1%;
		--sidebar-primary: 240 5.9% 10%;
		--sidebar-primary-foreground: 0 0% 98%;
		--sidebar-accent: 240 4.8% 95.9%;
		--sidebar-accent-foreground: 240 5.9% 10%;
		--sidebar-border: 220 13% 91%;
		--sidebar-ring: 217.2 91.2% 59.8%;
	}

	.dark {
		--sidebar-background: 240 5.9% 10%;
		--sidebar-foreground: 240 4.8% 95.9%;
		--sidebar-primary: 224.3 76.3% 48%;
		--sidebar-primary-foreground: 0 0% 100%;
		--sidebar-accent: 240 3.7% 15.9%;
		--sidebar-accent-foreground: 240 4.8% 95.9%;
		--sidebar-border: 240 3.7% 15.9%;
		--sidebar-ring: 217.2 91.2% 59.8%;
	}
}

@layer components {
	.btn-primary {
		@apply inline-flex justify-center items-center px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
	}

	.btn-secondary {
		@apply inline-flex justify-center items-center px-4 py-2 text-sm font-medium rounded-md bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
	}

	/* .input {
		@apply flex px-3 py-2 w-full h-10 text-sm rounded-md border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
	} */

	.card {
		@apply rounded-lg border shadow-sm bg-card text-card-foreground;
	}
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	@apply bg-secondary;
}

::-webkit-scrollbar-thumb {
	@apply rounded-full bg-muted-foreground/30;
}

::-webkit-scrollbar-thumb:hover {
	@apply bg-muted-foreground/50;
}

input:-webkit-autofill {
	box-shadow: 0 0 0px 1000px hsl(var(--background)) inset;
	-webkit-text-fill-color: hsl(var(--foreground));
}

input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
	box-shadow: 0 0 0px 1000px hsl(var(--background)) inset;
	-webkit-text-fill-color: hsl(var(--foreground));
}

*,
body {
	font-family: "Inter", sans-serif;
}

/* Add to your existing CSS */
.workflow-summary-card {
	@apply transition-all duration-200 ease-in-out;
}

.workflow-summary-card:hover {
	@apply bg-primary;
}

.workflow-summary-card:hover * {
	@apply text-primary-foreground;
}
