.button {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 22px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-weight: 800;
	line-height: 1;
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.button::before {
	position: absolute;
	inset: -50% auto -50% -70%;
	z-index: -1;
	width: 42%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.72), transparent);
	transform: skewX(-20deg);
	transition: left 520ms ease;
	content: "";
}

.button:hover {
	transform: translate(var(--button-x, 0), calc(var(--button-y, 0) - 2px));
	box-shadow: 0 18px 36px rgba(255, 185, 0, 0.25);
}

.button--primary {
	animation: ctr-button-breathe 4.8s ease-in-out infinite;
}

.button:hover::before {
	left: 130%;
}

.button:active {
	transform: translateY(0);
	box-shadow: none;
}

.button:focus-visible {
	outline: 3px solid rgba(255, 185, 0, 0.45);
	outline-offset: 3px;
	animation: ctr-focus-pulse 1100ms ease-in-out infinite;
}

.button--primary {
	background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
	color: var(--color-text);
}

.button--secondary {
	border-color: var(--color-gray-200);
	background: var(--color-white);
	color: var(--color-text);
}

.button--dark {
	background: var(--color-black);
	color: var(--color-white);
}

.button--ghost {
	border-color: var(--color-gray-200);
	background: var(--color-white);
	color: var(--color-text);
}

.button--small {
	min-height: 40px;
	padding: 11px 16px;
	font-size: 0.9rem;
}

.button--full {
	width: 100%;
}

@keyframes ctr-button-breathe {
	0%,
	100% {
		box-shadow: 0 0 0 rgba(255, 185, 0, 0);
	}

	50% {
		box-shadow: 0 12px 28px rgba(255, 185, 0, 0.2);
	}
}

@keyframes ctr-focus-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(255, 185, 0, 0.24);
	}

	50% {
		box-shadow: 0 0 0 8px rgba(255, 185, 0, 0.08);
	}
}