/**
 * css/components/chips.css — Website 2.0 shared component library (#125)
 *
 * Flex-wrap "chip" tag list — a bordered pill per tag, hover fills rust.
 * Reference: services.html `.chips`/`.chip`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 72px;
}

.cg-chip {
	display: inline-flex;
	align-items: center;
	height: 52px;
	padding: 0 26px;
	border: var( --hairline ) solid var( --rule-on-dark );
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --cg-cream );
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

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

/* oncream — ink text, soft border. */
.cg-chips--cream .cg-chip {
	border-color: var( --rule );
	color: var( --cg-ink );
}

/* onrust — cream text, cream-tinted border (no flat `--rule-on-dark`
   token reads on a rust background). */
.cg-chips--rust .cg-chip {
	border-color: var( --cg-cream );
	color: var( --cg-cream );
}