@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@config "../../tailwind.config";

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 240 10% 3.9%;
		--card: 0 0% 100%;
		--card-foreground: 240 10% 3.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 240 10% 3.9%;
		--primary: 240 5.9% 10%;
		--primary-foreground: 0 0% 98%;
		--secondary: 240 4.8% 95.9%;
		--secondary-foreground: 240 5.9% 10%;
		--muted: 240 4.8% 95.9%;
		--muted-foreground: 240 3.8% 46.1%;
		--accent: 240 4.8% 95.9%;
		--accent-foreground: 240 5.9% 10%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 0 0% 98%;
		--border: 240 5.9% 90%;
		--input: 240 5.9% 90%;
		--ring: 240 10% 3.9%;
		--radius: 0.5rem;
	}

	body {
		@apply bg-background text-foreground font-sans;
		font-family: 'Inter', sans-serif;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: 'Playfair Display', serif;
	}

	#logo {
		font-family: 'Dancing Script', cursive;
	}
}

@layer components {
	.container-custom {
		@apply max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8;
	}

	.nav-link {
		@apply relative text-base font-medium text-gray-800 transition-all duration-300 hover:text-black;
	}

	.nav-link::after {
		@apply content-[''] absolute w-0 h-[1px] bg-black bottom-[-2px] left-0 transition-all duration-300 ease-in-out;
	}

	.nav-link:hover::after {
		@apply w-full;
	}
}
