/**
 * StepDecor Button Primitives
 * Shared by every widget that renders a call-to-action link — Header
 * CTA, Footer CTA, Section CTAs, Portfolio/Blog "View" links (Phase 06).
 * Concrete color/padding overrides come from each widget's Elementor
 * Style tab (see Trait_Shared_Style_Controls); these rules are the
 * structural + default-brand baseline only.
 */

.sd-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-space-2);
	font-family: var(--sd-font-body);
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: var(--sd-radius-sm);
	padding: .85rem 2rem;
	transition: background var(--sd-transition-fast), color var(--sd-transition-fast), transform var(--sd-transition-fast), opacity var(--sd-transition-fast);
	white-space: nowrap;
}

.sd-btn--primary {
	background: var(--sd-color-accent);
	color: #fff;
}

.sd-btn--primary:hover {
	background: var(--sd-color-primary);
	transform: translateY(-2px);
}

.sd-btn--outline {
	border: 1px solid var(--sd-color-border-strong);
	color: var(--sd-color-text);
	background: transparent;
}

.sd-btn--outline:hover {
	border-color: var(--sd-color-accent);
	color: var(--sd-color-accent);
}

.sd-btn--dark {
	background: var(--sd-color-surface-dark);
	color: #fff;
}

.sd-btn--dark:hover {
	background: var(--sd-color-primary);
}

.sd-btn--pill {
	border-radius: var(--sd-radius-pill);
}

.sd-btn--sm {
	padding: .5rem 1.3rem;
	font-size: .72rem;
}