<script lang="ts">
	import '../app.css';
	import Header from '$lib/components/Header.svelte';
	import Footer from '$lib/components/Footer.svelte';
	import { page } from '$app/stores';
	import { Toaster } from 'svelte-french-toast';
	import { cart } from '$lib/stores/cart';
	import { onMount } from 'svelte';

	onMount(() => {
		cart.init();
	});
</script>

<svelte:head>
	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</svelte:head>

<div class="min-h-screen" data-theme="pastel-mine">
	<Header />
	<main class:pt-16={$page.url.pathname !== '/'}>
		<slot />
	</main>
	<Footer />
</div>

<Toaster />

<style>
	:global(h1, h2, h3, h4, h5, h6) {
		font-family: 'Playfair Display', serif;
	}

	:global(body) {
		font-family: 'DM Sans', sans-serif;
	}
</style>