:root {
  --primary: 139 69 19;
  --secondary: 245 245 244;
  --accent: 251 146 60;
  --background: 255 255 255;
  --foreground: 12 10 9;
  --card: 255 255 255;
  --card-foreground: 12 10 9;
  --border: 231 229 228;
  --input: 231 229 228;
  --ring: 139 69 19;
  --muted: 245 245 244;
  --muted-foreground: 120 113 108;
  --destructive: 239 68 68;
  --destructive-foreground: 248 250 252;
  --button: 139 69 19;
  --button-foreground: 255 255 255;
}

.dark {
  --primary: 251 146 60;
  --secondary: 41 37 36;
  --accent: 251 146 60;
  --background: 12 10 9;
  --foreground: 250 250 249;
  --card: 28 25 23;
  --card-foreground: 250 250 249;
  --border: 41 37 36;
  --input: 41 37 36;
  --ring: 251 146 60;
  --muted: 41 37 36;
  --muted-foreground: 168 162 158;
  --destructive: 220 38 38;
  --destructive-foreground: 248 250 252;
  --button: 251 146 60;
  --button-foreground: 12 10 9;
}

/* Custom animations */
@keyframes flame {
  0%,
  100% {
    transform: scale(1) rotate(-1deg);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1) rotate(1deg);
    opacity: 1;
  }
}

.animate-flame {
  animation: flame 2s ease-in-out infinite;
}

/* Smooth transitions */
* {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--muted-foreground));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--primary));
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Form styles */
.form-input {
  @apply w-full px-3 py-2 border border-input bg-background rounded-md text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent;
}

.form-button {
  @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
}

.btn-primary {
  @apply form-button bg-button text-button-foreground hover:bg-button/90 h-10 px-4 py-2;
}

.btn-secondary {
  @apply form-button border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2;
}

/* Card styles */
.card {
  @apply rounded-lg border bg-card text-card-foreground shadow-sm;
}

.card-header {
  @apply flex flex-col space-y-1.5 p-6;
}

.card-content {
  @apply p-6 pt-0;
}

/* Badge styles */
.badge {
  @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
}

.badge-primary {
  @apply badge border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
}

.badge-secondary {
  @apply badge border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .mobile-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mobile-scroll::-webkit-scrollbar {
    display: none;
  }
}