:root {
	--bg: #efe8dd;
	--bg-glow: #ffd9b5;
	--panel: #fffaf2;
	--panel-2: #fff6eb;
	--ink: #1d1815;
	--muted: #6d6256;
	--line: #d8cbbb;
	--line-strong: #cbb9a3;
	--accent: #f35a2f;
	--accent-ink: #fff7f1;
	--danger: #c7442f;
	--success: #2f875d;
	--shadow: 0 10px 30px rgba(34, 20, 7, 0.08);
	--radius-xl: 20px;
	--radius-lg: 16px;
	--radius-md: 12px;
	--radius-pill: 999px;
	--sidebar-w: 340px;
	--editor-canvas-max-h: 72svh;
	--page-pad-top: max(12px, env(safe-area-inset-top));
	--page-pad-bottom: max(14px, env(safe-area-inset-bottom));
	--page-pad-left: max(12px, env(safe-area-inset-left));
	--page-pad-right: max(12px, env(safe-area-inset-right));
}

:root.theme-dark {
	--bg: #0f1217;
	--bg-glow: #2c1f1a;
	--panel: #181d24;
	--panel-2: #151a20;
	--ink: #eee8df;
	--muted: #afa496;
	--line: #3c444f;
	--line-strong: #4a5462;
	--shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}

* {
	box-sizing: border-box;
}

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

html {
	background:
		radial-gradient(
			circle at 10% -10%,
			var(--bg-glow) 0%,
			rgba(255, 217, 181, 0.18) 38%,
			transparent 62%
		),
		var(--bg);
}

html.theme-dark {
	background:
		radial-gradient(
			circle at 10% -10%,
			rgba(184, 87, 46, 0.18) 0%,
			rgba(184, 87, 46, 0.08) 28%,
			transparent 55%
		),
		var(--bg);
}

body {
	background: transparent;
	color: var(--ink);
	font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
	padding: var(--page-pad-top) var(--page-pad-right) var(--page-pad-bottom) var(--page-pad-left);
}

@media (prefers-color-scheme: dark) {
	html:not(.theme-dark) {
		background:
			radial-gradient(
				circle at 10% -10%,
				rgba(184, 87, 46, 0.18) 0%,
				rgba(184, 87, 46, 0.08) 28%,
				transparent 55%
			),
			#0f1217;
	}
}

button,
select,
input {
	font: inherit;
	color: inherit;
}

button {
	touch-action: manipulation;
}

h1,
h2,
p {
	margin: 0;
}

.hidden {
	display: none !important;
}

.hidden-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}