@import 'tailwindcss';

@theme {
	--default-transition-duration: 150ms;

	--color-primary: #82aaff;
	--color-accent: #a07ed4;
	--color-background: #0a0e14;
	--color-surface: #111827;

	--shadow-glow: 0 0 10px color-mix(in srgb, var(--color-primary) 60%, transparent 40%);
	--shadow-glow-primary: 0 0 10px color-mix(in srgb, var(--color-primary) 60%, transparent 40%);
	--shadow-glow-accent: 0 0 10px color-mix(in srgb, var(--color-accent) 40%, transparent 60%);
}

/* Enable dark mode by default */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}

/* Custom Glow Effect */
.glow {
	box-shadow: var(--shadow-glow-primary);
}

.glow-accent {
	box-shadow: var(--shadow-glow-accent);
}

html,
body {
	@apply h-full w-full;
	background: radial-gradient(
		ellipse at center bottom,
		color-mix(in srgb, var(--color-background) 70%, var(--color-accent) 15%) 0%,
		color-mix(in srgb, var(--color-background) 80%, var(--color-surface) 20%) 30%,
		var(--color-background) 70%
	);
	background-attachment: fixed;
}
