/*
 * vibe-box hono-htmx-lp template — minimum LP styles。
 *
 * design preset の variables.css / tailwind.css を <head> で先に link すれば、
 * --bg / --fg / --accent / --muted を上書きできる（design preset 側で同名の
 * CSS variable を定義しておくのが慣習）。tailwind.css と併用するときは
 * style.css 側のクラス名は tailwind 命名と衝突しない接頭辞を使う想定。
 */

:root {
	--bg: #ffffff;
	--fg: #111111;
	--accent: #0070f3;
	--muted: #666666;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, sans-serif;
	background: var(--bg);
	color: var(--fg);
	line-height: 1.6;
}

main {
	max-width: 720px;
	margin: 0 auto;
	padding: 4rem 1.5rem;
}

h1 {
	font-size: 2.5rem;
	line-height: 1.2;
	margin-bottom: 1rem;
}

.lead {
	color: var(--muted);
	font-size: 1.125rem;
	margin-bottom: 2rem;
}

.cta {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: var(--accent);
	color: white;
	border-radius: 0.375rem;
	cursor: pointer;
	border: none;
	font-size: 1rem;
}

#cta-result {
	margin-top: 1rem;
	color: var(--muted);
}