:root {
	color-scheme: light dark;
	--st-color-navy-950: #061229;
	--st-color-navy-900: #0a1b3f;
	--st-color-blue-600: #1368e8;
	--st-color-blue-500: #2b7fff;
	--st-color-cyan-400: #37c5ef;
	--st-color-success-500: #26b58c;
	--st-color-warning-500: #f4b942;
	--st-color-danger-500: #e75b64;
	--st-color-canvas: #f5f8fc;
	--st-color-surface: #ffffff;
	--st-color-surface-strong: #edf3fb;
	--st-color-text: #0a1b3f;
	--st-color-muted: #52637e;
	--st-color-border: #d8e1ee;
	--st-color-accent: var(--st-color-blue-600);
	--st-color-accent-strong: #0d52bd;
	--st-color-on-accent: #ffffff;
	--st-color-danger-action: #ae2635;
	--st-color-on-danger: #ffffff;
	--st-color-evidence-predicted: #805ad5;
	--st-color-evidence-radar: var(--st-color-blue-500);
	--st-color-evidence-observed: var(--st-color-warning-500);
	--st-color-evidence-confirmed: var(--st-color-success-500);
	--st-font-sans:
		"Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
		sans-serif;
	--st-font-mono:
		"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "Cascadia Code",
		"Source Code Pro", Menlo, Consolas, monospace;
	--st-radius-sm: 0.5rem;
	--st-radius-md: 0.875rem;
	--st-radius-lg: 1.25rem;
	--st-shadow-card: 0 1rem 2.5rem rgb(23 32 51 / 8%);
	--st-shadow-elevated: 0 1.5rem 4rem rgb(6 18 41 / 14%);
	--st-space-1: 0.25rem;
	--st-space-2: 0.5rem;
	--st-space-3: 0.75rem;
	--st-space-4: 1rem;
	--st-space-6: 1.5rem;
	--st-space-8: 2rem;
	--st-space-12: 3rem;

	/* Shared UI contract. These values mirror the Nimbus/Kumo presentation in
	 * org/apps/developers while remaining implementation-library agnostic. */
	--st-ui-background: var(--st-color-canvas);
	--st-ui-foreground: var(--st-color-text);
	--st-ui-card: var(--st-color-surface);
	--st-ui-card-foreground: var(--st-ui-foreground);
	--st-ui-muted: var(--st-color-surface-strong);
	--st-ui-muted-foreground: var(--st-color-muted);
	--st-ui-accent: var(--st-color-surface-strong);
	--st-ui-accent-foreground: var(--st-ui-foreground);
	--st-ui-surface-sunken: #e5edf8;
	--st-ui-primary: var(--st-color-blue-600);
	--st-ui-primary-foreground: #ffffff;
	--st-ui-primary-hover: #0d52bd;
	--st-ui-border: var(--st-color-border);
	--st-ui-border-strong: #bac8da;
	--st-ui-ring: rgb(19 104 232 / 45%);
	--st-ui-info: oklch(0.45 0.18 255);
	--st-ui-info-muted: oklch(0.965 0.015 255);
	--st-ui-success: oklch(0.42 0.14 152);
	--st-ui-success-muted: oklch(0.965 0.015 152);
	--st-ui-warning: oklch(0.48 0.15 65);
	--st-ui-warning-muted: oklch(0.97 0.02 70);
	--st-ui-danger: oklch(0.47 0.18 25);
	--st-ui-danger-muted: oklch(0.965 0.015 25);
	--st-ui-cyan: oklch(0.46 0.1 210);
	--st-ui-cyan-muted: oklch(0.965 0.02 210);
	--st-ui-orange: oklch(0.55 0.16 48);
	--st-ui-orange-muted: oklch(0.965 0.025 55);
	--st-ui-steel: oklch(0.5 0.05 250);
	--st-ui-steel-muted: oklch(0.955 0.012 250);
	--st-ui-h1-size: 2.1875rem;
	--st-ui-h1-weight: 600;
	--st-ui-h1-tracking: -0.025em;
	--st-ui-h2-size: 1.3rem;
	--st-ui-h2-weight: 600;
	--st-ui-h2-tracking: -0.015em;
	--st-ui-h3-size: 1.1rem;
	--st-ui-h3-weight: 600;
	--st-ui-h3-tracking: -0.01em;
	--st-ui-h4-weight: 600;
	--st-ui-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04);
	--st-ui-shadow: 0 1px 3px oklch(0 0 0 / 0.06),
		0 1px 2px oklch(0 0 0 / 0.04);
	--st-ui-shadow-lg: 0 4px 12px oklch(0 0 0 / 0.08),
		0 2px 4px oklch(0 0 0 / 0.04);
}

[data-theme="light"],
[data-mode="light"] {
	color-scheme: light;
	--st-color-canvas: #f5f8fc;
	--st-color-surface: #ffffff;
	--st-color-surface-strong: #edf3fb;
	--st-color-text: #0a1b3f;
	--st-color-muted: #52637e;
	--st-color-border: #d8e1ee;
	--st-color-accent: var(--st-color-blue-600);
	--st-color-accent-strong: #0d52bd;
	--st-color-on-accent: #ffffff;
	--st-shadow-card: 0 1rem 2.5rem rgb(23 32 51 / 8%);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]):not([data-mode]) {
		--st-color-canvas: #101522;
		--st-color-surface: #13213a;
		--st-color-surface-strong: #1b2d4d;
		--st-color-text: #f4f6fb;
		--st-color-muted: #b5c2d7;
		--st-color-border: #304667;
		--st-color-accent: #66b2ff;
		--st-color-accent-strong: #99ccff;
		--st-color-on-accent: var(--st-color-navy-950);
		--st-shadow-card: 0 1rem 2.5rem rgb(0 0 0 / 25%);
		--st-ui-surface-sunken: #0b1120;
		--st-ui-primary: #66b2ff;
		--st-ui-primary-foreground: var(--st-color-navy-950);
		--st-ui-primary-hover: #99ccff;
		--st-ui-border-strong: #466184;
		--st-ui-ring: rgb(102 178 255 / 50%);
		--st-ui-info: oklch(0.75 0.12 255);
		--st-ui-info-muted: oklch(0.17 0.03 260);
		--st-ui-success: oklch(0.72 0.12 150);
		--st-ui-success-muted: oklch(0.17 0.025 153);
		--st-ui-warning: oklch(0.78 0.11 80);
		--st-ui-warning-muted: oklch(0.19 0.03 70);
		--st-ui-danger: oklch(0.72 0.14 25);
		--st-ui-danger-muted: oklch(0.17 0.03 25);
		--st-ui-cyan: oklch(0.77 0.09 210);
		--st-ui-cyan-muted: oklch(0.18 0.03 210);
		--st-ui-orange: oklch(0.78 0.12 55);
		--st-ui-orange-muted: oklch(0.19 0.035 50);
		--st-ui-steel: oklch(0.74 0.045 250);
		--st-ui-steel-muted: oklch(0.2 0.02 250);
		--st-ui-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
		--st-ui-shadow: 0 1px 3px oklch(0 0 0 / 0.3),
			0 1px 2px oklch(0 0 0 / 0.2);
		--st-ui-shadow-lg: 0 4px 12px oklch(0 0 0 / 0.4),
			0 2px 4px oklch(0 0 0 / 0.2);
	}
}

[data-theme="dark"],
[data-mode="dark"] {
	color-scheme: dark;
	--st-color-canvas: #101522;
	--st-color-surface: #13213a;
	--st-color-surface-strong: #1b2d4d;
	--st-color-text: #f4f6fb;
	--st-color-muted: #b5c2d7;
	--st-color-border: #304667;
	--st-color-accent: #66b2ff;
	--st-color-accent-strong: #99ccff;
	--st-color-on-accent: var(--st-color-navy-950);
	--st-shadow-card: 0 1rem 2.5rem rgb(0 0 0 / 25%);
	--st-ui-surface-sunken: #0b1120;
	--st-ui-primary: #66b2ff;
	--st-ui-primary-foreground: var(--st-color-navy-950);
	--st-ui-primary-hover: #99ccff;
	--st-ui-border-strong: #466184;
	--st-ui-ring: rgb(102 178 255 / 50%);
	--st-ui-info: oklch(0.75 0.12 255);
	--st-ui-info-muted: oklch(0.17 0.03 260);
	--st-ui-success: oklch(0.72 0.12 150);
	--st-ui-success-muted: oklch(0.17 0.025 153);
	--st-ui-warning: oklch(0.78 0.11 80);
	--st-ui-warning-muted: oklch(0.19 0.03 70);
	--st-ui-danger: oklch(0.72 0.14 25);
	--st-ui-danger-muted: oklch(0.17 0.03 25);
	--st-ui-cyan: oklch(0.77 0.09 210);
	--st-ui-cyan-muted: oklch(0.18 0.03 210);
	--st-ui-orange: oklch(0.78 0.12 55);
	--st-ui-orange-muted: oklch(0.19 0.035 50);
	--st-ui-steel: oklch(0.74 0.045 250);
	--st-ui-steel-muted: oklch(0.2 0.02 250);
	--st-ui-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
	--st-ui-shadow: 0 1px 3px oklch(0 0 0 / 0.3),
		0 1px 2px oklch(0 0 0 / 0.2);
	--st-ui-shadow-lg: 0 4px 12px oklch(0 0 0 / 0.4),
		0 2px 4px oklch(0 0 0 / 0.2);
}

.st-shell {
	min-height: 100vh;
	margin: 0;
	background: var(--st-color-canvas);
	color: var(--st-color-text);
	font-family: var(--st-font-sans);
	line-height: 1.6;
}

.st-container {
	box-sizing: border-box;
	width: min(100% - 2rem, 48rem);
	margin-inline: auto;
	padding-block: clamp(3rem, 10vw, 8rem);
}

.st-stack > * {
	margin-block: 0;
}

.st-stack > * + * {
	margin-block-start: var(--st-space-4);
}

.st-eyebrow {
	color: var(--st-color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.st-lede {
	max-width: 42rem;
	color: var(--st-color-muted);
	font-size: clamp(1.125rem, 3vw, 1.375rem);
}

.st-card {
	padding: clamp(1.25rem, 4vw, 2rem);
	border: 1px solid var(--st-color-border);
	border-radius: var(--st-radius-md);
	background: var(--st-color-surface);
	box-shadow: var(--st-shadow-card);
}

.st-brand-preview {
	display: block;
	width: min(100%, 10.25rem);
	height: auto;
}

.st-card code {
	display: block;
	overflow-x: auto;
	padding: var(--st-space-3) var(--st-space-4);
	border-radius: var(--st-radius-sm);
	background: var(--st-color-canvas);
	font-family: var(--st-font-mono);
	font-size: 0.875rem;
}

.st-button {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	padding: var(--st-space-3) var(--st-space-4);
	border-radius: var(--st-radius-sm);
	background: var(--st-color-accent);
	color: var(--st-color-on-accent);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 150ms ease,
		transform 150ms ease;
}

.st-button:hover,
.st-button:focus-visible {
	background: var(--st-color-accent-strong);
}

.st-button:focus-visible {
	outline: 3px solid var(--st-color-accent);
	outline-offset: 3px;
}

.st-button:active {
	transform: translateY(1px);
}

.st-badge {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: var(--st-space-2);
	padding: var(--st-space-1) var(--st-space-3);
	border: 1px solid var(--st-color-border);
	border-radius: 999px;
	background: var(--st-color-surface-strong);
	color: var(--st-color-muted);
	font-size: 0.75rem;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.st-button {
		transition: none;
	}
}