:root {
  --primary: #ebadb8;
  --primary-dark: #d48f9b;
  --primary-light: #f5d3d9;
  --primary-soft: #ffe9ec;
  --primary-transparent: rgba(235, 173, 184, 0.25);
  --light-gray: #f3f4f6;
  --dark-gray: #374151;
}

.btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-orange,
.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-orange:hover,
.btn-primary:hover {
  background: var(--primary-dark);
  color: white;
}

.upload-transaction-btn {
  border: none;
  color: white;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  font-size: 0.8rem;
  border-radius: 12px;
  padding: 5px 10px;
  background-color: var(--primary);
  font-weight: bold;
  transition-duration: 0.3s;
}

.upload-transaction-btn:hover {
  background-color: var(--primary-dark);
  transition-duration: 0.3s;
}

.upload-transaction-btn:active {
  box-shadow: 0px 0px 0px;
  transition-duration: 0.3s;
}

/* Additional utility classes for backward compatibility */
.text-orange,
.text-primary {
  color: var(--primary) !important;
}

.border-orange,
.border-primary {
  border-color: var(--primary) !important;
}

.bg-orange,
.bg-primary {
  background-color: var(--primary) !important;
}

/* Outline button variant */
.btn-outline-orange,
.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

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

/* Optional: Keep the old variable names for backward compatibility */
:root {
  --primary-orange: var(--primary);
  --hover-orange: var(--primary-dark);
}