@layer field, ring, group;

@layer field {
	:root {
		--color-accent-color: lch(70% 60 275);
		--color-accent-color-text: accentColorText;
		--color-active-text: lch(70% 15 325);
		--color-button-border: buttonBorder;
		--color-button-face: buttonFace;
		--color-button-text: buttonText;
		--color-canvas: lch(5% 5 256);
		--color-canvas-text: lch(96% 5 256);
		--color-field: #444255;
		--color-field-text: fieldText;
		--color-gray-text: grayText;
		--color-highlight: lch(87% 30 68);
		--color-highlight-text: lch(30% 30 68);
		--color-link-text: lch(70% 60 275);
		--color-mark: mark;
		--color-mark-text: markText;
		--color-visited-text: lch(95% 15 275);

		--font-family-math: "Symbol", "Cambria Math";

		color-scheme: light dark;
		height: 100%;
	}

	html,
	body {
		padding: 0;
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
			Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
		scroll-behavior: smooth;
		line-height: 1.6;
	}

	body {
		color: var(--color-canvas-text);
		background-color: var(--color-canvas);
		min-height: 100%;
		overflow-y: auto;
	}

	@media (prefers-color-scheme: light) {
		:root {
			--color-accent-color: lch(70% 60 275);
			--color-accent-color-text: accentColorText;
			--color-active-text: lch(30% 20 325);
			--color-button-border: buttonBorder;
			--color-button-face: buttonFace;
			--color-button-text: buttonText;
			--color-canvas: lch(95% 5 256);
			--color-canvas-text: lch(20% 5 256);
			--color-field: #444255;
			--color-field-text: fieldText;
			--color-gray-text: grayText;
			--color-highlight: highlight;
			--color-highlight-text: highlightText;
			--color-link-text: lch(25% 60 275);
			--color-mark: mark;
			--color-mark-text: markText;
			--color-visited-text: lch(50% 5 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;
		}
	}

	::selection {
		background-color: var(--color-highlight);
		color: var(--color-highlight-text);
	}

	:focus-visible {
		outline: 0.125rem solid var(--color-accent-color);
		outline-offset: 0.125em;
	}

	a {
		color: var(--color-link-text);
		text-underline-offset: 0.1em;
		transition-property: color, text-decoration-color;
		transition-duration: 0.1s;
		transition-timing-function: ease-in-out;
	}

	a:link {
		text-decoration-color: currentColor;
	}

	a:visited {
		text-decoration-color: var(--color-visited-text);
	}

	a:hover {
		text-underline-offset: 0.3em;
	}

	a:active {
		color: var(--color-active-text);
		text-decoration-color: currentColor;
	}

	ul {
		list-style: none;
	}

	button {
		background: none;
		border: none;
		cursor: pointer;
	}

	.heading {
		letter-spacing: 0.1em;
		font-weight: bold;
	}

	math {
		font-family: var(--font-family-math);
	}

	@media (prefers-reduced-motion: no-preference) {
		a {
			transition-property: color, text-decoration-color, text-underline-offset;
		}

		:focus-visible {
			animation: focus-visible 0.3s ease;
		}
	}

	@keyframes focus-visible {
		0% {
			outline-color: transparent;
			outline-offset: 0.625em;
		}
		100% {
			outline-color: var(--color-accent-color);
			outline-offset: 0.125em;
		}
	}
}