:root {
	--dk-color-bg: #091315;
	--dk-color-surface: #101b1e;
	--dk-color-surface-raised: #1b2b2c;
	--dk-color-border: #2a3b3b;
	--dk-color-text: #f3f7f4;
	--dk-color-muted: #a9bdbc;
	--dk-color-accent: #8bf24a;
	--dk-color-accent-contrast: #10200d;
	--dk-color-warning: #f5c451;
	--dk-color-danger: #ff777b;
	--dk-radius-card: 16px;
	--dk-space-card: 1.15rem;
	--dk-shadow-card: 0 12px 34px rgba(0, 0, 0, .18);
}

.dk-card {
	border: 1px solid var(--dk-color-border);
	border-radius: var(--dk-radius-card);
	background: var(--dk-color-surface);
	box-shadow: var(--dk-shadow-card);
	color: var(--dk-color-text);
}

.dk-button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .65rem .9rem;
	border: 1px solid var(--dk-color-border);
	border-radius: .7rem;
	color: var(--dk-color-text);
	font-weight: 700;
	text-decoration: none;
}

.dk-button:focus-visible,
.dk-card a:focus-visible {
	outline: 3px solid var(--dk-color-accent);
	outline-offset: 3px;
}