:root {
	block-size: 100%;

	--color-accent-color: oklch(80% 0.1592 95.61);
	--color-accent-color-text: oklch(16% 0.75 56);
	--color-active-text: oklch(80% 0.1592 95.61 / 0.8);
	--color-button-border: oklch(41.25% 0.04 215);
	--color-button-face: oklch(41.25% 0.04 215);
	--color-button-text: oklch(97.92% 0 215);
	--color-canvas: oklch(22% 0 215);
	--color-canvas-text: oklch(95% 0.01 104);
	--color-field: oklch(22% 0.04 215);
	--color-field-text: oklch(95% 0 104);
	--color-gray-text: oklch(50% 0 60);
	--color-highlight: oklch(70% 0 120);
	--color-highlight-text: oklch(100% 0 120);
	--color-link-text: oklch(91% 0.1592 95.61);
	--color-mark: oklch(70% 20 120);
	--color-mark-text: oklch(90% 10 0);
	--color-visited-text: oklch(80% 0.1592 95.61);
}

body {
	container: body / inline-size;
	min-block-size: 100%;
	margin: 0;
	background-color: var(--color-canvas);
	color: var(--color-canvas-text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: light) {
	:root {
		--color-accent-color: oklch(80% 0.1592 95.61);
		--color-accent-color-text: oklch(90% 10 0);
		--color-active-text: oklch(85% 0.52 275 / 0.8);
		--color-button-border: oklch(41.25% 0.04 215);
		--color-button-face: oklch(41.25% 0.04 215);
		--color-button-text: oklch(97.92% 0 215);
		--color-canvas: oklch(97% 0 215);
		--color-canvas-text: oklch(10.09% 0.01 104);
		--color-field: oklch(91% 0.02 215);
		--color-field-text: oklch(0% 0 0);
		--color-gray-text: oklch(50% 0 60);
		--color-highlight: oklch(70% 0 120);
		--color-highlight-text: oklch(0% 0 0);
		--color-link-text: oklch(85% 0.55 259);
		--color-mark: oklch(70% 20 120);
		--color-mark-text: oklch(90% 10 0);
		--color-visited-text: oklch(85% 0.52 275);
	}
}

@media (forced-colors: active) {
	:root {
		--color-accent-color: accentcolor;
		--color-accent-color-text: accentcolortext;
		--color-active-text: activetext;
		--color-button-border: buttonborder;
		--color-button-face: buttonface;
		--color-button-text: buttontext;
		--color-canvas: canvas;
		--color-canvas-text: canvastext;
		--color-field: field;
		--color-field-text: fieldtext;
		--color-gray-text: graytext;
		--color-highlight: highlight;
		--color-highlight-text: highlighttext;
		--color-link-text: linktext;
		--color-mark: mark;
		--color-mark-text: marktext;
		--color-visited-text: visitedtext;
	}
}