/**
 * Upgrade Widget Kit — design tokens.
 *
 * The shared vocabulary every widget in the suite draws from: motion, the
 * on-dark overlay surface, focus, and editor-only notices. Nothing here paints
 * anything on its own; a widget opts in by consuming a token.
 *
 * Scope rule: a value earns a token when three or more places want it with the
 * same intent, or when it is a baseline the suite has committed to (focus,
 * reduced motion). Per-widget geometry stays in the widget's own
 * `--ual-` / `--uis-` / `--utc-` properties, because Elementor controls write to
 * those and each widget's geometry means something different.
 *
 * Registered under `upgrade-kit-tokens-<kit version>`, so plugins carrying
 * different vendored copies do not fight over one handle. Tokens are additive
 * within a major version — nothing is renamed or removed — which is what makes
 * two copies on one page harmless rather than a conflict.
 *
 * @package Upgrade\Kit
 */

:root {
	/* ---- Motion ----------------------------------------------------------
	 *
	 * Four durations, each named for the job it does rather than its length,
	 * so a widget picks by intent and the suite stays in step.
	 *
	 *   tap     immediate acknowledgement of a press
	 *   quick   a state change on something already in view (hover, colour)
	 *   base    something moving a short distance
	 *   reveal  something arriving, growing, or restacking
	 */
	--ukit-duration-tap: 0.06s;
	--ukit-duration-quick: 0.18s;
	--ukit-duration-base: 0.28s;
	--ukit-duration-reveal: 0.35s;

	/* Decelerating. The default: things arrive and settle.  */
	--ukit-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	/* Decelerating harder, with a touch of overshoot in feel. For an element
	   entering from nothing, where settling should read as deliberate. */
	--ukit-ease-entrance: cubic-bezier(0.22, 0.68, 0.28, 1);
	/* Symmetrical. Only for motion that leaves and returns along one path —
	   a rotation, a carousel step. Wrong for hover states. */
	--ukit-ease-inout: cubic-bezier(0.66, 0, 0.34, 1);

	/* ---- On-dark overlay surface -----------------------------------------
	 *
	 * The suite's overlay vocabulary: scrims, glass chips, hairlines and the
	 * text that sits on them. These are the values the lightbox, the magnifier
	 * chip and the cube faces each arrived at independently.
	 *
	 * All of them assume a dark backdrop. On a light surface, tint from the
	 * host hue instead — do not reach for these.
	 */
	--ukit-scrim: rgba(0, 0, 0, 0.55);
	--ukit-surface-sheen: rgba(255, 255, 255, 0.06);
	--ukit-hairline: rgba(255, 255, 255, 0.1);

	/* A control floating on media or on a dark face. Three states, because a
	   control with only a resting state is unfinished. */
	--ukit-control-bg: rgba(255, 255, 255, 0.18);
	--ukit-control-bg-hover: rgba(255, 255, 255, 0.28);
	--ukit-control-bg-active: rgba(255, 255, 255, 0.35);

	/* Text on the dark overlay. `muted` clears 4.5:1 against the suite's
	   darkest face (#141517) — do not dilute it further. */
	--ukit-on-dark: #ffffff;
	--ukit-on-dark-strong: rgba(255, 255, 255, 0.86);
	--ukit-on-dark-muted: rgba(255, 255, 255, 0.55);

	/* ---- Focus -----------------------------------------------------------
	 *
	 * Every hover affordance in the suite owes a keyboard equivalent, so the
	 * ring is a token and not a per-widget decision. Colour defaults to
	 * `currentColor` so the ring inherits whatever the control is painted in;
	 * a widget on media overrides it with an explicit light value.
	 */
	--ukit-focus-width: 2px;
	--ukit-focus-offset: 2px;
	--ukit-focus-color: currentColor;

	/* ---- Editor-only notices ---------------------------------------------
	 *
	 * What a builder sees in the Elementor canvas when a widget cannot render
	 * yet — no template chosen, no posts matched. Never shipped to visitors.
	 * Both values clear 4.5:1 on white.
	 */
	--ukit-editor-notice-border: #b4b9c1;
	--ukit-editor-notice-text: #6b7280;
}

/* Zeroing the duration tokens is the whole reduced-motion baseline: any widget
 * that transitions on a token gets this for free, and the suite stops having to
 * remember a per-plugin media query. Two of the four plugins had forgotten.
 *
 * Consequence to respect: a 0s transition never fires `transitionend`. Widget
 * JS must drive state directly and treat `transitionend` as decoration.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ukit-duration-tap: 0s;
		--ukit-duration-quick: 0s;
		--ukit-duration-base: 0s;
		--ukit-duration-reveal: 0s;
	}
}