/* ==========================================================================
   8. Buttons
   ========================================================================== */

.btn,
button.btn,
a.btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0.625rem 1.375rem;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: var(--radius-button);
	transition:
		background-color var(--transition-fast),
		color            var(--transition-fast),
		border-color     var(--transition-fast),
		box-shadow       var(--transition-fast),
		transform        var(--transition-fast);
	white-space: nowrap;
	user-select: none;
}

.btn:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

.btn-primary,
input[type="submit"] {
	background-color: var(--color-btn-bg);
	color: var(--color-btn-text);
	border-color: var(--color-btn-bg);
}

.btn-primary:hover,
.btn-primary:focus,
input[type="submit"]:hover {
	background-color: var(--color-btn-hover-bg);
	border-color: var(--color-btn-hover-bg);
	color: var(--color-btn-hover-text);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-secondary {
	background-color: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--color-primary);
	color: var(--color-white);
}

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

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

.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.875rem; }
.btn-lg { padding: 0.875rem 2rem;     font-size: 1.0625rem; }

/* ==========================================================================
   9. Forms
   ========================================================================== */

label {
	display: block;
	font-weight: 500;
	font-size: 0.9rem;
	margin-block-end: 0.375rem;
	color: var(--color-heading);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
textarea,
select {
	display: block;
	inline-size: 100%;
	padding: 0.625rem 0.875rem;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-input);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	appearance: none;
	line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

textarea {
	resize: block;
	min-block-size: 140px;
}

.form-group {
	margin-block-end: 1.25rem;
}

/* Search form */
.search-form {
	display: flex;
	gap: 8px;
}

.search-field {
	flex: 1;
}