---
import '../styles/global.css';

export interface Props {
	title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html
	lang="en"
	class="no-js box-border scroll-smooth bg-shibui-100 text-[125%] text-shibui-950 dark:bg-shibui-900 dark:text-shibui-200/[0.87]"
>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />

		<title>{title}</title>

		<script type="module">
			document.documentElement.classList.remove('no-js');
			document.documentElement.classList.add('js');
		</script>

		<link rel="icon" href="/favicon.ico" sizes="any" />
		<link rel="icon" href="/assets/images/branding/favicons/favicon.svg" type="image/svg+xml" />
		<link rel="apple-touch-icon" href="/assets/images/branding/favicons/apple-touch-icon.png" />
		<link rel="manifest" href="/manifest.webmanifest" />

		<link
			rel="preload"
			href="/assets/fonts/secuela-regular-vf.woff2"
			as="font"
			type="font/woff2"
			crossorigin
		/>
		<link
			rel="preload"
			href="/assets/fonts/secuela-italic-vf.woff2"
			as="font"
			type="font/woff2"
			crossorigin
		/>
	</head>
	<body class="flex h-screen flex-col font-sans font-normal leading-relaxed">
		<slot />
	</body>
</html>
