@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

/* Dark mode configuration */
@variant dark (&:where(.dark, .dark *));

/* Theme color utilities using CSS variables */
@theme {
	--color-theme-primary: var(--theme-primary);
	--color-theme-primary-hover: var(--theme-primary-hover);
	--color-theme-background: var(--theme-background);
	--color-theme-surface: var(--theme-surface);
	--color-theme-surface-hover: var(--theme-surface-hover);
	--color-theme-text: var(--theme-text);
	--color-theme-text-muted: var(--theme-text-muted);
	--color-theme-border: var(--theme-border);
	--color-theme-accent: var(--theme-accent);
	--color-theme-accent-hover: var(--theme-accent-hover);
}

/* Theme CSS Variables - will be overridden by theme presets */
:root {
	--theme-primary: #171717;
	--theme-primary-hover: #0a0a0a;
	--theme-background: #fafafa;
	--theme-surface: #ffffff;
	--theme-surface-hover: #f5f5f5;
	--theme-text: #171717;
	--theme-text-muted: #737373;
	--theme-border: #e5e5e5;
	--theme-accent: #525252;
	--theme-accent-hover: #404040;
	--theme-font-family: Inter, system-ui, -apple-system, sans-serif;

	/* Sonner Toast Styling - Light Mode */
	--sonner-toast-gap: 8px;
	--sonner-toast-padding: 16px;
	--sonner-toast-border-radius: 12px;
	--sonner-toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Apply theme font to body */
body {
	font-family: var(--theme-font-family);
}

/* Theme transition animation */
.theme-transitioning,
.theme-transitioning * {
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease,
		fill 0.3s ease,
		stroke 0.3s ease,
		font-family 0.3s ease !important;
}

/* Ensure full viewport coverage */
html,
body {
	@apply min-h-screen;
}

body {
	font-family: var(--theme-font-family);
	background-color: var(--theme-background);
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.animate-fade-in {
	animation: fade-in 0.3s ease-out;
}

.animate-spin {
	animation: spin 1s linear infinite;
}

/* Primary button class with proper contrast */
.btn-primary {
	@apply bg-theme-primary text-theme-background hover:bg-theme-primary-hover;
}

/* Sonner Toast Custom Styles */
.sonner-toast {
	font-family: var(--theme-font-family) !important;
}

.sonner-toast[data-type='success'] {
	background-color: #10b981 !important;
	color: white !important;
	border: 1px solid #059669 !important;
}

.sonner-toast[data-type='error'] {
	background-color: #ef4444 !important;
	color: white !important;
	border: 1px solid #dc2626 !important;
}

.sonner-toast[data-type='info'] {
	background-color: #3b82f6 !important;
	color: white !important;
	border: 1px solid #2563eb !important;
}

.sonner-toast[data-type='warning'] {
	background-color: #f59e0b !important;
	color: white !important;
	border: 1px solid #d97706 !important;
}

/* Dark mode toast styles */
.dark .sonner-toast {
	background-color: #374151 !important;
	color: #f3f4f6 !important;
	border: 1px solid #4b5563 !important;
}

.dark .sonner-toast[data-type='success'] {
	background-color: #065f46 !important;
	color: #d1fae5 !important;
	border: 1px solid #10b981 !important;
}

.dark .sonner-toast[data-type='error'] {
	background-color: #7f1d1d !important;
	color: #fee2e2 !important;
	border: 1px solid #ef4444 !important;
}

.dark .sonner-toast[data-type='info'] {
	background-color: #1e3a8a !important;
	color: #dbeafe !important;
	border: 1px solid #3b82f6 !important;
}

.dark .sonner-toast[data-type='warning'] {
	background-color: #78350f !important;
	color: #fef3c7 !important;
	border: 1px solid #f59e0b !important;
}