/* Custom color palette based on eventflea_logo.png */
:root {
  --logo-cream-light: #F2E4C6;
  --logo-cream: #EEDEBD;
  --logo-beige: #C2AF90;
  --logo-brown-light: #A3906F;
  --logo-brown-medium: #897455;
  --logo-brown-dark: #796547;
  --logo-brown-darker: #56432A;
  --logo-brown-darkest: #4B3821;
  --logo-dark: #251305;
}

/* Global overrides for consistent theming */
body {
  background-color: var(--logo-cream-light) !important;
  color: var(--logo-brown-darkest) !important;
}

/* Custom logo-based color classes */
.bg-logo-cream { background-color: var(--logo-cream); }
.bg-logo-cream-light { background-color: var(--logo-cream-light); }
.bg-logo-beige { background-color: var(--logo-beige); }
.bg-logo-brown { background-color: var(--logo-brown-darkest); }
.bg-logo-brown-dark { background-color: var(--logo-brown-dark); }
.bg-logo-brown-darker { background-color: var(--logo-brown-darker); }
.bg-logo-dark { background-color: var(--logo-dark); }

.text-logo-cream { color: var(--logo-cream); }
.text-logo-brown { color: var(--logo-brown-darkest); }
.text-logo-brown-medium { color: var(--logo-brown-medium); }
.text-logo-brown-dark { color: var(--logo-brown-dark); }
.text-logo-brown-darker { color: var(--logo-brown-darker); }
.text-logo-dark { color: var(--logo-dark); }

.border-logo-beige { border-color: var(--logo-beige); }
.border-logo-brown { border-color: var(--logo-brown-darkest); }

/* Placeholder color utilities */
.placeholder-logo-brown-medium\/60::placeholder { color: rgba(137, 116, 85, 0.6); }

/* Hover states */
.hover\:text-logo-dark:hover { color: var(--logo-dark); }
.hover\:bg-logo-beige:hover { background-color: var(--logo-beige); }
.hover\:from-logo-brown-dark:hover { --tw-gradient-from: var(--logo-brown-dark); }
.hover\:to-logo-dark:hover { --tw-gradient-to: var(--logo-dark); }

/* Focus states */
.focus\:ring-logo-brown:focus { --tw-ring-color: var(--logo-brown-darkest); }
.focus\:ring-logo-brown\/30:focus { --tw-ring-color: rgba(75, 56, 33, 0.3); }
.focus\:border-logo-brown:focus { border-color: var(--logo-brown-darkest); }

/* Gradient utilities */
.from-logo-brown { --tw-gradient-from: var(--logo-brown-darkest); }
.to-logo-brown-dark { --tw-gradient-to: var(--logo-brown-dark); }
.from-logo-cream-light { --tw-gradient-from: var(--logo-cream-light); }
.to-logo-cream { --tw-gradient-to: var(--logo-cream); }

/* Button styles */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--logo-brown-darkest);
  color: white;
  border: 1px solid var(--logo-brown-darkest);
  transition: opacity 0.2s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background-color: transparent;
  color: var(--logo-brown-darkest);
  border: 1px solid var(--logo-brown-darkest);
  transition: opacity 0.2s ease;
}

.btn-secondary:hover {
  opacity: 0.9;
}

.btn-danger {
  background-color: #ef4444;
  color: white;
  border: 1px solid #ef4444;
  transition: opacity 0.2s ease;
}

.btn-danger:hover {
  opacity: 0.9;
}

/* Form styling */
.form-input, .form-select, .form-textarea {
  border-color: var(--logo-beige);
  background-color: white;
  color: var(--logo-brown-darkest);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--logo-brown-darkest);
  box-shadow: 0 0 0 1px var(--logo-brown-darkest);
}

/* Card styling */
.card {
  background-color: white;
  border: 1px solid var(--logo-beige);
}

/* Range slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--logo-brown-darkest);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--logo-brown-darkest);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input[type="range"]:hover::-webkit-slider-thumb {
  background: var(--logo-brown-medium);
}

input[type="range"]:hover::-moz-range-thumb {
  background: var(--logo-brown-medium);
}