:root {
	--background: #ffffff;
	--surface: #f6f6f4;
	--surface-hover: #eeeeeb;
	--text: #171717;
	--content: #475569;
	--title: #2563eb;
	--muted: #666660;
	--border: #d8d8d2;
	--accent: #2563eb;
	--focus: #1769aa;
	color-scheme: light;
	font-family: "Rajdhani", system-ui, sans-serif;
	font-size: 100%;
	line-height: 1.6;
}

:root[data-theme="dark"] {
	--background: #111210;
	--surface: #1a1c19;
	--surface-hover: #242722;
	--text: #f1f1ec;
	--content: #ffffff;
	--title: #658ce0;
	--muted: #b3b3aa;
	--border: #3b3e38;
	--accent: #658ce0;
	--focus: #9bb7f1;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--background: #111210;
		--surface: #1a1c19;
		--surface-hover: #242722;
		--text: #f1f1ec;
		--content: #ffffff;
		--title: #658ce0;
		--muted: #b3b3aa;
		--border: #3b3e38;
		--accent: #658ce0;
		--focus: #9bb7f1;
		color-scheme: dark;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--background);
	color: var(--text);
	font-weight: 500;
}

:root[data-theme="dark"] body {
	background:
		radial-gradient(circle at 12% 0%, rgb(37 99 235 / 10%), transparent 34rem),
		linear-gradient(145deg, #0d0f14 0%, #151821 52%, #0b0d11 100%);
	background-attachment: fixed;
}

:root[data-theme="dark"] button,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea {
	background-color: #171a22;
	border-color: #475569;
}

::placeholder {
	color: var(--muted);
	opacity: 1;
}

::selection {
	background: var(--accent);
	color: #ffffff;
}

body,
button,
input,
textarea,
select {
	font: inherit;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

a:hover {
	text-decoration-thickness: 0.14em;
}

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

button,
input,
textarea {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 0.25rem;
	color: var(--text);
}

button,
input[type="submit"] {
	cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
	background: var(--surface-hover);
}

pre {
	overflow-x: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	background: var(--background);
	color: var(--text);
}