src/system-selectors.css
@layer --system {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	html {
		font-family: var(--system-font-family-body);
		/**
		 * DO NOT EDIT! 
		 * This allows elements to resize in a predictable way when using root based units. 
		 */
		font-size: 100% !important;
		line-height: var(--system-line-height);
		color-scheme: light dark;
	}

	body {
		/* Container needs to be on body due to a bug on Safari :( */
		container-name: var(--system-enhanced, --system);
		container-type: var(--system-enhanced, inline-size);

		display: var(--system-enhanced, grid);
		margin: var(--system-enhanced, unset);
		color: var(--system-canvas-text);
		background-color: var(--system-canvas);
	}

	main {
		font-size: var(--system-font-size);
	}

	::selection {
		background: var(--system-highlight);
		color: var(--system-highlight-text);
	}
	:is([type='checkbox'], [type='radio']):is(:checked, :focus-visible) + label {
		font-weight: bolder;
	}
	:focus-visible {
		outline: var(--system-stroke-medium) solid var(--system-highlight);
		outline-offset: var(--system-stroke-offset);
	}

	:is(h1, h2, h3, h4, h5, h6) {
		font-family: var(--system-font-family-display);
		line-height: var(--system-line-height-display);
		margin-block-start: var(--system-spacing-heading-block-start);
		margin-block-end: var(--system-spacing-main);
	}

	:is(h1, h2, h3) {
		text-wrap: balance;
	}

	:is(h4, h5, h6) {
		line-height: var(--system-line-height-compact);
	}

	h1 {
		font-weight: var(--system-font-weight-extrabold);
		font-size: var(--system-font-size-xxxl);
	}

	h2 {
		font-size: var(--system-font-size-xxl);
	}

	h3 {
		font-size: var(--system-font-size-xl);
	}

	h4 {
		font-size: var(--system-font-size-l);
	}

	h5 {
		font-size: var(--system-font-size-m);
	}

	h6 {
		font-size: var(--system-font-size-s);
		text-transform: uppercase;
	}

	a:link {
		color: var(--system-link-text);
	}

	a:hover {
		color: color-mix(in oklab, var(--system-link-text) 80%, var(--system-canvas-text));
	}

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

	a:focus {
		color: var(--system-link-text);
	}

	a:visited {
		color: var(--system-visited-text, VisitedText);
	}
	p {
		text-wrap: pretty;
	}
	abbr:hover {
		/* Set the '?' cursor while hovering an abbreviation */
		cursor: help;
	}

	blockquote {
		padding: var(--system-spacing-main);
		background: var(--system-surface-color);
		border-inline-start: var(--system-stroke-thick) solid var(--system-stroke-color);
		/* Waiting on margin-trim */

		& > *:first-child {
			margin-block-start: unset;
		}

		& > *:last-child {
			margin-block-end: unset;
		}
	}

	abbr {
		cursor: help;
	}
	input,
	select,
	button,
	textarea {
		font: inherit;
		color: inherit;
		font-size: var(--system-font-size-m);
		font-family: var(--system-font-family-interactive);
		&:not([type='checkbox'], [type='radio']) {
			min-block-size: max(40px, 2.5rem);
		}
		&:is([type='checkbox'], [type='radio']) {
			scale: 125%;
		}
	}

	button {
		display: inline-flex;
		padding: var(--system-spacing-interactive);
		text-align: center;
		text-decoration: none;
		background: var(--system-button-face);
		color: var(--system-button-text);
		white-space: nowrap;
		border: var(--system-stroke-thin) solid var(--system-button-border);
		border-radius: var(--system-radius);
		font-weight: var(--system-font-weight-semibold);

		&:hover {
			background: var(--system-surface-color);
		}
	}

	button[type='submit'] {
		background: var(--system-interactive-color);
		color: var(--system-canvas-text-inverted);
		border: var(--system-stroke-thin) solid var(--system-accent-color);

		&:is(:focus, :focus-visible, :enabled:hover) {
			color: var(--system-canvas-text-inverted);
			border-color: color-mix(in oklab, var(--system-accent-color) 85%, var(--system-canvas-text));
			background: color-mix(in oklab, var(--system-interactive-color) 85%, var(--system-canvas-text));
		}
	}

	button[disabled] {
		opacity: 0.25;
		pointer-events: none;
	}

	a img,
	a svg {
		margin-block-end: 0px;
	}

	code,
	pre,
	kbd,
	samp {
		/* Set the font family for monospaced elements */
		font-family: var(--system-font-family-code);
	}

	code,
	samp,
	kbd,
	pre {
		background: var(--system-surface-color);
		border: var(--system-stroke-thin) solid var(--system-stroke-color);
		border-radius: var(--system-radius);
		padding: var(--system-spacing-element);
		font-size: var(--system-font-size-s);
	}

	kbd {
		/* Makes the kbd element look like a keyboard key */
		border-block-end: var(--system-stroke-medium) solid var(--system-stroke-color);
	}

	pre {
		margin-block: var(--system-spacing-main);
		padding: var(--system-spacing-main);
		max-width: 100%;
		overflow: auto;
	}

	pre code {
		/* When <code> is in a <pre>, reset it's formatting to blend in */
		background: inherit;
		font-size: inherit;
		color: inherit;
		border: unset;
		padding: unset;
		margin: unset;
	}

	code pre {
		/* When <pre> is in a <code>, reset it's formatting to blend in */
		display: inline;
		background: inherit;
		font-size: inherit;
		color: inherit;
		border: unset;
		padding: unset;
		margin: unset;
	}

	details {
		margin-block: var(--system-spacing-main);
		border: var(--system-stroke-thin) solid var(--system-stroke-color);
		border-radius: var(--system-radius);
		cursor: text;
		overflow: clip;
	}
	summary {
		cursor: pointer;
		font-family: var(--system-font-family-data);
		font-weight: var(--system-font-weight-semibold);
		padding: var(--system-spacing-interactive);
		background: var(--system-surface-color);
	}

	details[open] {
		padding-inline: var(--system-spacing-main-inline);
		padding-block-end: var(--system-spacing-main-block);
	}

	details[open] > summary {
		margin-inline: calc(var(--system-spacing-main) * -1);
	}

	details[open] {
		& > summary {
			margin-block-end: var(--system-spacing-main);
		}
		& > summary + * {
			margin-block-start: unset;
		}
		& > *:last-child {
			margin-block-end: unset;
		}
	}

	dt {
		font-weight: var(--system-font-weight-semibold);
	}

	hr {
		/* Reset the border of the <hr> separator, then set a better line */
		border: 0;
		border-block-end: var(--system-stroke-medium) solid var(--system-surface-color);
		margin-block: var(--system-spacing-section-block);
		margin-inline: 0;
	}

	table {
		display: block;
		overflow-x: auto;
		border-collapse: collapse;
		width: 100%;
		font-family: var(--system-font-family-data);
		font-size: smaller;
	}
	:is(thead, tfoot) :is(td, th) {
		text-transform: capitalize;
		padding-block: var(--system-spacing-element-block);
		background-color: var(--system-canvas);
	}
	td,
	th {
		vertical-align: top;
		border: var(--system-stroke-thin) solid var(--system-stroke-color);
		text-align: start;
		padding: var(--system-spacing-interactive);
		& code {
			white-space: nowrap;
		}
	}

	th {
		background: var(--system-surface-color);
	}

	tr:nth-child(odd) {
		background: var(--system-surface-color);
	}

	table caption {
		font-weight: var(--system-font-weight-bold);
		margin-block-end: var(--system-spacing-main);
	}

	textarea {
		/* Don't let the <textarea> extend off the screen naturally or when dragged by the user */
		max-width: 100%;
	}

	mark {
		padding: var(--system-spacing-element);
		background-color: var(--system-mark);
		color: var(--system-mark-text);
	}

	textarea,
	select,
	input {
		padding-block: var(--system-spacing-interactive-block);
		padding-inline: var(--system-spacing-interactive-inline);
		margin-block-end: var(--system-spacing-interactive-block);
		background: var(--system-field);
		color: var(--system-field-text);
		border: var(--system-stroke-thin) solid var(--system-button-border);
		border-radius: var(--system-radius);
		box-shadow: none;
		accent-color: var(--system-accent-color);
		&:is([type='radio']) {
			border-radius: 50%;
		}
	}

	select {
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 48 48' fill='gray'%3E%3Cpath d='M8.36612 16.1161C7.87796 16.6043 7.87796 17.3957 8.36612 17.8839L23.1161 32.6339C23.6043 33.122 24.3957 33.122 24.8839 32.6339L39.6339 17.8839C40.122 17.3957 40.122 16.6043 39.6339 16.1161C39.1457 15.628 38.3543 15.628 37.8661 16.1161L24 29.9822L10.1339 16.1161C9.64573 15.628 8.85427 15.628 8.36612 16.1161Z' fill='gray'/%3E%3C/svg%3E");
		background-size: 15%;
		background-position: calc(100% - 1ch) 48%;
		background-repeat: no-repeat;
		padding-right: 2.8em;
	}

	figure {
		margin-block: var(--system-spacing-main);
		margin-inline: 0;
	}

	figcaption {
		text-align: center;
		font-style: italic;
		font-size: var(--system-font-size-s);
	}

	/* https://keithjgrant.com/posts/2024/01/my-css-resets/ */
	img,
	picture,
	svg,
	canvas {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
		/* explicit small widths are usually icons and shouldn't scale */
		&:is([width='32'], [width='24'], [width='16']) {
			display: inline-block;
			vertical-align: middle;
		}
	}
	:is(p, li, td, dd) > :is(img, picture, svg, figure):not([width='32'], [width='24'], [width='16']) {
		float: inline-end;
		margin-inline-start: var(--system-spacing-column-gap);
		margin-block: var(--system-spacing-element-block);
		max-inline-size: 42cqw;
	}
	@container --content (width < 42ch) {
		:is(p, li, dd, td) > :is(img, picture, svg, figure):not([width='32'], [width='24'], [width='16']) {
			width: 100%;
			max-inline-size: unset;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}
