/**
 * Base layer: the cascade layer order, element defaults, and nothing else.
 *
 * This file must load first — the @layer statement below fixes the order for
 * every other stylesheet, regardless of enqueue order.
 *
 * All colour, spacing and type values come from theme.json custom properties.
 * Hardcoded hex, px spacing or font sizes do not belong anywhere in this repo.
 */

@layer reset, base, layout, components, utilities;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin: 0;
	}

	ul[class],
	ol[class] {
		padding: 0;
		list-style: none;
	}

	img,
	picture,
	svg {
		display: block;
		max-width: 100%;
		height: auto;
	}

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

@layer base {
	/* Short names for theme.json's settings.custom.radius, which is where the
	   values live so the editor and elements.button can reach them too. */
	:root {
		--hauto-radius-sm: var(--wp--custom--radius--sm);
		--hauto-radius-md: var(--wp--custom--radius--md);
		--hauto-radius-lg: var(--wp--custom--radius--lg);
		--hauto-radius-pill: var(--wp--custom--radius--pill);
	}

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

	body {
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
		font-family: var(--wp--preset--font-family--sans);
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.6;
	}

	/* Not theme.json's elements.link: core emits that unlayered, which outranks
	   every @layer and leaves no component able to colour a link. */
	a {
		color: var(--wp--preset--color--primary);
		text-decoration: none;

		&:hover {
			color: var(--wp--preset--color--primary-strong);
		}
	}

	/* Not theme.json's elements.heading / h1-h3 either, and for the same reason
	   as `a` above: core emits those unlayered, so a component stylesheet could
	   never size a heading of its own. The values are the ones theme.json used
	   to carry; assets/css/editor.css repeats them for the canvas. */
	:where(h1, h2, h3, h4) {
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 650;
		letter-spacing: -0.02em;
		line-height: 1.05;
		text-wrap: balance;
		margin: 1rem 0;
	}

	:where(h1) {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	:where(h2) {
		font-size: var(--wp--preset--font-size--x-large);
	}

	:where(h3) {
		font-size: var(--wp--preset--font-size--large);
	}

	:focus-visible {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}
}

@layer base {
	/*
	 * Icons are drawn on a 24px grid at one stroke weight, sized in ems so they
	 * track whatever text they sit beside.
	 */
	.hauto-icon {
		width: 1.05em;
		height: 1.05em;
		flex: none;
		fill: none;
		stroke: currentcolor;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		opacity: 0.75;
	}
}