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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--color-gray-700);
  background-color: white;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  text-decoration: none;
}

.btn:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
  color: var(--color-gray-900);
  text-decoration: none;
}

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

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

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

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

.btn--small {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

/* ==========================================================================
   Form Controls
   ========================================================================== */

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  background-color: white;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}

.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-gray-400);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

textarea {
  min-height: 5rem;
  resize: vertical;
}

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--space-1);
}

/* ==========================================================================
   Flash Messages
   ========================================================================== */

.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-4);
}

.flash--notice {
  color: #065f46;
  background-color: var(--color-success-light);
  border: 1px solid #a7f3d0;
}

.flash--alert {
  color: #991b1b;
  background-color: var(--color-danger-light);
  border: 1px solid #fecaca;
}

.flash--setup {
  color: #92400e;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: 9999px;
  line-height: 1;
}

.badge--success {
  color: #065f46;
  background-color: var(--color-success-light);
}

.badge--pending {
  color: #92400e;
  background-color: var(--color-warning-light);
}

.badge--muted {
  color: var(--color-gray-600);
  background-color: var(--color-gray-100);
}