/*
 * Button component (primary CTA). First consumer: home hero; reused from Stage 2.
 *
 * Turquoise is too light for text on white, so the filled button uses the dark
 * neutral as its label colour (see --gb-primary-contrast in tokens.css).
 */

.gb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gb-space-2xs);
	/* 44px minimum target for touch (WCAG 2.5.5 / 2.5.8). */
	min-block-size: 2.75rem;
	padding-block: var(--gb-space-2xs);
	padding-inline: var(--gb-space-m);
	border: 0;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-primary);
	color: var(--gb-primary-contrast);
	font-family: var(--gb-font-sans);
	font-size: var(--gb-step-0);
	font-weight: var(--gb-weight-bold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	/* Only compositor-friendly / cheap properties are transitioned. */
	transition:
		translate var(--gb-duration-fast) var(--gb-ease-out),
		background-color var(--gb-duration-fast) linear,
		color var(--gb-duration-fast) linear,
		box-shadow var(--gb-duration-fast) linear;
}

/*
 * Under the pointer: the site's light orange touch (owner, 2026-10-06), navy
 * words on it (5.4:1). Every variant, every page.
 */
.gb-button:hover {
	background-color: var(--gb-accent);
	color: var(--gb-color-navy);
	translate: 0 -2px;
}

.gb-button:active {
	translate: 0 0;
}

/*
 * Dark variant: for turquoise surfaces (home CTA panel), where the default
 * turquoise button would disappear into the background.
 */
.gb-button--dark {
	background-color: var(--gb-color-navy);
	color: var(--gb-scene-text);
}

.gb-button--dark:hover {
	background-color: var(--gb-accent);
	color: var(--gb-color-navy);
}

/* Outline variant: secondary actions next to a filled button. */
.gb-button--outline {
	box-shadow: inset 0 0 0 1.5px currentColor;
	background-color: transparent;
	color: inherit;
}

.gb-button--outline:hover {
	box-shadow: inset 0 0 0 1.5px var(--gb-accent);
	background-color: var(--gb-color-navy-a20);
	color: inherit;
}