/*
 * Componente: botones.
 * Variantes: --primary (dorado sólido) y --ghost (contorno).
 */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0.8em 1.9em;
	font-family: var(--font-body);
	font-size: var(--text-s);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius-s);
	cursor: pointer;
	transition:
		background-color var(--duration-base) var(--ease-out),
		border-color var(--duration-base) var(--ease-out),
		color var(--duration-base) var(--ease-out);
}

.button--primary {
	background-color: var(--color-gold);
	color: var(--color-black);
}

.button--primary:hover {
	background-color: var(--color-gold-bright);
	color: var(--color-black);
}

.button--ghost {
	background-color: transparent;
	border-color: color-mix(in srgb, var(--color-ivory) 45%, transparent);
	color: var(--color-ivory);
}

.button--ghost:hover {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.button:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

.button:disabled,
.button[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}