html {
	background-color: var(--color-bg);
	color: var(--color-text);
	color-scheme: dark;
	font-family: var(--font-body);
}

body {
	font-size: 1.0625rem;
	line-height: 1.65;
}

h1,
h2,
h3,
h4 {
	color: var(--color-text);
	font-family: var(--font-heading);
}

h1,
h2 {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

h3 {
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.35;
}

h4 {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
}

@media (min-width: 48rem) {
	h1 {
		font-size: 2.5rem;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: -0.015em;
	}
}

a {
	color: var(--color-primary);
	transition: color var(--transition);
}

a:hover {
	color: var(--color-primary-soft);
}

strong {
	font-weight: 600;
}

code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
}

:not(pre) > code {
	padding: 0.1em 0.35em;
	background-color: var(--color-surface-lowest);
	border-radius: var(--radius-md);
	font-size: 0.88em;
}

::selection {
	background-color: var(--color-primary-strong);
	color: var(--color-on-primary-strong);
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}