html {
  background-color: #F7F5F3;
  /* Warm neutral background */
}

/* Base button styles matching navbar design */
.btn {
  /* Reset DaisyUI defaults */
  text-transform: none;
  font-weight: 500;
  border: none;
  transition: all 0.2s ease;

  /* Match navbar button style - white pill button */
  padding: 0.375rem 0.875rem;
  background-color: white;
  color: #37322F;
  border-radius: 9999px;
  font-size: 0.8125rem;
  border: 1px solid #E0DEDB;
  box-shadow: 0px 1px 2px rgba(55, 50, 47, 0.08);
}

.btn:hover {
  background-color: #F7F5F3;
  box-shadow: 0px 2px 4px rgba(55, 50, 47, 0.12);
}

/* Dark/Alternative button - matches the dark navbar button */
.btn-alt,
.btn-primary {
  background-color: #37322F !important;
  color: white !important;
  border: none !important;
  box-shadow: 0px 1px 2px rgba(55, 50, 47, 0.12);
}

.btn-alt:hover,
.btn-primary:hover {
  background-color: #2A2520 !important;
  box-shadow: 0px 2px 4px rgba(55, 50, 47, 0.16);
}

/* Secondary button - outline style */
.btn-secondary,
.btn-outline {
  background-color: white !important;
  color: #37322F !important;
  border: 1px solid #E0DEDB !important;
  box-shadow: 0px 1px 2px rgba(55, 50, 47, 0.08);
}

.btn-secondary:hover,
.btn-outline:hover {
  background-color: #F7F5F3 !important;
  box-shadow: 0px 2px 4px rgba(55, 50, 47, 0.12);
}

/* Ghost button - transparent */
.btn-ghost {
  background-color: transparent !important;
  color: #37322F !important;
  border: none !important;
  box-shadow: none !important;
}

.btn-ghost:hover {
  background-color: #F7F5F3 !important;
}

/* Success button - green */
.btn-success {
  background-color: #10b981 !important;
  color: white !important;
  border: none !important;
}

.btn-success:hover {
  background-color: #059669 !important;
}

/* Error/Danger button - red */
.btn-error,
.btn-danger,
.danger {
  background-color: #ef4444 !important;
  color: white !important;
  border: none !important;
}

.btn-error:hover,
.btn-danger:hover,
.danger:hover {
  background-color: #dc2626 !important;
}

/* Warning button - amber */
.btn-warning {
  background-color: #f59e0b !important;
  color: white !important;
  border: none !important;
}

.btn-warning:hover {
  background-color: #d97706 !important;
}

/* Info button - blue */
.btn-info {
  background-color: #3b82f6 !important;
  color: white !important;
  border: none !important;
}

.btn-info:hover {
  background-color: #2563eb !important;
}

/* Size variants */
.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 0.5rem 1.5rem;
  font-size: 0.9375rem;
}

.btn-xl {
  padding: 0.75rem 2rem;
  font-size: 1rem;
}

/* Block button */
.btn-block {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Disabled state */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Focus state */
.btn:focus {
  outline: none;
  ring: 2px;
  ring-color: #37322F;
  ring-opacity: 0.2;
}

/* Loading state */
.btn-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: 2px solid #37322F;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Input field error states for better form validation display */
.field_with_errors {
  display: contents; /* Prevent Rails from wrapping fields in divs that break layouts */
}

.field_with_errors input,
.field_with_errors textarea,
.field_with_errors select {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
}

.field_with_errors input:focus,
.field_with_errors textarea:focus,
.field_with_errors select:focus {
  outline: none;
  ring: 2px;
  ring-color: #ef4444;
  ring-opacity: 0.2;
  border-color: #ef4444 !important;
}

.field_with_errors label {
  color: #dc2626;
}

/* Responsive utilities */
@media only screen and (max-width: 819px) {
  .mobile-hidden {
    display: none !important;
  }
}

/* Keep legacy button classes for backward compatibility */
.btn-neutral {
  background-color: #37322F !important;
  color: white !important;
  border: none !important;
}

.btn-neutral:hover {
  background-color: #2A2520 !important;
}

/* Accent colors from old design - can be removed if not used */
.btn-accent {
  background-color: #4ecdc4 !important;
  color: white !important;
  border: none !important;
}

.btn-accent:hover {
  background-color: #31afa7 !important;
}