/* Alerts */
.alert {
	border-radius: 14px;
	border-width: 1px;
	font-size: 0.95rem;
}

.alert-success {
	background-color: var(--color-success-100);
	border-color: var(--color-success-500);
	color: var(--color-success-700);
}

.alert-info {
	background-color: var(--color-info-100);
	border-color: var(--color-info-500);
	color: var(--color-info-700);
}

.alert-warning {
	background-color: var(--color-warning-100);
	border-color: var(--color-warning-500);
	color: var(--color-warning-700);
}

.alert-danger {
	background-color: var(--color-error-100);
	border-color: var(--color-error-500);
	color: var(--color-error-700);
}

.alert .alert-link {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* Buttons */
.btn {
	border-radius: 999px;
	font-weight: 500;
}

.btn-primary {
	background-color: var(--color-primary-500);
	border-color: var(--color-primary-500);
	color: var(--color-white);
}

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

.btn-primary:active,
.btn-primary.active {
	background-color: var(--color-primary-700) !important;
	border-color: var(--color-primary-700) !important;
	color: var(--color-white) !important;
}

.btn-secondary {
	background-color: var(--color-secondary-500);
	border-color: var(--color-secondary-500);
	color: var(--color-white);
}

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

.btn-outline-primary {
	background-color: transparent;
	border-color: var(--color-primary-500);
	color: var(--color-primary-700);
}

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

.btn-success {
	background-color: var(--color-success-500);
	border-color: var(--color-success-500);
	color: var(--color-white);
}

.btn-success:hover,
.btn-success:focus {
	background-color: var(--color-success-700);
	border-color: var(--color-success-700);
	color: var(--color-white);
}

.btn-info {
	background-color: var(--color-info-500);
	border-color: var(--color-info-500);
	color: var(--color-white);
}

.btn-info:hover,
.btn-info:focus {
	background-color: var(--color-info-700);
	border-color: var(--color-info-700);
	color: var(--color-white);
}

.btn-warning {
	background-color: var(--color-warning-500);
	border-color: var(--color-warning-500);
	color: var(--color-neutral-900);
}

.btn-warning:hover,
.btn-warning:focus {
	background-color: var(--color-warning-700);
	border-color: var(--color-warning-700);
	color: var(--color-white);
}

.btn-danger {
	background-color: var(--color-error-500);
	border-color: var(--color-error-500);
	color: var(--color-white);
}

.btn-danger:hover,
.btn-danger:focus {
	background-color: var(--color-error-700);
	border-color: var(--color-error-700);
	color: var(--color-white);
}

.badge {
	border-radius: 999px;
	font-weight: 700;
}

.bg-primary {
	background-color: var(--color-primary-500) !important;
	color: var(--color-white) !important;
}

.bg-secondary {
	background-color: var(--color-secondary-500) !important;
	color: var(--color-white) !important;
}

.bg-success {
	background-color: var(--color-success-500) !important;
	color: var(--color-white) !important;
}

.bg-info {
	background-color: var(--color-info-500) !important;
	color: var(--color-white) !important;
}

.bg-warning {
	background-color: var(--color-warning-500) !important;
	color: var(--color-neutral-900) !important;
}

.bg-danger {
	background-color: var(--color-error-500) !important;
	color: var(--color-white) !important;
}

.form-control,
.form-select {
	border-color: var(--color-neutral-300);
	border-radius: 12px;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--color-primary-500);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary-500) 25%, transparent);
}

.progress {
	background-color: var(--color-neutral-100);
	border-radius: 999px;
}

.progress-bar {
	background-color: var(--color-secondary-500);
}

.progress-bar.bg-success {
	background-color: var(--color-success-500) !important;
}

.progress-bar.bg-warning {
	background-color: var(--color-warning-500) !important;
}

.progress-bar.bg-danger {
	background-color: var(--color-error-500) !important;
}

.dropdown-menu {
	border-color: var(--color-neutral-200);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.dropdown-item {
	color: var(--color-neutral-800);
	border-radius: 10px;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--color-primary-100);
	color: var(--color-primary-900);
}

.dropdown-divider {
	border-top-color: var(--color-neutral-200);
}

a {
	color: var(--color-primary-700);
}

a:hover,
a:focus {
	color: var(--color-primary-900);
}