/*
 * Layer: base. Element defaults the kit needs everywhere: text rendering, links,
 * form controls (kit .nd-input), the focus ring, and PMPro's variables mapped to presets.
 */
@layer base {

	/*
	 * M15: core's open overlay locks scrolling with overflow:hidden on <html>, which removed the
	 * classic scrollbar and shifted the page sideways; the gutter stays reserved instead.
	 */
	html {
		scrollbar-gutter: stable;
	}

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	a {
		text-underline-offset: var(--wp--custom--link--underline-offset);
		text-decoration-thickness: from-font;
	}

	:where(img, video) {
		max-width: 100%;
		height: auto;
	}

	/* Links and .wp-element-button get their focus styles from theme.json. */
	:where(button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline: 2px solid transparent;
		outline-offset: 2px;
		box-shadow: var(--wp--custom--focus-ring);
	}

	/* Form controls: kit .nd-input. */
	:where(
		input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"], [type="hidden"]),
		select,
		textarea
	) {
		box-sizing: border-box;
		max-width: 100%;
		min-height: 56px;
		padding: 0 18px;
		border: 1px solid var(--wp--preset--color--glass-border);
		border-radius: var(--wp--preset--border-radius--input);
		background-color: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--label);
		font-weight: 400;
		line-height: var(--wp--custom--line-height--body);
		transition:
			border-color var(--wp--custom--duration--fast),
			box-shadow var(--wp--custom--duration--fast);
	}

	textarea {
		padding-block: 14px;
	}

	:where(input, select, textarea):focus {
		outline: 2px solid transparent;
		border-color: var(--wp--preset--color--brand);
		box-shadow: var(--wp--custom--focus-ring);
	}

	::placeholder {
		color: var(--wp--preset--color--ink-muted);
		opacity: 1;
	}

	/*
	 * PMPro (plan §1.10). Set on body, not :root: PMPro prints <style id="pmpro_colors"> on :root
	 * unlayered, which would beat any layered :root rule. Custom properties inherit, so body wins.
	 */
	body {
		--pmpro--color--base: var(--wp--preset--color--paper);
		--pmpro--color--base-2: var(--wp--preset--color--porcelain);
		--pmpro--color--contrast: var(--wp--preset--color--ink);
		--pmpro--color--accent: var(--wp--preset--color--brand);
		--pmpro--color--accent--variation: var(--wp--preset--color--brand-deep);
		--pmpro--color--border: var(--wp--preset--color--line);
		--pmpro--color--border--variation: var(--wp--preset--color--line);
		--pmpro--color--white: var(--wp--preset--color--paper);
		--pmpro--base--border-radius: var(--wp--preset--border-radius--panel);
		--pmpro--btn--border-radius: var(--wp--preset--border-radius--pill);
		--pmpro--btn--top-bottom-padding: 18px;
		--pmpro--btn--left-right-padding: 30px;
		--pmpro--box-shadow: var(--wp--preset--shadow--pill);
		--pmpro--color--info-background: color-mix(in srgb, var(--wp--preset--color--brand-deep) 8%, var(--wp--preset--color--paper));
		--pmpro--color--info-border: var(--wp--preset--color--glass-border);
		--pmpro--color--info-text: var(--wp--preset--color--ink);
		--pmpro--color--info-link: var(--wp--preset--color--brand-deep);
		--pmpro--color--success-background: color-mix(in srgb, var(--wp--preset--color--success) 8%, var(--wp--preset--color--paper));
		--pmpro--color--success-border: var(--wp--preset--color--success);
		--pmpro--color--success-text: var(--wp--preset--color--success);
		--pmpro--color--success-link: var(--wp--preset--color--success);
		--pmpro--color--error-background: var(--wp--preset--color--error-surface);
		--pmpro--color--error-border: var(--wp--preset--color--error);
		--pmpro--color--error-text: var(--wp--preset--color--error-surface-ink);
		--pmpro--color--error-link: var(--wp--preset--color--error-surface-ink);
		--pmpro--color--alert-background: color-mix(in srgb, var(--wp--preset--color--warning) 8%, var(--wp--preset--color--paper));
		--pmpro--color--alert-border: var(--wp--preset--color--warning);
		--pmpro--color--alert-text: var(--wp--preset--color--ink);
		--pmpro--color--alert-link: var(--wp--preset--color--brand-deep);
	}
}