/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	padding: 0.65em 1.1em;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
	white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--accent {
	background: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
}
.btn--accent:hover { background: var(--color-accent-hover); color: #fff; }

.btn--outline {
	background: var(--color-surface);
	color: var(--color-text);
	border-color: var(--color-border-strong);
}
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn--ghost {
	background: transparent;
	color: var(--color-text-secondary);
	border-color: transparent;
}
.btn--ghost:hover { background: var(--color-bg-muted); color: var(--color-text); }

.btn--sm { font-size: var(--fs-xs); padding: 0.5em 0.9em; }
.btn--lg { font-size: var(--fs-base); padding: 0.8em 1.4em; }
/* Растянутые на всю ширину кнопки часто живут в узких колонках (сайдбар,
   форма) — переносим текст, а не даём ему обрезаться/вылезать за карточку. */
.btn--block { width: 100%; white-space: normal; text-align: center; }

.chip {
	display: inline-flex;
	align-items: center;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: 0.45em 0.95em;
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chip:hover {
	border-color: var(--color-accent-border);
	color: var(--color-accent-active);
	background: var(--color-accent-subtle);
}