/**
 * SauraTrans Core
 * Estilos mínimos compartidos. Los componentes visuales se añadirán en plugins separados.
 */

:root {
	--st-primary: #12304A;
	--st-secondary: #1F5A7A;
	--st-accent: #E6A321;
	--st-dark: #0B1720;
	--st-light: #F4F7F9;
	--st-text: #24313A;
	--st-radius-sm: 8px;
	--st-radius-md: 16px;
	--st-radius-lg: 28px;
	--st-transition: 220ms ease;
}

.st-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.st-link-reset {
	color: inherit;
	text-decoration: none;
}

.st-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 46px;
	padding: 0.8rem 1.15rem;
	border: 1px solid transparent;
	border-radius: var(--st-radius-sm);
	background: var(--st-primary);
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--st-transition),
		border-color var(--st-transition),
		color var(--st-transition),
		transform var(--st-transition);
}

.st-button:hover,
.st-button:focus-visible {
	background: var(--st-secondary);
	color: #fff;
	transform: translateY(-1px);
}

.st-button--accent {
	background: var(--st-accent);
	color: var(--st-dark);
}

.st-button--accent:hover,
.st-button--accent:focus-visible {
	background: var(--st-primary);
	color: #fff;
}

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

	.st-button:hover,
	.st-button:focus-visible {
		transform: none;
	}
}