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

:root {
	--vct-accent: #048ba8;
	--vct-accent-strong: color-mix(in srgb, var(--vct-accent) 68%, black);
	--vct-accent-soft: color-mix(in srgb, var(--vct-accent) 10%, white);
	--vct-accent-faint: color-mix(in srgb, var(--vct-accent) 5%, white);
	--vct-accent-ring: color-mix(in srgb, var(--vct-accent) 22%, transparent);
	--vct-accent-ring-soft: color-mix(in srgb, var(--vct-accent) 16%, transparent);
	--vct-accent-border: color-mix(in srgb, var(--vct-accent) 24%, white);
	--vct-bg: color-mix(in srgb, var(--vct-accent) 6%, white);
	--vct-surface: #ffffff;
	--vct-surface-alt: color-mix(in srgb, var(--vct-accent) 4%, white);
	--vct-border: color-mix(in srgb, var(--vct-accent) 14%, white);
	--vct-border-strong: color-mix(in srgb, var(--vct-accent) 24%, white);
	--vct-text: color-mix(in srgb, var(--vct-accent) 22%, black);
	--vct-text-muted: color-mix(in srgb, var(--vct-text) 58%, white);
	--vct-danger: #9f2f2f;
	--vct-danger-soft: #fff1f1;
	--vct-danger-border: #f1bdbd;
	--vct-success: #17603f;
	--vct-success-soft: #eef9f1;
	--vct-success-border: #b7dec4;
	--vct-shadow: 0 10px 30px rgba(29, 42, 34, 0.06);
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Helvetica, Arial, sans-serif;
	background:
		radial-gradient(circle at top left, var(--vct-accent-ring), transparent 26%),
		linear-gradient(180deg, var(--vct-accent-faint) 0%, var(--vct-bg) 100%);
	color: var(--vct-text);
}

[hidden] {
	display: none !important;
}

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

.skip-link {
	position: absolute;
	left: 12px;
	top: -44px;
	background: var(--vct-text);
	color: #ffffff;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 0.85rem;
	z-index: 1000;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 12px;
}

/* Code styling */
code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
	background: color-mix(in srgb, var(--vct-accent) 8%, white);
	padding: 2px 4px;
	border-radius: 4px;
	font-size: 0.85em;
}