:root {
	/* Typography */
	--vm-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--vm-font-display:
		Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--vm-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
	--vm-text-2xs: 0.625rem;
	--vm-text-xs: 0.6875rem;
	--vm-text-sm: 0.8125rem;
	--vm-text-body: 0.9375rem;
	--vm-text-md: 1.0625rem;
	--vm-text-lg: 1.25rem;
	--vm-text-xl: 1.5rem;
	--vm-text-2xl: clamp(1.75rem, 3vw, 2.5rem);
	--vm-text-display: clamp(2.75rem, 7vw, 6.5rem);
	--vm-leading-tight: 1.02;
	--vm-leading-heading: 1.12;
	--vm-leading-body: 1.58;
	--vm-tracking-label: 0.13em;

	/* Spacing: 4px foundation */
	--vm-space-1: 0.25rem;
	--vm-space-2: 0.5rem;
	--vm-space-3: 0.75rem;
	--vm-space-4: 1rem;
	--vm-space-5: 1.25rem;
	--vm-space-6: 1.5rem;
	--vm-space-8: 2rem;
	--vm-space-10: 2.5rem;
	--vm-space-12: 3rem;
	--vm-space-16: 4rem;
	--vm-page-gutter: clamp(1rem, 3vw, 2rem);
	--vm-content-width: 82.5rem;
	--vm-navigation-width: 260px;
	--vm-frame-gutter: 20px;
	--vm-workspace-content-width: 1240px;

	/* Surfaces and state */
	--vm-bg: #090d12;
	--vm-surface-1: #0d131a;
	--vm-surface-2: #111923;
	--vm-surface-3: #16212c;
	--vm-surface-raised: #192633;
	--vm-line: #273746;
	--vm-line-strong: #4b6479;
	--vm-text: #f4f8fb;
	--vm-text-soft: #c2ced8;
	--vm-muted: #8fa1b3;
	--vm-muted-low: #6e8295;
	--vm-cyan: #35c4ff;
	--vm-cyan-strong: #66d3ff;
	--vm-cyan-ink: #031018;
	--vm-lime: #b8f23a;
	--vm-orange: #ffb65a;
	--vm-red: #ff7182;
	--vm-focus: #d1ff63;
	--vm-paper: #f2f0e8;
	--vm-paper-ink: #15202a;

	/* Semantic roles. Components should consume these rather than inventing
	 * page-specific cyan, lime, orange, or red values. */
	--vm-brand: var(--vm-cyan);
	--vm-action: var(--vm-lime);
	--vm-information: var(--vm-cyan);
	--vm-status-live: var(--vm-lime);
	--vm-status-ready: var(--vm-lime);
	--vm-status-pending: var(--vm-orange);
	--vm-status-danger: var(--vm-red);
	--vm-border-interactive: var(--vm-line-strong);
	--vm-material-paper: var(--vm-paper);

	/* Shape, depth, and motion */
	--vm-radius-sm: 0.375rem;
	--vm-radius-md: 0.5rem;
	--vm-radius-lg: 0.75rem;
	--vm-radius-xl: 1rem;
	--vm-control-height: 2.75rem;
	--vm-control-height-lg: 3rem;
	--vm-shadow-raised: 0 18px 50px rgba(0, 0, 0, 0.34);
	--vm-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--vm-focus) 28%, transparent);
	--vm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--vm-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
	--vm-ease-exit: cubic-bezier(0.4, 0, 1, 1);
	--vm-ease-press: cubic-bezier(0.3, 0.7, 0.4, 1);
	--vm-motion-instant: 80ms;
	--vm-motion-fast: 140ms;
	--vm-motion: 220ms;
	--vm-motion-deliberate: 320ms;
	--vm-motion-confirm: 440ms;
}