/**
 * P5-H0 Chunk D component primitive convergence.
 *
 * This module extends the small generic primitive foundation with composable
 * component anatomy/states. WordPress/Core or the owning capability retains
 * semantics and interaction behavior.
 */

:root,
body {
	--zare-theme-button-height-xs: 2rem;
	--zare-theme-button-height-sm: 2.25rem;
	--zare-theme-button-height-default: 2.5rem;
	--zare-theme-button-height-lg: 2.75rem;
	--zare-theme-card-gap: var(--wp--preset--spacing--4, 1rem);
	--zare-theme-field-gap: var(--wp--preset--spacing--2, 0.5rem);
}

:where(.wp-element-button, .wp-block-button__link, .zare-theme-ui-button) {
	min-height: var(--zare-theme-button-height-default);
}
/* P5-H0 Chunk D — canonical primitive grammar. */
.zare-theme-ui-button--size-xs { min-height: var(--zare-theme-button-height-xs); padding: 0.25rem 0.625rem; font-size: var(--wp--preset--font-size--xs, 0.75rem); }
.zare-theme-ui-button--size-sm { min-height: var(--zare-theme-button-height-sm); padding: 0.375rem 0.75rem; font-size: var(--wp--preset--font-size--sm, 0.875rem); }
.zare-theme-ui-button--size-default { min-height: var(--zare-theme-button-height-default); padding: var(--zare-theme-control-padding-block) var(--zare-theme-control-padding-inline); }
.zare-theme-ui-button--size-lg { min-height: var(--zare-theme-button-height-lg); padding: 0.625rem 1.125rem; font-size: var(--wp--preset--font-size--base, 1rem); }

.wp-block-paragraph.is-style-badge,
.zare-theme-ui-badge {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
	border-color: transparent;
}
.wp-block-paragraph.is-style-badge.zare-badge-variant-secondary, .zare-theme-ui-badge--secondary { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--secondary-foreground); border-color: transparent; }
.wp-block-paragraph.is-style-badge.zare-badge-variant-destructive, .zare-theme-ui-badge--destructive { background: var(--wp--preset--color--destructive); color: var(--wp--preset--color--destructive-foreground); border-color: transparent; }
.wp-block-paragraph.is-style-badge.zare-badge-variant-outline, .zare-theme-ui-badge--outline { background: transparent; color: var(--wp--preset--color--foreground); border-color: var(--wp--preset--color--border); }
.wp-block-paragraph.is-style-badge.zare-badge-variant-ghost, .zare-theme-ui-badge--ghost { background: transparent; color: var(--wp--preset--color--foreground); border-color: transparent; }
.wp-block-paragraph.is-style-badge.zare-badge-variant-link, .zare-theme-ui-badge--link { background: transparent; color: var(--wp--custom--zare-experience--color--primary-text, var(--wp--preset--color--foreground)); border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; }

.wp-block-group.is-style-card,
.zare-theme-ui-card { box-sizing: border-box; background: var(--wp--preset--color--card); color: var(--wp--preset--color--card-foreground); border: 1px solid var(--wp--preset--color--border); border-radius: var(--zare-theme-surface-radius); box-shadow: var(--zare-theme-surface-shadow); padding: var(--zare-theme-component-padding); }
.zare-theme-ui-card { display: grid; gap: var(--zare-theme-card-gap); }
.zare-theme-ui-card__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--zare-theme-control-gap); align-items: start; }
.zare-theme-ui-card__title, .zare-theme-ui-card__description, .zare-theme-ui-card__content, .zare-theme-ui-card__footer { min-width: 0; margin: 0; }
.zare-theme-ui-card__description { color: var(--wp--preset--color--muted-foreground); }
.zare-theme-ui-card__action { justify-self: end; align-self: start; }
.zare-theme-ui-card__content { display: grid; gap: var(--zare-theme-card-gap); }
.zare-theme-ui-card__footer { display: flex; flex-wrap: wrap; gap: var(--zare-theme-control-gap); align-items: center; }

.zare-theme-ui-field { display: grid; gap: var(--zare-theme-field-gap); min-width: 0; }
.zare-theme-ui-field__label { font-size: var(--wp--preset--font-size--sm, 0.875rem); font-weight: 600; line-height: 1.25; }
.zare-theme-ui-field__description { color: var(--wp--preset--color--muted-foreground); font-size: var(--wp--preset--font-size--xs, 0.75rem); }
.zare-theme-ui-field__error { color: var(--wp--preset--color--destructive); font-size: var(--wp--preset--font-size--xs, 0.75rem); font-weight: 500; }
.zare-theme-ui-control[aria-invalid="true"] { border-color: var(--wp--preset--color--destructive); }
.zare-theme-ui-control:read-only { background: var(--wp--preset--color--muted); color: var(--wp--preset--color--muted-foreground); }
.zare-theme-ui-control:disabled { cursor: not-allowed; opacity: 0.5; }

.zare-theme-ui-input-group { display: flex; min-width: 0; min-height: var(--zare-theme-control-height); align-items: stretch; overflow: clip; border: 1px solid var(--wp--preset--color--input); border-radius: var(--zare-theme-control-radius); background: var(--wp--preset--color--background); }
.zare-theme-ui-input-group .zare-theme-ui-control { min-width: 0; flex: 1 1 auto; border: 0; border-radius: 0; background: transparent; }
.zare-theme-ui-input-group__addon, .zare-theme-ui-input-group__text { display: inline-flex; align-items: center; gap: 0.375rem; padding-inline: 0.75rem; color: var(--wp--preset--color--muted-foreground); white-space: nowrap; }
.zare-theme-ui-input-group__button { flex: 0 0 auto; align-self: center; margin: 0.1875rem; }
.zare-theme-ui-input-group__addon[data-align="block-start"], .zare-theme-ui-input-group__addon[data-align="block-end"] { flex-basis: 100%; }
.zare-theme-ui-input-group:has(.zare-theme-ui-input-group__addon[data-align="block-start"], .zare-theme-ui-input-group__addon[data-align="block-end"]) { flex-wrap: wrap; }

.zare-theme-ui-tabs { display: grid; gap: var(--zare-theme-control-gap); }
.zare-theme-ui-tabs [role="tablist"] { display: flex; gap: 0.25rem; align-items: center; }
.zare-theme-ui-tabs [role="tab"] { min-height: var(--zare-theme-control-height-compact); padding: 0.375rem 0.75rem; border: 1px solid transparent; border-radius: var(--zare-theme-control-radius); background: transparent; color: var(--wp--preset--color--muted-foreground); font: inherit; font-weight: 600; }
.zare-theme-ui-tabs [role="tab"][aria-selected="true"] { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-foreground); }
.zare-theme-ui-tabs--line [role="tablist"] { border-block-end: 1px solid var(--wp--preset--color--border); }
.zare-theme-ui-tabs--line [role="tab"] { margin-block-end: -1px; border-radius: 0; }
.zare-theme-ui-tabs--line [role="tab"][aria-selected="true"] { background: transparent; color: var(--wp--preset--color--foreground); border-block-end-color: var(--wp--preset--color--foreground); }

.zare-theme-ui-toggle, .zare-theme-ui-toggle-group > * { display: inline-flex; align-items: center; justify-content: center; min-height: var(--zare-theme-control-height-compact); padding: 0.375rem 0.75rem; border: 1px solid transparent; border-radius: var(--zare-theme-control-radius); background: transparent; color: var(--wp--preset--color--foreground); font: inherit; }
.zare-theme-ui-toggle--outline { border-color: var(--wp--preset--color--border); }
.zare-theme-ui-toggle[aria-pressed="true"], .zare-theme-ui-toggle-group > [aria-pressed="true"], .zare-theme-ui-toggle-group > [aria-checked="true"] { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-foreground); }
.zare-theme-ui-toggle-group { display: inline-flex; gap: 0.25rem; align-items: center; }
.zare-theme-ui-toggle-group[aria-orientation="vertical"] { flex-direction: column; align-items: stretch; }

.zare-theme-ui-checkbox, .zare-theme-ui-radio { inline-size: 1rem; block-size: 1rem; margin: 0; accent-color: var(--wp--preset--color--primary); }
.zare-theme-ui-radio { border-radius: 50%; }
.zare-theme-ui-switch { position: relative; display: inline-flex; width: 2.25rem; height: 1.25rem; padding: 0.125rem; border: 0; border-radius: var(--wp--custom--zare-experience--radius--full, 999px); background: var(--wp--preset--color--input); }
.zare-theme-ui-switch::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: var(--wp--preset--color--background); box-shadow: var(--wp--preset--shadow--xs, 0 1px 2px rgb(0 0 0 / 0.08)); transition: transform 160ms ease; }
.zare-theme-ui-switch[aria-checked="true"] { background: var(--wp--preset--color--primary); }
.zare-theme-ui-switch[aria-checked="true"]::after { transform: translateX(1rem); }

.zare-theme-ui-skeleton { min-height: 1rem; border-radius: var(--zare-theme-control-radius); background: var(--wp--preset--color--muted); animation: zare-theme-skeleton-pulse 1.5s ease-in-out infinite; }
.zare-theme-ui-spinner { inline-size: 1rem; block-size: 1rem; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-block-start-color: currentColor; border-radius: 50%; animation: zare-theme-spinner-spin 0.8s linear infinite; }
@keyframes zare-theme-skeleton-pulse { 50% { opacity: 0.55; } }
@keyframes zare-theme-spinner-spin { to { transform: rotate(360deg); } }

.zare-theme-ui-breadcrumb, .zare-theme-ui-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.zare-theme-ui-breadcrumb ol, .zare-theme-ui-pagination ul { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.zare-theme-ui-breadcrumb [aria-current="page"] { color: var(--wp--preset--color--muted-foreground); }
.zare-theme-ui-pagination a, .zare-theme-ui-pagination button { display: inline-flex; min-width: var(--zare-theme-control-height-compact); min-height: var(--zare-theme-control-height-compact); align-items: center; justify-content: center; border-radius: var(--zare-theme-control-radius); }
.zare-theme-ui-pagination [aria-current="page"] { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-foreground); }

.zare-theme-ui-tooltip, .zare-theme-ui-popover { z-index: 30; max-width: min(20rem, calc(100vw - 2rem)); border: 1px solid var(--wp--preset--color--border); border-radius: var(--zare-theme-control-radius); box-shadow: var(--wp--preset--shadow--md, var(--zare-theme-surface-shadow)); }
.zare-theme-ui-tooltip { padding: 0.375rem 0.5rem; background: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); font-size: var(--wp--preset--font-size--xs, 0.75rem); }
.zare-theme-ui-popover { padding: var(--zare-theme-component-padding); background: var(--wp--preset--color--popover, var(--wp--preset--color--card)); color: var(--wp--preset--color--popover-foreground, var(--wp--preset--color--card-foreground)); }

@media (prefers-reduced-motion: reduce) {
	.zare-theme-ui-skeleton, .zare-theme-ui-spinner { animation: none; }
}


/* Composite controls own one focus halo; nested controls do not draw a second. */
.zare-theme-ui-input-group:focus-within {
	outline: 2px solid transparent;
	outline-offset: var(--zare-theme-focus-ring-offset, 0);
	box-shadow: 0 0 0 var(--zare-theme-focus-ring-width, 2px) var(--zare-theme-focus-ring-color);
}
.zare-theme-ui-input-group .zare-theme-ui-control:focus-visible {
	outline: none;
	box-shadow: none;
}
:where(.zare-theme-ui-toggle, .zare-theme-ui-switch, .zare-theme-ui-pagination a, .zare-theme-ui-pagination button):focus-visible {
	outline: 2px solid transparent;
	outline-offset: var(--zare-theme-focus-ring-offset, 0);
	box-shadow: 0 0 0 var(--zare-theme-focus-ring-width, 2px) var(--zare-theme-focus-ring-color);
}

@media (pointer: coarse) {
	/* Visual density remains independent; an invisible hit area preserves 44px. */
	:where(.wp-block-button__link, .zare-theme-ui-button, .zare-theme-ui-icon-button, .zare-theme-ui-toggle) {
		position: relative;
	}
	:where(.wp-block-button__link, .zare-theme-ui-button, .zare-theme-ui-icon-button, .zare-theme-ui-toggle)::after {
		content: "";
		position: absolute;
		inset-inline-start: 50%;
		inset-block-start: 50%;
		inline-size: max(100%, 44px);
		block-size: max(100%, 44px);
		transform: translate(-50%, -50%);
	}
	.wp-block-button__link,
	.zare-theme-ui-button { min-height: var(--zare-theme-button-height-default); }
	.zare-theme-ui-icon-button {
		width: var(--zare-theme-control-height, 40px);
		height: var(--zare-theme-control-height, 40px);
		min-width: var(--zare-theme-control-height, 40px);
		min-height: var(--zare-theme-control-height, 40px);
	}
	.wp-block-button.is-style-link .wp-block-button__link,
	.zare-theme-ui-button--link { min-height: auto; }
}