/**
 * Zezuru Elements — family design tokens (Standard §7.1).
 *
 * One token set shared by every front-end stylesheet of the plugin
 * (handle zezel-tokens; every block stylesheet depends on it, so it is
 * loaded once and only on pages that use a block).
 *
 * Tokens are scoped to Elements' own wrappers, so nothing leaks into the
 * theme. Theme first: the brand follows the theme's primary colour unless
 * the site owner set one in Settings (added as an inline style).
 *
 * @package Zezuru_Elements
 * @since   2.8.0 (moved out of frontend.css); 2.9.0 blocks added; 3.0.0 loading states
 */

:where(
	.zezel-grid, .zezel-filter, .zezel-search, .zezel-dash, .zezel-loop, .zezel-dynamic,
	.zezel-calc, .zezel-menu, .zezel-menu-layer, .zezel-spots, .zezel-compare, .zezel-scroll-dots,
	.zezel-form, .zezel-assist, .zezel-tbl, .zezel-cd, .zezel-events, .zezel-event-card, .zezel-tl, .zezel-ig,
	.zezel-pf
) {
	--zezel-brand: var(--wp--preset--color--primary, #6c5ce7);
	--zezel-brand-strong: color-mix(in srgb, var(--zezel-brand) 80%, #000);
	--zezel-brand-soft: color-mix(in srgb, var(--zezel-brand) 12%, transparent);
	--zezel-brand-ring: color-mix(in srgb, var(--zezel-brand) 22%, transparent);
	--zezel-bg: transparent;
	--zezel-surface: var(--wp--preset--color--base, #fff);
	--zezel-surface-2: color-mix(in srgb, currentColor 5%, transparent);
	--zezel-border: color-mix(in srgb, currentColor 12%, transparent);
	--zezel-text: currentColor;
	--zezel-text-2: color-mix(in srgb, currentColor 78%, transparent);
	--zezel-muted: color-mix(in srgb, currentColor 65%, transparent);
	--zezel-radius: 14px;
	--zezel-ease: cubic-bezier(.16, 1, .3, 1);
	--zezel-shadow: 0 1px 2px rgba(15, 16, 32, .04), 0 8px 24px -12px rgba(15, 16, 32, .18);
	--zezel-shadow-lg: 0 2px 4px rgba(15, 16, 32, .05), 0 22px 44px -18px rgba(15, 16, 32, .32);
	--zezel-ok: #00b894;
	--zezel-warn: #d97706;
	--zezel-danger: #dc2626;
	--zezel-info: #0284c7;
	--zezel-font: inherit;
	--zezel-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------
 * Shared loading states (since 3.0.0)
 *
 * Skeleton placeholders and a spinner any block can use while it waits —
 * they show the shape of what is coming, which feels faster than a blank.
 * ------------------------------------------------------------------ */
.zezel-skel {
	display: block;
	border-radius: 8px;
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, Canvas 55%, transparent) 50%, transparent 70%);
	background-size: 250% 100%;
	animation: zezel-skel 1.3s linear infinite;
}
.zezel-skel--line { height: .85em; margin: .45em 0; }
.zezel-skel--line.is-short { width: 55%; }
.zezel-skel--title { height: 1.25em; width: 78%; margin: .6em 0 .5em; }
.zezel-skel--media { aspect-ratio: 16 / 10; border-radius: var(--zezel-radius, 14px); }
.zezel-skel--avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; }
.zezel-skel-card { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.zezel-skel-card__body { padding: 0; }
.zezel-skel-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; }
.zezel-skel-row > div { flex: 1; min-width: 0; }
.zezel-skel-card:nth-child(2) .zezel-skel { animation-delay: .08s; }
.zezel-skel-card:nth-child(3) .zezel-skel { animation-delay: .16s; }
.zezel-skel-card:nth-child(4) .zezel-skel { animation-delay: .24s; }

.zezel-spinner {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -.2em;
	border-radius: 50%;
	border: .15em solid color-mix(in srgb, currentColor 22%, transparent);
	border-top-color: var(--zezel-brand, currentColor);
	animation: zezel-skel-spin .7s linear infinite;
}
@keyframes zezel-skel { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes zezel-skel-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
	.zezel-skel { animation: none; }
	.zezel-spinner { animation-duration: 1.6s; }
}