@font-face {
	font-family: "Geist";
	src: url("../assets/fonts/Geist[wght].woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Geist Mono";
	src: url("../assets/fonts/GeistMono[wght].woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@layer reset {
	/* stuff goes here */

	:root {
		color-scheme: light dark; /* Required! */
		--color-1: oklch(0.213 0 0);
		--color-2: oklch(0.239 0 0);
		--color-3: oklch(0.281 0 0);
		--color-4: oklch(0.301 0 0);
		--color-5: oklch(0.39 0 0);
		--color-6: oklch(0.623 0 0);
		--color-7: oklch(0.65 0 0);
		--color-8: oklch(0.59 0 0);
		--color-9: oklch(0.706 0 0);
		--color-10: oklch(0.946 0 0);
		background-color: light-dark(var(--color-10), var(--color-1));
	}

	/* 1. Use a more-intuitive box-sizing model */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* 2. Remove default margin */
	* {
		margin: 0;
	}

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

	body {
		/* 4. Add accessible line-height */
		line-height: 1.5;
		/* 5. Improve text rendering */
		-webkit-font-smoothing: antialiased;
		font-family: system-ui, sans-serif;
		background-color: light-dark(var(--color-10), var(--color-1));
		hanging-punctuation: first allow-end last;
		font-size: clamp(1rem, 1rem + 0.5vw, 2rem);
	}

	html.translated-rtl {
		direction: rtl;
	}

	/* 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;
	}

	:heading {
		text-wrap: balance;
		font-family: "Geist", ui-rounded, sans-serif;
	}

	/* 8. Avoid text overflows */
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
		font-family: "Geist", ui-sans-serif, sans-serif;
		font-optical-sizing: auto;
	}

	/* 9. Improve line wrapping */
	p {
		text-wrap: pretty;
	}
	/*h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		text-wrap: balance;
		font-family: "Geist", ui-rounded, sans-serif;
	}*/

	ul,
	ol,
	dl {
		list-style-position: inside;

		ul,
		ol,
		dl {
			padding-inline-start: 1lh;
		}
	}

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

	pre,
	code {
		font-family: "Geist Mono", ui-monospace, monospace;
	}

	:where(div, article, header, footer) {
		/* ...and other block elements */
		display: flex;
		flex-direction: column;
	}
}