@layer reset, base, layout, components;

/* smooth page transitions between server-rendered pages, no JS involved */
@view-transition {
	navigation: auto;
}

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

	body,
	h1,
	h2,
	h3,
	p,
	figure {
		margin: 0;
	}

	img,
	picture,
	video {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}

		@view-transition {
			navigation: none;
		}
	}
}

@layer base {
	:root {
		color-scheme: dark;

		--color-background: #25303B;
		--color-foreground: #dfd9cf;

		--font-body: Georgia, "Times New Roman", serif;

		--step-0: clamp(1rem, 0.95rem + 0.25vi, 1.125rem);
		--step-3: clamp(2rem, 1.6rem + 2vi, 3.5rem);

		--space-m: clamp(1rem, 0.8rem + 1vi, 1.5rem);
		--space-xl: clamp(3rem, 2.4rem + 3vi, 5rem);
	}

	html {
		-webkit-text-size-adjust: none;
	}

	body {
		background: var(--color-background);
		color: var(--color-foreground);
		font-family: var(--font-body);
		font-size: var(--step-0);
		line-height: 1.6;
		text-rendering: optimizeLegibility;
	}

	h1 {
		font-size: var(--step-3);
		line-height: 1.1;
		text-wrap: balance;
	}

	p {
		text-wrap: pretty;
	}

	:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 3px;
	}
}

@layer layout {
	main {
		min-block-size: 100svb;
		display: grid;
		place-items: center;
		padding-inline: var(--space-m);
		padding-block: var(--space-xl);
	}
}

@layer components {
	/* Komponenten folgen, sobald die Inhalte da sind. */
}