/**
 * css/components/button.css — Website 2.0 shared component library (#122)
 *
 * 240x55 hard-edged outline button (hover inverts fill) + inline arrow
 * link. Three contexts, matching media.html exactly:
 *   .cg-btn          — default outline for cream/light bands (`.hnav .cta`)
 *   .cg-btn--cream    — outline for dark/rust bands, fills cream on hover (`.btn-out`)
 *   .cg-btn--solid    — solid ink fill, cream text, rust on hover (`.btn-solid`)
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: var( --btn-min-width );
	height: var( --btn-height );
	flex: none;
	border: var( --btn-border ) solid var( --text );
	background: var( --btn-background );
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: var( --btn-font-size );
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --text );
	text-decoration: none;
	cursor: pointer;
	transition: background var( --fade-out ) var( --fade-ease ), color var( --fade-out ) var( --fade-ease ), border-color var( --fade-out ) var( --fade-ease );
}

.cg-btn:hover {
	background: var( --text );
	color: var( --surface );
}

/* Outline variant for dark/rust bands. */
.cg-btn--cream {
	border-color: var( --rule );
	color: var( --cg-cream );
}

.cg-btn--cream:hover {
	background: var( --cg-cream );
	color: var( --cg-ink );
	border-color: var( --cg-cream );
}

/* Solid ink button (closing CTAs). */
.cg-btn--solid {
	background: var( --cg-ink );
	color: var( --cg-cream );
	border-color: var( --cg-ink );
}

.cg-btn--solid:hover {
	background: var( --accent );
	border-color: var( --accent );
	color: var( --cg-cream );
}

/* Inline arrow-link — plain text link with a nudging "→" glyph. */
.cg-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --accent );
	text-decoration: none;
}

.cg-link--ink {
	color: var( --text );
}

.cg-link--cream {
	color: var( --cg-cream );
}

/* Nudge-right arrow glyph shared by buttons and links. */
.cg-arrow {
	display: inline-block;
	transition: transform 0.35s cubic-bezier( 0.16, 1, 0.3, 1 );
}

a:hover .cg-arrow,
.cg-btn:hover .cg-arrow {
	transform: translateX( 6px );
}