/**
 * Button Styles (Framework Enhancement Layer)
 *
 * VISUAL THEME FRAMEWORK.
 *
 * blocks/button/button.css (Block System phase) already defines
 * .atb-button's color/size/variant system completely — this file
 * does not redefine background-color, color, border-color, padding,
 * or font-size for any .atb-button variant.
 *
 * HONEST NOTE ON THE 'transition' PROPERTY: button.css already sets
 * `transition: background-color 0.15s ease, border-color 0.15s ease,
 * color 0.15s ease;`. This file's .atb-button rule below ALSO sets
 * `transition`, as a deliberate superset that includes those same
 * three values plus `transform 0.1s ease` and `box-shadow 0.1s ease`
 * for the new lift interaction. This is a genuine property-level
 * overlap, not an accident — CSS shorthand properties can't be
 * additively merged across two files without one full redeclaration,
 * so the alternative would be editing button.css directly, which
 * this phase avoids in favor of carrying the original three values
 * forward unchanged inside this file's own declaration. Because this
 * stylesheet is enqueued with 'atb-tokens' as a dependency and a
 * later priority than blocks.php's default-priority enqueue, this
 * rule's `transition` value is what actually applies — and it
 * preserves 100% of button.css's original transition behavior while
 * adding the new properties, so no animation present before this
 * phase is lost.
 *
 * Every other property below (transform, box-shadow on hover,
 * outline on focus) is new — button.css never set any of them.
 *
 * TOKEN-ONLY.
 */

.atb-button {
	transform: translateY(0);
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.atb-button:hover {
	transform: translateY(-1px);
}

.atb-button:active {
	transform: translateY(0);
}

.atb-button--primary:hover,
.atb-button--secondary:hover {
	box-shadow: var(--atb-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.05));
}

.atb-button:focus-visible {
	outline: 2px solid var(--atb-color-primary, #2563eb);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.atb-button,
	.atb-card {
		transition: none;
	}

	.atb-button:hover,
	.atb-card:hover {
		transform: none;
	}
}