<script lang="ts">
	import Header from '$lib/components/header.svelte';
	import '$lib/state/theme/theme.svelte';
  import '$lib/state/theme/theme.css';
	import '../styles/global.css';

	let { children } = $props();
</script>

<svelte:head>
  <script>
    window.__theme = {
      setTheme: (theme) => {
        document.body.style.cssText = theme;
      }
    }
  </script>
</svelte:head>

<div class="wrapper">
	<Header />
	<main>
		{@render children()}
	</main>
</div>

<style>
	main {
		padding: 1rem;
	}

  :global(body) {
    background: var(--color-background);
    color: var(--color-foreground);
  }
</style>
