/**
 * @file designTokens
 * @description v10's token names, pointing at the theme.json values. The values live in
 *   theme.json only; this file lets pattern and template CSS use the names v10 uses.
 *   Also the few base rules theme.json cannot express.
 *
 * @status In use (build stage 04)
 * @issues None
 * @todo None
 */

:root {
	--nl-cream: var(--wp--preset--color--nl-cream);
	--nl-sunken: var(--wp--preset--color--nl-sunken);
	--nl-body: var(--wp--preset--color--nl-body);
	--nl-charcoal: var(--wp--preset--color--nl-charcoal);
	--nl-orange: var(--wp--preset--color--nl-orange);
	--nl-orange-deep: var(--wp--preset--color--nl-orange-deep);
	--ground: var(--wp--preset--color--ground);

	--text-heading: var(--nl-charcoal);
	--text-body: var(--nl-body);
	--panel: var(--nl-sunken);
	--accent: var(--nl-orange);
	--accent-text: var(--nl-orange-deep);
	--btn-fill: var(--wp--custom--button--fill);
	--btn-edge: var(--wp--custom--button--edge);
	--hairline: var(--wp--custom--hairline);

	--font-sans: var(--wp--preset--font-family--sans);
	--font-accent: var(--wp--preset--font-family--accent);

	--fs-display: var(--wp--preset--font-size--display);
	--fs-section: var(--wp--preset--font-size--section);
	--fs-card: var(--wp--preset--font-size--card);
	--fs-h4: var(--wp--preset--font-size--lead);
	--fs-lead: var(--wp--preset--font-size--lead);
	--fs-body: var(--wp--preset--font-size--body);
	--fs-small: var(--wp--preset--font-size--small);
	--fs-caption: var(--wp--preset--font-size--caption);
	--fs-eyebrow: var(--wp--preset--font-size--eyebrow);

	--fw-display: var(--wp--custom--weight--display);
	--fw-regular: var(--wp--custom--weight--regular);
	--fw-medium: var(--wp--custom--weight--medium);
	--fw-semibold: var(--wp--custom--weight--semibold);
	--fw-bold: var(--wp--custom--weight--bold);
	--fw-word: var(--wp--custom--weight--semibold);
	--lh-display: var(--wp--custom--line-height--display);

	--tracking-wordmark: var(--wp--custom--tracking--wordmark);
	--tracking-eyebrow: var(--wp--custom--tracking--eyebrow);
	--tracking-display: var(--wp--custom--tracking--display);
	--tracking-tight: var(--wp--custom--tracking--tight);

	--space-3: var(--wp--preset--spacing--3);
	--space-4: var(--wp--preset--spacing--4);
	--space-5: var(--wp--preset--spacing--5);
	--space-6: var(--wp--preset--spacing--6);
	--space-7: var(--wp--preset--spacing--7);
	--space-8: var(--wp--preset--spacing--8);
	--space-9: var(--wp--preset--spacing--9);
	--space-10: var(--wp--preset--spacing--10);
	--section-pad: var(--wp--custom--section-pad);
	--container-max: var(--wp--style--global--wide-size);
	--gutter: var(--wp--custom--gutter);
	--measure-body: var(--wp--custom--measure--body);
	--measure-lead: var(--wp--custom--measure--lead);
	--col-offset: var(--wp--custom--measure--offset);
	--radius-pill: var(--wp--custom--radius-pill);

	--dur-fast: var(--wp--custom--duration--fast);
	--dur-base: var(--wp--custom--duration--base);
	--dur-reveal: var(--wp--custom--duration--reveal);
	--ease-standard: var(--wp--custom--ease--standard);
	--ease-out: var(--wp--custom--ease--out);

	color-scheme: light;
}

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

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* the one heavier word in a headline (v10's "word"): bold it in the editor */
h1 strong,
h2 strong {
	font-weight: var(--fw-word);
	font-variation-settings: "wght" var(--fw-word);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.wp-element-button {
	transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
	}
}