.sd-docs,
.sd-portal {
	--sd-bg: #F7F4FD;
	--sd-bg-alt: #F6F6F6;
	--sd-bg-card: #FFFFFF;
	--sd-surface: #FFFFFF;
	--sd-surface-2: #EFE7FC;
	--sd-overlay: #1E0C54;
	--sd-code-bg: var(--sd-bg-alt);
	--sd-backdrop: rgba(0, 0, 0, 0.5);

	--sd-border: #E4DBF6;
	--sd-border-strong: #C9BCEB;
	--sd-border-subtle: #ECE7F8;
	--sd-border-neutral: #EBEBEB;

	--sd-text: #1E0C54;
	--sd-text-soft: #746A95;
	--sd-text-muted: #8C909A;
	--sd-text-dim: #C9BCEB;
	--sd-text-neutral: #9E9E9E;
	--sd-text-inverse: #FFFFFF;

	--sd-accent: #7D47DE;
	--sd-accent-2: #ff891d;
	--sd-blue: #7eb5ff;
	--sd-purple: #B393F0;

	--sd-error: #D32F2F;

	--sd-status-2-bg: rgba(89, 214, 178, 0.16);
	--sd-status-4-bg: rgba(255, 137, 29, 0.16);
	--sd-status-5-bg: rgba(247, 130, 130, 0.16);

	--sd-mark-bg: rgba(255, 153, 0, 0.25);

	--sd-get: #1e60fb;
	--sd-post: #59d6b2;
	--sd-put: #B393F0;
	--sd-patch: var(--sd-accent-2);
	--sd-delete: #f78282;

	--sd-radius-button: 4px;
	--sd-radius-border: 8px;
	--sd-radius-modal: 16px;

	--sd-radius-sm: var(--sd-radius-border);
	--sd-radius-md: var(--sd-radius-modal);

	--sd-sidebar-w: 272px;
	--sd-toc-w: 300px;
	--sd-header-h: 64px;
	--sd-anchor-offset: calc(var(--sd-header-h) + var(--sd-topbar, 0px) + 16px);

	--sd-font: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
	--sd-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

	--sd-shadow: 0 8px 32px rgba(30, 12, 84, 0.12);
}

html.sd-portal-html {
	--sd-topbar: 0px;
}

* {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--sd-border) var(--sd-surface);
}

@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar {
		position: absolute;
		max-width: 0.6875rem;
		max-height: 0.6875rem;
	}

	::-webkit-scrollbar-track {
		background-color: var(--sd-surface);
	}

	::-webkit-scrollbar-thumb {
		background-color: var(--sd-border);

		&:hover {
			background-color: var(--sd-border);
		}
	}
}
