/* canon-classes.css — the warp grammar classes (gy-button, gy-kpi-card,
 * gy-badge + variants), vendored from gyrum-labs/warp web/src/app.css with
 * every token reference mapped to the canon Home palette (vendor/tokens.css).
 * Class rules only — no :root, no token definitions — so this file cannot
 * collide with the canon token source. Every var() here is a --home-* canon
 * token (rounds 1-3 reviews, warp#20020).
 * DO NOT EDIT stylistically — grammar changes happen upstream in warp.
 */

.gy-button {
	display: inline-flex; align-items: center; gap: 0.375rem;
	padding: 0.375rem 0.875rem; font-size: 0.875rem; font-weight: 500;
	color: var(--home-text); background: var(--home-bg);
	border: 1px solid var(--home-border); border-radius: var(--home-radius);
	cursor: pointer;
	transition: background var(--motion-fast),
		border-color var(--motion-fast),
		color var(--motion-fast);
	font-family: inherit;
	text-decoration: none;
}

.gy-button:hover:not(:disabled) { background: var(--home-surface); }

.gy-button:disabled { opacity: 0.55; cursor: not-allowed; }

.gy-button--primary {
	background: var(--home-accent); border-color: var(--home-accent); color: var(--text-on-accent);
}

.gy-button--primary:hover:not(:disabled) {
	background: var(--home-accent-hover); border-color: var(--home-accent-hover);
}

.gy-button--danger { color: var(--error); border-color: var(--error); }

.gy-button--danger:hover:not(:disabled) {
	background: var(--bad-soft); color: var(--error);
}

.gy-button--warn { color: var(--warn); border-color: var(--warn); }

.gy-button--warn:hover:not(:disabled) {
	background: var(--warn-soft); color: var(--warn);
}

.gy-badge {
	display: inline-flex; align-items: center; gap: 0.25rem;
	padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600;
	border-radius: 999px; background: var(--home-surface);
	color: var(--home-text-muted); border: 1px solid var(--home-border);
	font-variant-numeric: tabular-nums;
}

.gy-badge--ready { color: var(--home-text-muted); background: var(--never-soft); border-color: var(--never); }

.gy-badge--in-progress { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-soft); }

.gy-badge--awaiting-merge { color: var(--home-accent); background: var(--home-accent-soft); border-color: var(--home-accent-soft); }


.gy-badge--done { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-soft); }

.gy-badge--blocked { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-soft); }

.gy-badge--unknown { color: var(--home-text-muted); background: var(--never-soft); border-color: var(--never); }

.gy-badge--cancelled {
	color: var(--home-text-muted); background: var(--home-surface);
	border-color: var(--home-border); text-decoration: line-through;
}

.gy-badge--high { color: var(--bad); }


.gy-badge--completed { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-soft); }

.gy-badge--created { color: var(--home-accent); background: var(--home-accent-soft); border-color: var(--home-accent-soft); }

.gy-kpi-card {
	background: var(--home-bg); border: 1px solid var(--home-border);
	border-radius: var(--home-radius); padding: 1rem 1.25rem;
	box-shadow: var(--shadow-sm);
}

.gy-kpi-card__label {
	font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--home-text-muted); margin: 0 0 0.25rem;
}

.gy-kpi-card__value {
	font-size: 1.75rem; font-weight: 700; margin: 0;
	font-variant-numeric: tabular-nums; color: var(--home-text);
}