@layer hongli.reset, hongli.base;

@layer hongli.reset {
	body.hg-v2-enabled {
		min-width: 20rem;
		margin: 0;
		background: var(--hg-surface);
	}

	.hg-site,
	.hg-site *,
	.hg-site *::before,
	.hg-site *::after {
		box-sizing: border-box;
	}

	.hg-site :where(h1, h2, h3, h4, p, ul, ol, figure) {
		margin-block: 0;
	}

	.hg-site :where(img, picture, video) {
		display: block;
		max-width: 100%;
	}

	.hg-site :where(button, input, select, textarea) {
		font: inherit;
	}
}

@layer hongli.base {
	.hg-site {
		min-width: 20rem;
		color: var(--hg-text);
		background: var(--hg-surface);
		font-family: var(--hg-font-sans);
		font-size: var(--hg-text-md);
		line-height: 1.6;
	}

	.hg-site a {
		color: var(--hg-blue-700);
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.2em;
	}

	.hg-site h1,
	.hg-site h2,
	.hg-site h3,
	.hg-site h4 {
		color: var(--hg-ink-950);
		font-weight: 750;
		line-height: 1.08;
		letter-spacing: -0.03em;
	}

	.hg-site h1 {
		font-size: var(--hg-title-lg);
	}

	.hg-site h2 {
		font-size: var(--hg-title-sm);
	}

	.hg-site p {
		max-width: var(--hg-copy-max);
	}

	.hg-site :focus-visible {
		outline: 0.1875rem solid var(--hg-yellow-500);
		outline-offset: 0.1875rem;
	}
}