<script>
    import "$lib/global.css";
	import favicon from '$lib/assets/favicon.png';
	import Toaster from '$lib/components/Toaster.svelte';

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

<svelte:head>
	<link rel="icon" href={favicon} />
	<title>ChatRPG — AI-Powered Text RPG Adventures</title>
</svelte:head>

<Toaster />
{@render children()}

<style>
	:global(html) {
		scroll-behavior: smooth;
	}
	:global(body) {
		margin: 0;
		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		background: #0b0b10;
		color: #e5e5ea;
		line-height: 1.6;
	}
	:global(*) {
		box-sizing: border-box;
	}
	:global(h1, h2, h3) {
		font-weight: 700;
		line-height: 1.1;
		margin: 0;
	}

	/* Base reusable styles shared across components */
	:global(.container) {
		max-width: 1080px;
		margin: 0 auto;
		padding: 0 24px;
	}
	:global(.section) {
		padding: 100px 0;
	}
	:global(.section-alt) {
		background: #121218;
	}
	:global(.section-header) {
		text-align: center;
		max-width: 620px;
		margin: 0 auto 56px;
	}
	:global(.section-header .eyebrow) {
		font-size: 13px;
		letter-spacing: 2px;
		font-weight: 600;
		text-transform: uppercase;
		color: #c084fc;
		margin-bottom: 12px;
	}
	:global(.section-header h2) {
		font-size: clamp(2rem, 5vw, 2.8rem);
		margin-bottom: 16px;
	}
	:global(.section-header p) {
		font-size: 1.1rem;
		color: #a1a1aa;
		margin: 0;
	}

	/* Buttons */
	:global(.btn) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-weight: 600;
		font-size: 15px;
		padding: 10px 22px;
		border-radius: 10px;
		border: 1px solid transparent;
		cursor: pointer;
		transition: all 0.15s ease;
		text-decoration: none;
		white-space: nowrap;
	}
	:global(.btn.large) {
		padding: 14px 28px;
		font-size: 16px;
	}
	:global(.btn.full) {
		width: 100%;
	}
	:global(.btn-primary) {
		background: #c084fc;
		color: #0b0b10;
		border-color: #c084fc;
	}
	:global(.btn-primary:hover) {
		background: #d8b4fe;
		transform: translateY(-1px);
	}
	:global(.btn-secondary) {
		background: transparent;
		color: #e5e5ea;
		border-color: #3f3f4a;
	}
	:global(.btn-secondary:hover) {
		border-color: #c084fc;
		color: #c084fc;
	}

	:global(.accent) {
		background: linear-gradient(90deg, #c084fc, #f0abfc);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	/* Logo base (used in nav + footer) */
	:global(.logo) {
		display: flex;
		align-items: center;
		gap: 10px;
		cursor: pointer;
		font-weight: 700;
		font-size: 21px;
	}
	:global(.logo-icon) {
		width: 28px;
		height: 28px;
		color: #c084fc;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	:global(.logo-text) {
		letter-spacing: -0.5px;
	}

	/* Responsive base adjustments (shared) */
	@media (max-width: 700px) {
		:global(.section) {
			padding: 70px 0;
		}
		:global(.pricing-card) {
			padding: 34px 24px;
		}
		:global(.price) {
			font-size: 3.4rem;
		}
		:global(.footer-inner) {
			flex-direction: column;
			align-items: flex-start;
			text-align: left;
		}
		:global(.footer-links) {
			flex-direction: column;
			gap: 8px;
		}
		:global(.footer-right) {
			text-align: left;
			margin-top: 20px;
		}
	}
	@media (max-width: 500px) {
		:global(.container) {
			padding: 0 18px;
		}
	}
</style>
