@layer base {
	body {
		font-family: var(--font-sans);
		font-size: var(--text-base);
		line-height: var(--leading-normal);
		color: var(--color-text);
		background-color: var(--color-bg);
	}

	h1 {
		font-size: var(--text-3xl);
		line-height: var(--leading-tight);
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	h2 {
		font-size: var(--text-2xl);
		line-height: var(--leading-tight);
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	h3 {
		font-size: var(--text-xl);
		line-height: var(--leading-tight);
		font-weight: 600;
	}

	h4 {
		font-size: var(--text-lg);
		font-weight: 600;
	}

	a {
		transition: color var(--transition-fast);

		&:hover {
			color: var(--color-accent);
		}
	}
}