<script lang="ts">
	import favicon from '$lib/assets/favicon.svg';
	import InstallPrompt from './components/InstallPrompt.svelte';
	import { onMount } from 'svelte';
	import './layout.css';
	
	let { children } = $props();

	onMount(() => {
		const root = document.getElementById('ic-root');
		if (!root) return;
		const mq = window.matchMedia('(prefers-color-scheme: dark)');
		root.setAttribute('data-theme', mq.matches ? 'dark' : 'light');
		const handler = (e: MediaQueryListEvent) => {
			root.setAttribute('data-theme', e.matches ? 'dark' : 'light');
		};
		mq.addEventListener('change', handler);
		return () => mq.removeEventListener('change', handler);
	});
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
	<link
		href="https://fonts.googleapis.com/css2?family=Lilita+One&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
		rel="stylesheet"
	/>
</svelte:head>

<div class="ic-root" data-theme="light" id="ic-root">
	{@render children()}
</div>

<!-- PWA Install Prompt -->
<InstallPrompt />

