:root {
	--le-color-primary: #0b66e4;
	--le-color-primary-dark: #084aa9;
	--le-color-secondary: #071b33;
	--le-color-accent: #48b4ff;
	--le-color-heading: #071b33;
	--le-color-body: #26364b;
	--le-color-muted: #607089;
	--le-color-background: #f3f7fb;
	--le-color-surface: #fff;
	--le-color-border: #d9e2ed;
	--le-space-xs: 0.5rem;
	--le-space-sm: 0.875rem;
	--le-space-md: 1.5rem;
	--le-space-lg: 2.5rem;
	--le-space-xl: 4rem;
	--le-space-2xl: 6rem;
	--le-radius-sm: 0.25rem;
	--le-radius-md: 0.75rem;
	--le-radius-lg: 1.25rem;
	--le-container: 76rem;
	--le-container-wide: 88rem;
	--le-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--le-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--le-shadow: 0 1.25rem 3.5rem rgb(7 27 51 / 10%);
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--le-color-body);
	background: var(--le-color-surface);
	font-family: var(--le-font-sans);
	font-size: 1rem;
	line-height: 1.65;
	text-rendering: optimizelegibility;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--le-color-primary);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

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

:focus-visible {
	outline: 3px solid var(--le-color-accent);
	outline-offset: 4px;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.55em;
	color: var(--le-color-heading);
	line-height: 1.12;
	letter-spacing: -0.025em;
}

h1 {
	font-size: clamp(2.25rem, 6vw, 4.75rem);
}

h2 {
	font-size: clamp(1.75rem, 4vw, 3rem);
}

.le-container {
	width: min(calc(100% - 2rem), var(--le-container));
	margin-inline: auto;
}

.le-content-narrow,
.le-prose {
	max-width: 48rem;
}

.le-main {
	min-height: 55vh;
	padding-block: var(--le-space-xl);
}

.le-page-header,
.le-archive-header {
	padding-block: var(--le-space-xl);
	border-bottom: 1px solid var(--le-color-border);
	background: var(--le-color-background);
}

.le-prose > * + * {
	margin-top: var(--le-space-md);
}

@media (prefers-reduced-motion: reduce) {
	html {
	scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
	scroll-behavior: auto !important;
	transition-duration: 0.01ms !important;
	}
}