@import "tailwindcss";


:root {
	--background: #f9fafb;
	--foreground: #111827;
	--font-dm-sans: "DM Sans", sans-serif;
	--font-playfair: "Playfair Display", serif;
}

@theme inline {
	--color-background: var(--background);
	--color-foreground: var(--foreground);

	/* Link Tailwind to the Next.js Font Variables */
	--font-sans: var(--font-dm-sans), ui-sans-serif, system-ui;
	--font-serif: var(--font-playfair), ui-serif, Georgia;
}

body {
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

/* --- Animations --- */

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

@keyframes shimmer {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

@keyframes pulse-dot {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
}

.animate-fade-up {
	animation: fadeUp 0.45s ease both;
}

.skeleton {
	background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
	background-size: 200% 100%;
	animation: shimmer 1.4s infinite;
	border-radius: 8px;
}