/**
 * ZARE Theme primitive UI foundation.
 *
 * These are presentation primitives, not business/domain components. Core
 * blocks remain the preferred authoring surface; generic CSS classes provide
 * the same token contract for future theme/app surfaces that are not blocks.
 */

:root,
body {
	--zare-theme-control-height: var(--wp--custom--zare-experience--control--min-height, 40px);
	--zare-theme-control-height-compact: var(--wp--custom--zare-experience--control--compact-height, 36px);
	--zare-theme-control-height-comfortable: var(--wp--custom--zare-experience--control--comfortable-height, 44px);
	--zare-theme-control-radius: var(--wp--custom--zare-experience--shape--control, var(--wp--custom--zare-experience--radius--md, 0.5rem));
	--zare-theme-surface-radius: var(--wp--custom--zare-experience--shape--surface, var(--wp--custom--zare-experience--radius--md, 0.5rem));
	--zare-theme-badge-radius: var(--wp--custom--zare-experience--shape--badge, var(--wp--custom--zare-experience--radius--full, 999px));
	--zare-theme-control-gap: var(--wp--custom--zare-experience--density--control-gap, var(--wp--preset--spacing--2, 0.5rem));
	--zare-theme-control-padding-block: var(--wp--custom--zare-experience--density--control-block-padding, 0.5rem);
	--zare-theme-control-padding-inline: var(--wp--custom--zare-experience--density--control-inline-padding, 1rem);
	--zare-theme-component-padding: var(--wp--custom--zare-experience--density--component-padding, var(--wp--preset--spacing--4, 1rem));
	--zare-theme-surface-shadow: var(--wp--custom--zare-experience--elevation--surface, var(--wp--preset--shadow--sm, 0 1px 2px rgba(24, 24, 27, 0.06)));
}

/* Shared control geometry. Borders are reserved inside border-box. */
:where(
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-search__button,
	.zare-theme-ui-button,
	.zare-theme-ui-icon-button
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--zare-theme-control-height-compact);
	gap: var(--zare-theme-control-gap);
	border: 1px solid transparent;
	border-radius: var(--zare-theme-control-radius);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	line-height: 1.25rem;
	text-decoration: none;
	white-space: nowrap;
}

.zare-theme-ui-button {
	padding: var(--zare-theme-control-padding-block) var(--zare-theme-control-padding-inline);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
}

/* Core Fill already receives theme.json colours; reserve its 1px border too. */
.wp-block-button:not(.is-style-outline):not(.is-style-secondary):not(.is-style-ghost):not(.is-style-link):not(.is-style-destructive) .wp-block-button__link {
	border-color: transparent;
}

.wp-block-button.is-style-secondary .wp-block-button__link,
.zare-theme-ui-button--secondary {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary-foreground);
	border-color: transparent;
}

/*
 * Core Button Outline is canonically customized in theme.json under
 * styles.blocks.core/button.variations.outline — the same Styles Engine layer
 * WordPress uses for the Core variation. This CSS mirrors the settled geometry
 * as a compatibility fallback and for non-WordPress/static proof surfaces.
 * Explicit authored block padding remains author-controlled by WordPress.
 */
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button,
.wp-block-button > .wp-block-button__link.is-style-outline.wp-element-button,
.zare-theme-ui-button--outline {
	padding: var(--zare-theme-control-padding-block) var(--zare-theme-control-padding-inline);
	background: transparent;
	color: var(--zare-theme-quiet-button-fg, var(--wp--preset--color--foreground));
	border-width: 1px;
	border-style: solid;
	border-color: var(--zare-theme-outline-button-border, var(--wp--preset--color--border));
}

.wp-block-button.is-style-ghost .wp-block-button__link,
.zare-theme-ui-button--ghost {
	background: transparent;
	color: var(--zare-theme-quiet-button-fg, var(--wp--preset--color--foreground));
	border-color: transparent;
}

.wp-block-button.is-style-destructive .wp-block-button__link,
.zare-theme-ui-button--destructive {
	background: var(--wp--preset--color--destructive);
	color: var(--wp--preset--color--destructive-foreground);
	border-color: transparent;
}

.wp-block-button.is-style-link .wp-block-button__link,
.zare-theme-ui-button--link {
	min-height: auto;
	padding: 0;
	background: transparent;
	color: var(--wp--custom--zare-experience--color--primary-text, var(--wp--preset--color--foreground));
	border: 0;
	border-radius: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.zare-theme-ui-icon-button {
	width: var(--zare-theme-control-height);
	height: var(--zare-theme-control-height);
	min-width: var(--zare-theme-control-height);
	padding: 0;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary-foreground);
	border-color: var(--wp--preset--color--border);
}

/* Optical alignment: SVG occupies an explicit centered line box. */
:where(.zare-theme-ui-button, .zare-theme-ui-icon-button, .wp-block-button__link) .zare-icon,
:where(.zare-theme-ui-button, .zare-theme-ui-icon-button, .wp-block-button__link) .zare-icon-slot {
	align-self: center;
	vertical-align: 0;
}

:where(.zare-theme-ui-button, .zare-theme-ui-icon-button) .zare-icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* Text/search/select/textarea primitive. Scope classes are available outside Core. */
.wp-block-search__input,
.zare-theme-ui-control {
	box-sizing: border-box;
	min-height: var(--zare-theme-control-height);
	max-width: 100%;
	border: 1px solid var(--wp--preset--color--input);
	border-radius: var(--zare-theme-control-radius);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font: inherit;
	line-height: 1.4;
	padding: var(--zare-theme-control-padding-block) var(--zare-theme-control-padding-inline);
}

select.zare-theme-ui-control {
	padding-inline-end: 2.25rem;
}

textarea.zare-theme-ui-control {
	min-height: 6rem;
	resize: vertical;
}

.zare-theme-ui-control::placeholder,
.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted-foreground);
	opacity: 1;
}

/* Display primitives mapped to Core styles wherever practical. */
.wp-block-group.is-style-surface,
.zare-theme-ui-surface {
	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);
}

.wp-block-group.is-style-muted-surface,
.zare-theme-ui-surface--muted {
	box-sizing: border-box;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
	border: 1px solid transparent;
	border-radius: var(--zare-theme-surface-radius);
	padding: var(--zare-theme-component-padding);
}

.wp-block-paragraph.is-style-eyebrow {
	margin-bottom: 0;
	color: var(--wp--custom--zare-experience--color--primary-text, var(--wp--preset--color--foreground));
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wp-block-paragraph.is-style-badge,
.zare-theme-ui-badge {
	display: flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	box-sizing: border-box;
	min-height: 1.5rem;
	margin: 0;
	padding: 0.125rem 0.5rem;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary-foreground);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--zare-theme-badge-radius);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 600;
	line-height: 1rem;
	white-space: nowrap;
}

.wp-block-separator,
.zare-theme-ui-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--border);
}

@media (pointer: coarse) {
	:where(
		.wp-element-button,
		.wp-block-button__link,
		.wp-block-search__button,
		.wp-block-search__input,
		.zare-theme-ui-button,
		.zare-theme-ui-icon-button,
		.zare-theme-ui-control
	) {
		min-height: var(--wp--custom--zare-experience--touch--target, 44px);
	}

	.wp-block-button.is-style-link .wp-block-button__link,
	.zare-theme-ui-button--link {
		min-height: auto;
	}

	.zare-theme-ui-icon-button {
		width: var(--wp--custom--zare-experience--touch--target, 44px);
		height: var(--wp--custom--zare-experience--touch--target, 44px);
		min-width: var(--wp--custom--zare-experience--touch--target, 44px);
	}
}