/**
 * Base layer: reset, document defaults and the typography system.
 *
 * Everything here targets bare elements. It is what WordPress-generated markup,
 * plugin output and editor content inherit without any class being applied, so
 * the site looks correct even where the theme has no component.
 *
 * No raw values: all styling reads tokens from tokens.css.
 */

@layer ajp.base {

	/* ----------------------------------------------------------------------
	 * Reset
	 * -------------------------------------------------------------------- */

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

	/* Margins are opt-in. Vertical rhythm comes from the flow utilities and
	 * from the typography rules below, not from browser defaults. */
	body,
	h1, h2, h3, h4, h5, h6,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin: 0;
	}

	ul[role="list"],
	ol[role="list"] {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* ----------------------------------------------------------------------
	 * Document
	 * -------------------------------------------------------------------- */

	html {
		scroll-padding-top: var(--ajp-space-7);
		-webkit-text-size-adjust: 100%;
	}

	@media (prefers-reduced-motion: no-preference) {
		html:focus-within { scroll-behavior: smooth; }
	}

	body {
		min-height: 100vh;
		background-color: var(--ajp-color-bg);
		color: var(--ajp-color-text);
		font-family: var(--ajp-font);
		font-size: var(--ajp-text-body);
		font-weight: var(--ajp-weight-regular);
		font-feature-settings: var(--ajp-font-features);
		line-height: var(--ajp-leading-body);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* ----------------------------------------------------------------------
	 * Typography
	 *
	 * Headings are sentence case. Hierarchy is size, weight and space; the
	 * previous system reached for condensed uppercase at every level, which
	 * flattened the page into one continuous shout.
	 * -------------------------------------------------------------------- */

	h1, h2, h3, h4, h5, h6 {
		color: var(--ajp-color-heading);
		font-weight: var(--ajp-weight-bold);
		line-height: var(--ajp-leading-heading);
		letter-spacing: var(--ajp-tracking-heading);
		text-wrap: balance;
	}

	h1 { font-size: var(--ajp-text-h1); }
	h2 { font-size: var(--ajp-text-h2); }

	h3 {
		font-size: var(--ajp-text-h3);
		font-weight: var(--ajp-weight-semibold);
		letter-spacing: var(--ajp-tracking-snug);
	}

	h4 {
		font-size: var(--ajp-text-card);
		font-weight: var(--ajp-weight-semibold);
		letter-spacing: var(--ajp-tracking-snug);
	}

	h5 {
		font-size: var(--ajp-text-body);
		font-weight: var(--ajp-weight-semibold);
		letter-spacing: var(--ajp-tracking-none);
	}

	/* The one element-level uppercase in the system, and it is a 12px label. */
	h6 {
		font-size: var(--ajp-text-label);
		font-weight: var(--ajp-weight-semibold);
		letter-spacing: var(--ajp-tracking-label);
		text-transform: uppercase;
	}

	p { text-wrap: pretty; }

	/*
	 * Links are ink with an underline, not red. Red on every link made the
	 * colour meaningless; an underline identifies a link without spending the
	 * one accent the palette has.
	 */
	a {
		color: var(--ajp-color-link);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
		text-decoration-color: var(--ajp-color-line-strong);
		transition: color var(--ajp-duration-fast) var(--ajp-ease),
			text-decoration-color var(--ajp-duration-fast) var(--ajp-ease);
	}

	a:hover {
		color: var(--ajp-color-link-hover);
		text-decoration-color: currentColor;
	}

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

	small { font-size: var(--ajp-text-meta); }

	blockquote {
		padding-left: var(--ajp-space-5);
		border-left: 2px solid var(--ajp-color-line-strong);
		color: var(--ajp-color-heading);
		font-size: var(--ajp-text-lead);
	}

	hr {
		height: 0;
		margin-block: var(--ajp-space-7);
		border: 0;
		border-top: var(--ajp-border);
	}

	/* Long words and model numbers must not force horizontal page scroll. */
	h1, h2, h3, h4, h5, h6,
	p, li, dt, dd, td, th, figcaption {
		overflow-wrap: break-word;
	}

	/* ----------------------------------------------------------------------
	 * Media
	 * -------------------------------------------------------------------- */

	img,
	picture,
	video,
	canvas,
	svg,
	iframe {
		display: block;
		max-width: 100%;
	}

	img,
	video { height: auto; }

	figcaption {
		margin-top: var(--ajp-space-2);
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
	}

	/* ----------------------------------------------------------------------
	 * Tables
	 * -------------------------------------------------------------------- */

	table {
		width: 100%;
		border-collapse: collapse;
		text-align: left;
	}

	th,
	td {
		padding: var(--ajp-space-3) var(--ajp-space-4);
		border-bottom: var(--ajp-border);
		vertical-align: top;
	}

	th {
		color: var(--ajp-color-heading);
		font-weight: var(--ajp-weight-semibold);
	}

	caption {
		margin-bottom: var(--ajp-space-2);
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
		text-align: left;
	}

	/* ----------------------------------------------------------------------
	 * Form element defaults
	 * -------------------------------------------------------------------- */

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

	textarea { resize: vertical; }
	label { display: inline-block; }

	fieldset {
		margin: 0;
		padding: 0;
		border: 0;
		min-width: 0;
	}

	legend {
		padding: 0;
		color: var(--ajp-color-heading);
		font-weight: var(--ajp-weight-semibold);
	}

	/* ----------------------------------------------------------------------
	 * Focus
	 *
	 * :focus-visible only, so a mouse click leaves no ring while every
	 * keyboard user gets one. 2px at 17:1 against paper clears WCAG 2.2's
	 * focus-appearance requirement without the ring dominating the design.
	 * -------------------------------------------------------------------- */

	:focus-visible {
		outline: var(--ajp-focus-width) solid var(--ajp-focus-color);
		outline-offset: var(--ajp-focus-offset);
	}

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

	::selection {
		background-color: var(--ajp-color-brand);
		color: var(--ajp-color-brand-contrast);
	}

	/* ----------------------------------------------------------------------
	 * Reduced motion
	 * -------------------------------------------------------------------- */

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