@layer reset, base, components, pages;

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

	button, input, textarea, select {
		font: inherit;
	}
}

@layer base {
	:root {
		/* COLOR */
		color-scheme: light;

		--color-background: #f5f7fa;
		--color-surface: #ffffff;
		--color-surface-hover: #edf3fd;

		--color-text: #181a1c;
		--color-text-muted: #636769;

		--color-accent: #0340b2;
		--color-accent-strong: #022b76;
		--color-border: #dce2e9;

		--shadow-navigation: 0 0.25rem 0.75rem rgb(1 21 59 / 4%), 0 1rem 2.5rem rgb(1 21 59 / 8%);

		/* TYPOGRAPHY */
		--font-size-small: 0.875rem;
		--font-size-body: 1rem;
		--font-size-lead: 1.0625rem;

		--font-size-h1: clamp(2rem, 8vw, 3rem);
		--font-size-h2: 1.65rem;
		--font-size-h3: 1.4rem;

		--line-height-body: 1.65;
		--line-height-heading: 1.2;
		font-family: system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

		/* MISC */
		--page-gutter: clamp(1rem, 4vw, 3rem);
		--navigation-offset: 1rem;
		--navigation-clearance: 8rem;

		line-height: 1.5;
	}

	html {
		scroll-padding-block: var(--navigation-clearance);
		background-color: var(--color-background);
		scroll-behavior: smooth;
		overscroll-behavior: none;
	}

	body {
		min-block-size: 100svh;
		color: var(--color-text);
		background: var(--color-background);
		font-size: var(--font-size-body);
		line-height: var(--line-height-body);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--color-text);
		font-weight: 700;
		line-height: var(--line-height-heading);
		text-wrap: balance;
		overflow-wrap: break-word;
	}

	h1 {
		font-size: var(--font-size-h1);
		line-height: 1.12;
		letter-spacing: -0.035em;
	}

	h2 {
		font-size: var(--font-size-h2);
		letter-spacing: -0.025em;
	}

	h3 {
		font-size: var(--font-size-h3);
		letter-spacing: -0.02em;
	}

	p {
		color: var(--color-text-muted);
	}

	a {
		color: var(--color-accent);
		text-underline-offset: 0.2em;
		text-decoration-thickness: 1px;
		-webkit-tap-highlight-color: transparent;
	}

	a:focus-visible,
	button:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 4px;
	}

	address {
		font-style: normal;
	}

	#main-content {
		max-inline-size: 75rem;
		margin-inline: auto;

		padding-inline: var(--page-gutter);
		padding-block-start: var(--page-gutter);
		padding-block-end: 0;
	}

	@media (width >= 48rem) {
		#main-content {
			padding-block-start: calc(var(--navigation-clearance) + env(safe-area-inset-top, 0px));
			padding-block: 0 2rem;
		}
	}
}