/* Button — variant/size tuning lives in tokens.css; refine values per project. */

.ibv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ibv-space-xs);
	border-radius: var(--ibv-radius-md);
	font-family: var(--ibv-font-body);
	font-weight: var(--ibv-font-weight-medium);
	line-height: 1;
	letter-spacing: var(--ibv-tracking-normal);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--ibv-duration-normal) var(--ibv-ease-standard),
		color var(--ibv-duration-normal) var(--ibv-ease-standard),
		border-color var(--ibv-duration-normal) var(--ibv-ease-standard),
		transform var(--ibv-duration-fast) var(--ibv-ease-standard);
	border: 1px solid transparent;
	white-space: nowrap;
}

.ibv-button--small {
	padding: var(--ibv-space-xs) var(--ibv-space-md);
	font-size: var(--ibv-fs-small);
}

.ibv-button--medium {
	padding: var(--ibv-space-sm) var(--ibv-space-lg);
	font-size: var(--ibv-fs-body);
}

.ibv-button--large {
	padding: var(--ibv-space-md) var(--ibv-space-xl);
	font-size: var(--ibv-fs-h4);
}

.ibv-button--primary {
	background-color: var(--ibv-color-accent);
	color: var(--ibv-color-accent-contrast);
}

.ibv-button--primary:hover,
.ibv-button--primary:focus-visible {
	background-color: var(--ibv-color-link);
	color: var(--ibv-color-accent-contrast);
}

.ibv-button--secondary {
	background-color: transparent;
	color: var(--ibv-color-link);
	border-color: var(--ibv-color-link);
}

.ibv-button--secondary:hover,
.ibv-button--secondary:focus-visible {
	background-color: var(--ibv-color-accent);
	color: var(--ibv-color-accent-contrast);
	border-color: var(--ibv-color-accent);
}

.ibv-button--ghost {
	background-color: transparent;
	color: var(--ibv-color-text);
	padding-inline: 0;
}

.ibv-button--ghost:hover,
.ibv-button--ghost:focus-visible {
	color: var(--ibv-color-link-hover);
}

/* Filled / White — for use on dark backgrounds (hero, footer) */
.ibv-button--primary-inverse {
	background-color: var(--ibv-color-white);
	color: var(--ibv-color-link);
}

.ibv-button--primary-inverse:hover,
.ibv-button--primary-inverse:focus-visible {
	background-color: var(--ibv-color-link);
	color: var(--ibv-color-white);
}

/* Outlined / White — for use on dark backgrounds */
.ibv-button--secondary-inverse {
	background-color: transparent;
	color: var(--ibv-color-white);
	border-color: var(--ibv-color-white);
}

.ibv-button--secondary-inverse:hover,
.ibv-button--secondary-inverse:focus-visible {
	background-color: var(--ibv-color-white);
	color: var(--ibv-color-link);
	border-color: var(--ibv-color-white);
}

/* Arrow icon — currentColor inherits from button variant by default.
   `stroke`/`fill` are enforced in CSS (not left to the SVG's
   `stroke="currentColor"` presentation attribute, which loses to any cascade
   rule) so the arrow reliably follows the button's text colour. */
.ibv-button__arrow {
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
	transition: transform var(--ibv-duration-normal) var(--ibv-ease-standard);
}

.ibv-button:hover .ibv-button__arrow,
.ibv-button:focus-visible .ibv-button__arrow {
	transform: translateX(2px);
}