@layer reset, base, utils;

@layer utils {
	.flex {
		display: flex;

		&.flex-col {
			flex-direction: column;
		}	
	}
	.grid {
		display: grid;
	}
	.contents {
		display: contents;
	}
	
	.items-center {
		align-items: center;
	}
	.justify-center {
		justify-content: center;
	}
	
	.gap-1 {
		gap: 1rem;
	}
	.gap-0\.5 {
		gap: 0.5rem;
	}
	.gap-0\.25 {
		gap: 0.25rem;
	}
	
	.text-center {
		text-align: center;
	}

	.mi-0\.5 {
		margin-inline: 0.5rem;
	}
	.p-0\.5 {
		padding: 0.5rem;
	}
	.p-1 {
		padding: 1rem;
	}

	.border {
		border: 1px solid var(--clr-bg-dark);
		border-radius: var(--border-radius);
	}

}

@layer base {
	:root {
		--clr-bg: oklch(91.7% 0.08 205.041);
		--clr-bg-dark: oklch(60.9% 0.126 221.723);
		--clr-text: oklch(28.6% 0.016 107.4);
		--clr-text-light: oklch(58% 0.031 107.3);
		--clr-highlight: oklch(64.6% 0.222 41.116);
		--border-radius: 0.5rem;

		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	body {
		background-color: var(--clr-bg);
		color: var(--clr-text);
	}

	button {
		border: none;
		background-color: inherit;
	}
		
	main {
		padding: 1rem;
		margin-inline: auto;

		max-width: 100ch;
	}

	.panel {
		border: 3px solid var(--clr-bg-dark);
		border-radius: var(--border-radius);

		padding: 1rem;
	}
}

@layer reset {
	*, *::before, *::after {
		box-sizing: border-box;
	}

	/* 2. Remove default margin */
	*:not(dialog) {
		margin: 0;
	}

	/* 3. Enable keyword animations */
	@media (prefers-reduced-motion: no-preference) {
		html {
			interpolate-size: allow-keywords;
		}
	}

	body {
		/* 4. Increase line-height */
		line-height: 1.5;
		/* 5. Improve text rendering */
		-webkit-font-smoothing: antialiased;
	}

	/* 6. Improve media defaults */
	img, picture, video, canvas, svg {
		display: block;
		max-width: 100%;
	}

	/* 7. Inherit fonts for form controls */
	input, button, textarea, select {
		font: inherit;
	}

	/* 8. Avoid text overflows */
	p, h1, h2, h3, h4, h5, h6 {
		overflow-wrap: break-word;
	}

	/* 9. Improve line wrapping */
	p {
		text-wrap: pretty;
	}
	h1, h2, h3, h4, h5, h6 {
		text-wrap: balance;
	}

	/*
		10. Create a root stacking context
	*/
	#root, #__next {
		isolation: isolate;
	}
}