---
interface Props {
	title: string;
	description?: string;
}

const { title, description = 'NutriPhi - KI-gestützte Ernährungsanalyse per Foto' } = Astro.props;
---

<!doctype html>
<html lang="de">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content={description} />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>{title}</title>

		<!-- Open Graph -->
		<meta property="og:title" content={title} />
		<meta property="og:description" content={description} />
		<meta property="og:type" content="website" />

		<!-- Theme Color -->
		<meta name="theme-color" content="#22C55E" />
	</head>
	<body class="bg-[#0F1F0F] text-gray-100 antialiased">
		<slot />
	</body>
</html>

<style is:global>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

	html {
		font-family: 'Inter', system-ui, sans-serif;
		scroll-behavior: smooth;
	}

	body {
		min-height: 100vh;
	}
</style>
