/**
 * Button system — ported from the sister theme (kodansha) at
 * `css/components/components.css` ~line 291. Kept BEM-compatible so a
 * single component can wear `.button .button--primary` etc.
 *
 * Memory note: sister theme is the design source — keep this file in
 * sync with the sister implementation as buttons evolve.
 *
 * Use:
 *   <button class="button button--primary">Reserve Your Spot</button>
 *   <a class="button button--secondary" href="…">Edit profile</a>
 *
 * Available modifiers:
 *   --primary       solid black, white text — primary CTA
 *   --secondary     white bg, black border + text — secondary action
 *   --ghost         transparent + 1px white border + uppercase tracking;
 *                   for CTAs sitting on dark sections (e.g. city-feature--la)
 *   --block         100% width
 *   --link          unstyled, inline-style underline
 *   --buy           white bg + 2px black border (purchase / RSVP-style)
 *   --buy-outline   transparent + 2px black border
 *   --coming-soon   muted disabled state for buy-style buttons
 *   --large         taller padding + 100% width
 *
 * Pills (e.g. `.my-account__tab`) intentionally do NOT use this system —
 * they're a separate visual language.
 */

.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	text-decoration: none !important;
	text-align: center;
	font-family: "Maax Medium";
	font-weight: 400;
	transition: all 0.2s;
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.button--primary {
	background: var(--color-black);
	color: var(--color-white) !important;
	border: 2px solid var(--color-black);
}

.button--primary:hover {
	background: var(--color-white);
	color: var(--color-black) !important;
	border-color: var(--color-black);
	text-decoration: none;
}

.button--primary:active {
	transform: scale(0.98);
}

.button--secondary {
	background: var(--color-white);
	color: var(--color-black);
	border: 2px solid var(--color-black);
}

.button--secondary:hover {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
	text-decoration: none;
}

.button--secondary:active {
	transform: scale(0.98);
}

.button--ghost {
	background: transparent;
	color: var(--color-white);
	border: 1px solid var(--color-white);
	padding: 1rem 3rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.button--ghost:hover {
	background: var(--color-white);
	color: var(--color-black) !important;
	text-decoration: none;
}

.button--ghost:active {
	transform: scale(0.98);
}

.button--block {
	display: block;
	width: 100%;
}

.button--link {
	background: none;
	color: var(--color-black);
	text-decoration: underline;
	padding: 0;
	border: none;
}

.button--link:hover {
	text-decoration: none;
}

.button--buy {
	background: var(--color-white);
	color: var(--color-black);
	border: 2px solid var(--color-black);
	padding: 0.75rem 1rem;
	line-height: 1.15;
}

.button--buy:hover {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

.button--buy-outline {
	background: transparent;
	color: var(--color-black);
	border: 2px solid var(--color-black);
	text-decoration: none;
	text-align: center;
	display: inline-block;
}

.button--buy-outline:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.button--coming-soon,
.button--buy.button--coming-soon,
.button--buy[disabled],
.button--buy:disabled {
	background: var(--color-background-3);
	color: var(--color-text-2);
	border-color: var(--color-line-2);
	cursor: not-allowed;
	pointer-events: none;
}

.button--buy.button--coming-soon:hover,
.button--buy[disabled]:hover,
.button--buy:disabled:hover {
	background: var(--color-background-3);
	color: var(--color-text-2);
	border-color: var(--color-line-2);
}

.button--large {
	width: 100%;
	padding: 1rem 2rem;
	font-size: 1.1rem;
}