/* Shared design-system components */
.button, button.button, input[type="submit"], input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fa-space-2);
	min-height: 2.75rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--fa-radius-sm);
	font: inherit;
	font-size: var(--fa-font-size-sm);
	font-weight: var(--fa-font-weight-bold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--fa-motion-fast), background-color var(--fa-motion-fast), border-color var(--fa-motion-fast), box-shadow var(--fa-motion-fast), transform var(--fa-motion-fast);
}
.button:hover, button.button:hover, input[type="submit"]:hover, input[type="button"]:hover { transform: translateY(-1px); }
.button:active, button.button:active, input[type="submit"]:active, input[type="button"]:active { transform: translateY(0); }
.button--primary, .button.button--primary, input[type="submit"] {
	background: var(--fa-color-brand);
	color: var(--fa-color-brand-ink);
	border-color: var(--fa-color-brand);
}
.button--primary:hover, .button.button--primary:hover, input[type="submit"]:hover {
	background: var(--fa-color-brand-hover);
	border-color: var(--fa-color-brand-hover);
	color: var(--fa-color-brand-ink);
}
.button--secondary {
	background: var(--fa-color-background);
	color: var(--fa-color-text);
	border-color: var(--fa-color-border-strong);
}
.button--secondary:hover { background: var(--fa-color-surface); border-color: #B8B8B8; }
.button--quiet { background: transparent; color: var(--fa-color-text); }
.button--quiet:hover { background: var(--fa-color-surface); color: var(--fa-color-text); }
.button--danger { background: var(--fa-color-error); color: #fff; border-color: var(--fa-color-error); }
.button:disabled, button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; transform: none; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="tel"], textarea, select {
	width: 100%;
	min-height: 2.75rem;
	padding: .7rem .85rem;
	border: 1px solid var(--fa-color-border-strong);
	border-radius: var(--fa-radius-sm);
	background: var(--fa-color-background);
	transition: border-color var(--fa-motion-fast), box-shadow var(--fa-motion-fast);
}
input:focus, textarea:focus, select:focus { border-color: var(--fa-color-brand-hover); outline: none; box-shadow: var(--fa-focus-ring); }
textarea { min-height: 8rem; resize: vertical; }
label { display: inline-block; margin-bottom: var(--fa-space-1); font-weight: var(--fa-font-weight-semibold); }
.form-field { margin-bottom: var(--fa-space-5); }
.form-help { display: block; margin-top: var(--fa-space-1); color: var(--fa-color-text-secondary); font-size: var(--fa-font-size-sm); }

.badge, .topic-card__category, .status-badge {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: .25rem .55rem;
	border: 1px solid transparent;
	border-radius: var(--fa-radius-xs);
	background: var(--fa-color-brand-soft);
	color: #674B00;
	font-size: var(--fa-font-size-xs);
	font-weight: var(--fa-font-weight-bold);
	line-height: 1.35;
}
.badge--neutral { background: var(--fa-color-surface); color: var(--fa-color-text-secondary); border-color: var(--fa-color-border); }
.badge--success { background: #E8F6EE; color: #17663D; }
.badge--error { background: #FDECEA; color: #9F1D17; }
.badge--info { background: #EFF6FF; color: #174EA6; }

.notice, .alert, .form-message {
	padding: var(--fa-space-4);
	border: 1px solid var(--fa-color-border);
	border-radius: var(--fa-radius-md);
	background: var(--fa-color-surface);
	color: var(--fa-color-text);
}
.alert--error, .form-message--error { border-color: #F3B6B2; background: #FEF3F2; color: #912018; }
.alert--success, .form-message--success { border-color: #A6D8B8; background: #ECFDF3; color: #17663D; }
.alert--info { border-color: #B2CCFF; background: #EFF6FF; color: #174EA6; }

.card, .topic-card, .profession-card, .entry-card {
	border-color: var(--fa-color-border);
	border-radius: var(--fa-radius-md);
	box-shadow: var(--fa-shadow-sm);
}
.card { background: var(--fa-color-surface-raised); }
.topic-card, .profession-card { transition: border-color var(--fa-motion-normal), box-shadow var(--fa-motion-normal), transform var(--fa-motion-normal); }
.topic-card:hover, .profession-card:hover { border-color: var(--fa-color-brand); box-shadow: var(--fa-shadow-md); }
.loading-state { position: relative; min-height: 5rem; overflow: hidden; border-radius: var(--fa-radius-md); background: var(--fa-color-surface); }
.loading-state::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 70%), transparent); animation: fa-shimmer 1.4s infinite; }
@keyframes fa-shimmer { to { transform: translateX(100%); } }
.empty-state { color: var(--fa-color-text-secondary); }
.empty-state h1, .empty-state h2 { color: var(--fa-color-text); }
.error-text { color: var(--fa-color-error); }
.success-text { color: var(--fa-color-success); }