/**
 * Polish layer, module "base" (docs.ia/build/polish-design.md §16.2). Tokens,
 * --precoin-sticky-top, the switch. Loads whenever any other module loads.
 * Part 1 is state, no media query for motion. Part 2 sets --precoin-motion,
 * the single source of truth every other module's part 2 reads (gated on
 * prefers-reduced-motion: no-preference — the layer's only reduced-motion
 * query, design §4).
 */

:root {
	--precoin-layer: 1; /* the script reads it: the stylesheet is loaded */

	/* Time. In is fast, out is slow. */
	--precoin-t-press: 80ms;  /* :active */
	--precoin-t-1: 160ms;     /* hover in, focus in */
	--precoin-t-2: 240ms;     /* hover out, state change */
	--precoin-t-3: 400ms;     /* settle, line, image zoom */
	--precoin-t-4: 640ms;     /* hero image, result card */
	--precoin-t-pen: 480ms;   /* one icon */
	--precoin-stagger: 60ms;  /* step of a set, maximum 5 steps */

	/* Easing. No curve goes above 1. */
	--precoin-ease-out: cubic-bezier(.2, .7, .2, 1);
	--precoin-ease-in: cubic-bezier(.5, 0, .9, .4);
	--precoin-ease-in-out: cubic-bezier(.65, 0, .35, 1);

	/* Distance. Movement is vertical only. */
	--precoin-shift-1: 8px;
	--precoin-shift-2: 12px;
	--precoin-shift-3: 16px;

	/* Tints from the presets, so a palette change stays correct. */
	--precoin-ink-06: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
	--precoin-ink-10: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
	--precoin-ink-12: color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	--precoin-ink-16: color-mix(in srgb, var(--wp--preset--color--ink) 16%, transparent);
	--precoin-ink-33: color-mix(in srgb, var(--wp--preset--color--ink) 33%, transparent);
	--precoin-on-dark-10: color-mix(in srgb, var(--wp--preset--color--on-dark) 10%, transparent);
	--precoin-on-dark-18: color-mix(in srgb, var(--wp--preset--color--on-dark) 18%, transparent);

	/* Elevation is a state. It is never a rest style. */
	--precoin-elev-1: 0 1px 2px var(--precoin-ink-06), 0 6px 16px -6px var(--precoin-ink-10);
	--precoin-elev-2: 0 2px 4px var(--precoin-ink-06), 0 14px 32px -10px var(--precoin-ink-16);

	/* Layout. 109px is the literal of the four header rules in theme.json. */
	--precoin-header-h: 109px;
	--precoin-sticky-top: calc(var(--precoin-header-h) + var(--wp--preset--spacing--lg));
}

/* Part 2: sets --precoin-motion. This is the only reduced-motion query of
   the base module; every other module's own part 2 query reads this token
   indirectly through the script's `motion` flag and through its own
   prefers-reduced-motion query (both stay correct independently: a module's
   CSS motion is gated on the media query, a module's JS motion is gated on
   the token, and the token and the query always agree in the same browser). */
@media screen and (prefers-reduced-motion: no-preference) {
	:root { --precoin-motion: 1; }
}