@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
	--ink: #111311;
	--parchment: #f2efdf;
	--lime: #b8ff32;
	--muted-ink: #252b22;
}

@theme {
	--color-ink: var(--ink);
	--color-parchment: var(--parchment);
	--color-lime: var(--lime);
	--font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "DM Mono", ui-monospace, SFMono-Regular, monospace;
}

html {
	background: var(--ink);
}
body {
	color: var(--parchment);
	font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
code,
.font-mono {
	font-family: "DM Mono", ui-monospace, SFMono-Regular, monospace;
}
.grain {
	background-image: radial-gradient(
		rgba(242, 239, 223, 0.14) 0.7px,
		transparent 0.7px
	);
	background-size: 7px 7px;
	mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.progress-rail {
	height: 7px;
	background: rgba(17, 19, 17, 0.15);
	overflow: hidden;
}
.progress-fill {
	display: block;
	height: 100%;
	background: var(--lime);
	transition: width 0.35s ease;
}
.focus-ring:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 2px;
}
input[type="checkbox"] {
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid rgba(242, 239, 223, 0.38);
	display: inline-grid;
	place-content: center;
	flex: 0 0 auto;
}
input[type="checkbox"]::before {
	content: "";
	width: 0.65rem;
	height: 0.65rem;
	transform: scale(0);
	background: var(--lime);
	transition: transform 0.12s ease;
}
input[type="checkbox"]:checked {
	border-color: var(--lime);
}
input[type="checkbox"]:checked::before {
	transform: scale(1);
}
svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
	}
}