@import 'tailwindcss';
@import 'tw-animate-css';
@import './components.css';

@import './theme.css';

/* Custom grid pattern background */
.grid-pattern {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
	background-size: 50px 50px;
}

.dark .grid-pattern {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 50px 50px;
}

/* Glow effects for interactive elements */
.glow-blue {
	box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.glow-blue-strong {
	box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
}

html.dark .shiki,
html.dark .shiki span {
	color: var(--shiki-dark) !important;
	background-color: transparent !important;
	/* Optional, if you also want font styles */
	font-style: var(--shiki-dark-font-style) !important;
	font-weight: var(--shiki-dark-font-weight) !important;
	text-decoration: var(--shiki-dark-text-decoration) !important;
}

[data-code] pre {
	@apply text-sm bg-transparent/30! backdrop-blur supports-[backdrop-filter]:bg-transparent/30! overflow-auto;
	@apply max-h-96;
}
