/* Generated by scripts/build_theme.py from design-system/tokens.json. Do not edit by hand. */

/* Mobile (<640px): smaller top-level headings and the mobile header height. */
@media (max-width: 639px) {
	html:root {
		--wp--preset--font-size--display: 44px;
		--wp--custom--type--display--font-size: 44px;
		--wp--custom--type--display--line-height: 48px;
		--wp--preset--font-size--h-1: 36px;
		--wp--custom--type--h-1--font-size: 36px;
		--wp--custom--type--h-1--line-height: 42px;
		--wp--preset--font-size--h-2: 28px;
		--wp--custom--type--h-2--font-size: 28px;
		--wp--custom--type--h-2--line-height: 34px;
		--wp--custom--type--brand-name--font-size: 36px;
		--wp--custom--type--brand-name--line-height: 36px;
		--wp--custom--type--quote--font-size: 22px;
		--wp--custom--type--quote--line-height: 32px;
		--wp--custom--header-height: 64px;
	}
}

/* Gutter and section padding: mobile is the theme.json default; tablet and desktop step up. */
@media (min-width: 640px) {
	html:root {
		--wp--custom--gutter: 24px;
		--wp--custom--section-padding: 64px;
	}
}
@media (min-width: 1024px) {
	html:root {
		--wp--custom--gutter: 32px;
		--wp--custom--section-padding: 96px;
	}
}

/* Links in body text. */
a {
	text-underline-offset: 3px;
}

/* Links in running text: thin underline, thickening on hover. */
p a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 150ms ease-out;
}
/* Only where a real pointer hovers: on phones a tapped link stays "hovered" and looked bold. */
@media (hover: hover) {
	p a:not(.wp-element-button):hover {
		text-decoration-thickness: 3px;
	}
}
@media (prefers-reduced-motion: reduce) {
	p a:not(.wp-element-button) {
		transition: none;
	}
}

/* Focus: a solid 3px ring, offset 2px, on every interactive element. Never remove it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}

/* Buttons are 48px tall (tap-target). Hover: 1px lift, card shadow, one step lighter (theme.json).
   The lift and shadow only where a pointer really hovers: on a phone a tapped button would keep them. */
.wp-element-button,
.wp-block-button__link {
	min-height: var(--wp--custom--tap-target);
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
@media (hover: hover) {
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}
@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}