:root {
	--kb-color-background: #120c28;
	--kb-color-surface: #191230;
	--kb-color-surface-soft: #20183c;
	--kb-color-text: #f6f4ff;
	--kb-color-muted: #c0c0d0;
	--kb-color-accent: #8fe1d1;
	--kb-color-accent-strong: #f5c15c;
	--kb-border-subtle: rgba(192, 192, 208, 0.18);
	--kb-shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.28);
	--kb-radius-small: 8px;
	--kb-radius-medium: 12px;
	--kb-content-width: 1180px;
}

body {
	background: var(--kb-color-background);
	color: var(--kb-color-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	text-rendering: optimizeLegibility;
}

a {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--kb-color-accent);
}

::selection {
	background: var(--kb-color-accent);
	color: #120c28;
}

.kb-site-shell {
	background: var(--kb-color-background);
	color: var(--kb-color-text);
	min-height: 100vh;
}

.kb-container {
	inline-size: min(100% - 32px, var(--kb-content-width));
	margin-inline: auto;
}

.kb-muted {
	color: var(--kb-color-muted);
}

.kb-surface {
	background: var(--kb-color-surface);
	border: 1px solid var(--kb-border-subtle);
	border-radius: var(--kb-radius-small);
	box-shadow: var(--kb-shadow-soft);
}

.kb-button {
	align-items: center;
	background: var(--kb-color-text);
	border: 1px solid transparent;
	border-radius: var(--kb-radius-small);
	color: var(--kb-color-background);
	display: inline-flex;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1;
	min-height: 44px;
	padding: 0 18px;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.kb-button:hover,
.kb-button:focus {
	background: var(--kb-color-accent);
	color: var(--kb-color-background);
	transform: translateY(-1px);
}

.kb-button--ghost {
	background: transparent;
	border-color: var(--kb-border-subtle);
	color: var(--kb-color-text);
}

.kb-button--ghost:hover,
.kb-button--ghost:focus {
	background: var(--kb-color-surface-soft);
	border-color: rgba(192, 192, 208, 0.34);
	color: var(--kb-color-text);
}

@media (max-width: 767px) {
	.kb-container {
		inline-size: min(100% - 24px, var(--kb-content-width));
	}
}