/*
 * Base: the cascade layers, the reset, and the document defaults.
 *
 * The layer order is declared once, here, before any layer has rules in it,
 * so a component always beats layout, and layout always beats base, whatever
 * order the files arrive in. A template stylesheet outside any layer beats
 * them all, which is the point of layers: the site can override a component
 * without out-specifying it.
 */

@layer vdt.base, vdt.layout, vdt.components;

@layer vdt.base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		margin: 0;
		padding: 0;
		background: var(--vdt-ground);
		color: var(--vdt-text);
		font-family: var(--vdt-font);
		font-size: var(--vdt-size-body);
		font-weight: var(--vdt-weight-regular);
		line-height: var(--vdt-leading-body);
		font-synthesis: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/*
	 * Headings carry no size of their own. The size comes from the component
	 * or from .vdt-prose, so an h2 can be a section heading in one place and
	 * a card heading in another without fighting a global rule.
	 */
	h1, h2, h3, h4, h5, h6 {
		margin: 0;
		color: var(--vdt-text-heading);
		font-weight: var(--vdt-weight-semibold);
		text-wrap: balance;
	}

	p, figure, blockquote, ul, ol, dl, dd {
		margin: 0;
	}

	ul, ol {
		padding: 0;
	}

	a {
		color: inherit;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.25rem;
	}

	strong, b {
		font-weight: var(--vdt-weight-semibold);
	}

	:where(img, picture, video, svg) {
		display: block;
		max-width: 100%;
	}

	:where(img, video) {
		height: auto;
	}

	/* Fill, never stroke (A5, D22). Inline SVGs take their colour from the text. */
	:where(svg) {
		fill: currentColor;
		width: 1em;
		height: 1em;
	}

	button, input, select, textarea {
		font: inherit;
		color: inherit;
	}

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

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	/*
	 * Focus (D23). Not drawn on any board, and not optional: a keyboard user
	 * has to see where they are. The ring reads the theme, so it is purple on
	 * light and white on purple.
	 */
	:focus-visible {
		outline: var(--vdt-focus-width) solid var(--vdt-focus-ring);
		outline-offset: var(--vdt-focus-offset);
	}

	:focus:not(:focus-visible) {
		outline: none;
	}

	::selection {
		background: var(--vdt-purple);
		color: var(--vdt-white);
	}

	.vh {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	@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;
		}
	}
}