/*
 * Brand primitive components — `.isjac-*` classes that consumers
 * across the engagement reuse without re-implementing. Each primitive
 * exposes its own configuration tokens so callers can adjust per-surface
 * without overriding the class itself.
 *
 * This file (primitives.css.template) is the source. Composer post-install
 * substitutes isjac and writes the rendered output to
 * wp-content/zysys-generated/isjac/css/primitives.css in the consumer
 * repo. To change a primitive, edit this template and re-run
 * `composer install` (or `composer dump-autoload --no-dev`) in the
 * consumer repo to regenerate.
 *
 * Naming convention: `<brand>-<class>` per ADR-002. When the
 * engagement's brand slug changes, this template rebuilds with the new
 * prefix and every consumer's class names follow automatically.
 */

/* ---------- Spinner ----------
 * 16x16 circular stroke that fits anywhere. Defaults match brand-guide
 * section 11 (button loading state).
 *
 * Customization tokens (override per-surface as needed):
 *   --isjac-spinner-size       outer diameter (default 16px)
 *   --isjac-spinner-thickness  stroke width (default 2px)
 *   --isjac-spinner-color      stroke color (default currentColor)
 *   --isjac-spinner-speed      rotation period (default 700ms)
 *
 * Centering: the consumer positions the spinner (e.g. absolute-centered
 * inside a button via top/left:50% and translate(-50%,-50%)) and adds
 * the `.isjac-spinner--centered` modifier. The centered keyframe
 * composes the centering translate into the rotation so the animation
 * does not clobber the consumer's centering transform — CSS `transform`
 * is a single property and the last value wins. Modern `rotate:` /
 * `translate:` as separate properties would also work; this composition
 * keeps the support floor low.
 */
.isjac-spinner {
	display: inline-block;
	width: var(--isjac-spinner-size, 16px);
	height: var(--isjac-spinner-size, 16px);
	border: var(--isjac-spinner-thickness, 2px) solid var(--isjac-spinner-color, currentColor);
	border-right-color: transparent;
	border-radius: 50%;
	animation: isjac-spinner-rotate var(--isjac-spinner-speed, 700ms) linear infinite;
}

.isjac-spinner--centered {
	animation-name: isjac-spinner-rotate-centered;
}

@keyframes isjac-spinner-rotate {
	to { transform: rotate(360deg); }
}

@keyframes isjac-spinner-rotate-centered {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- Surface taxonomy ----------
 * Four-pattern container system per brand-guide §Surfaces (ADR-013
 * Phase C). The decision rule: Floating for transient overlays, Card
 * for interactive units (the whole surface is the click target), Panel
 * for visible boundaries without interaction, Section as the default
 * (no chrome).
 *
 * `.isjac-section` is intentionally rule-less — naming it lets
 * code review and the brand-conform scanner treat "this used to be a
 * Card but should be a Section" as a deliberate semantic change.
 *
 * `:where()` wraps the interaction-target selectors so engagement code
 * can override card hover without specificity warfare.
 */
.isjac-section {
	/* No chrome — content flows in the page rhythm. Declared so the
	 * surface taxonomy is explicit. */
}

.isjac-panel {
	background: var(--isjac-color-paper);
	border: 1px solid var(--isjac-color-border);
	border-radius: var(--isjac-radius-md);
	padding: var(--isjac-pad-lg);
}

.isjac-card {
	background: var(--isjac-color-paper);
	border-radius: var(--isjac-radius-md);
	padding: var(--isjac-pad-lg);
	box-shadow: var(--isjac-shadow-card);
	transition:
		box-shadow var(--isjac-dur-base) var(--isjac-ease-standard),
		transform  var(--isjac-dur-fast) var(--isjac-ease-standard);
}
.isjac-card:where(a, button, [role="link"], [role="button"]) {
	cursor: pointer;
}
.isjac-card:where(a, button, [role="link"], [role="button"]):hover,
.isjac-card:where(a, button, [role="link"], [role="button"]):focus-visible {
	box-shadow: var(--isjac-shadow-card-hover);
	transform: translateY(-1px);
}

.isjac-floating {
	background: var(--isjac-color-paper);
	border-radius: var(--isjac-radius-md);
	padding: var(--isjac-pad-md);
	box-shadow: var(--isjac-shadow-overlay);
}