@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';
@config '../tailwind.config.js';

/* Import theme CSS variables */
@import '$lib/themes/themes.css';

/* Define custom utilities for theme colors */
@layer utilities {
	.bg-theme-base {
		background-color: var(--theme-background-base);
	}
	.bg-theme-surface {
		background-color: var(--theme-background-surface);
	}
	.bg-theme-elevated {
		background-color: var(--theme-background-elevated);
	}
	.bg-theme-overlay {
		background-color: var(--theme-background-overlay);
	}
	.bg-theme-subtle {
		background-color: var(--theme-background-subtle, var(--theme-background-elevated));
	}
}

/* Apply theme background colors using CSS variables */
html,
body {
	background-color: var(--theme-background-base);
	color: var(--theme-text-primary);
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}