:root {
	--bg: #eef4ef;
	--panel: rgba(255, 255, 255, 0.82);
	--panel-strong: #f7fbf7;
	--line: #d6e1d8;
	--line-strong: #29483a;
	--text: #16251d;
	--muted: #61756a;
	--accent: #2f6a4f;
	--accent-strong: #214c39;
	--accent-soft: #e3f0e7;
	--accent-soft-2: #d7eadc;
	--accent-inverse: #f7fbf7;
	--chip: #edf5ef;
	--success: #2f6a4f;
	--danger: #a33b3b;
	--shadow: 0 10px 30px rgba(28, 52, 37, 0.04);
	--radius-sm: 6px;
	--radius-md: 10px;
	font-family:
		"Iosevka Aile", "IBM Plex Sans", "Segoe UI", sans-serif;
	color: var(--text);
	background:
		radial-gradient(circle at top left, rgba(117, 167, 128, 0.2), transparent 30%),
		radial-gradient(circle at top right, rgba(77, 134, 95, 0.08), transparent 26%),
		linear-gradient(180deg, #f7faf7 0%, var(--bg) 100%);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	min-width: 320px;
}

body.drawer-open {
	overflow: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea {
	font: inherit;
}

h1,
h2,
p {
	margin: 0;
}

h1 {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1;
	letter-spacing: -0.04em;
}

h2 {
	font-size: 16px;
}

textarea:focus,
.button:focus-visible,
.icon-button:focus-visible,
.nav-drawer-trigger:focus-visible,
.search-box:focus-within,
.editor-shell:focus-within {
	outline: none;
	box-shadow:
		inset 0 0 0 1px rgba(41, 72, 58, 0.1),
		0 0 0 3px rgba(77, 134, 95, 0.14);
}

@media (max-width: 860px) {
	h1 {
		font-size: 28px;
	}
}