/* style.css */

:root {
	--background: #f3f2ed;
	--text: #161616;
	--muted-text: #5f5f5f;
	--accent: #1d4ed8;
	--accent-hover: #173da8;
}

* {
	box-sizing: border-box;
}

body {
	max-width: 760px;
	margin: 0 auto;
	padding: 18vh 32px 64px;

	background-color: var(--background);
	color: var(--text);

	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

h1 {
	max-width: 650px;
	margin: 0 0 24px;

	font-size: clamp(2.6rem, 7vw, 5rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.045em;
}

p {
	max-width: 520px;
	margin: 0 0 32px;

	color: var(--muted-text);
	font-size: 1.1rem;
}

button {
	padding: 12px 20px;
	border: 2px solid var(--text);
	border-radius: 0;

	background-color: transparent;
	color: var(--text);

	font: inherit;
	font-size: 1rem;
	font-weight: 600;

	cursor: pointer;
	transition:
		background-color 150ms ease,
		color 150ms ease,
		transform 150ms ease;
}

button:hover {
	background-color: var(--text);
	color: var(--background);
	transform: translateY(-2px);
}

button:active {
	transform: translateY(0);
}

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

button:disabled {
	border-color: #a1a19d;
	background-color: #deddd8;
	color: #73736f;
	cursor: not-allowed;
	transform: none;
}

button:disabled:hover {
	background-color: #deddd8;
	color: #73736f;
	transform: none;
}


@media (max-width: 600px) {
	body {
		padding: 14vh 20px 48px;
	}

	h1 {
		font-size: 3rem;
	}
}