/* Dark mode variables */
:root {
  --background-dark: 15 15 15;
  --foreground-dark: 229 229 229;
  --primary-dark: 59 130 246;
  --accent-dark: 139 92 246;
  --gray-100-dark: 229 229 229;
  --gray-200-dark: 209 213 219;
  --gray-300-dark: 156 163 175;
  --gray-400-dark: 107 114 128;
  --gray-500-dark: 75 85 99;
  --gray-600-dark: 55 65 81;
  --gray-700-dark: 31 41 55;
  --gray-800-dark: 22 27 34;
  --gray-900-dark: 17 24 39;
  --blue-600-dark: 59 130 246;
  --blue-700-dark: 37 99 235;
}

/* Dark mode styles */
.dark-mode {
  background-color: rgb(var(--background-dark));
  color: rgb(var(--foreground-dark));
}

.dark-mode .bg-white {
  background-color: rgb(var(--gray-800-dark));
}

.dark-mode .bg-blue-600 {
  background-color: rgb(var(--blue-600-dark));
}

.dark-mode .text-gray-400,
.dark-mode .text-gray-500 {
  color: rgb(var(--gray-300-dark));
}

.dark-mode .text-gray-600,
.dark-mode .text-gray-700 {
  color: rgb(var(--gray-200-dark));
}

.dark-mode .border,
.dark-mode .border-t {
  border-color: rgb(var(--gray-700-dark));
}

.dark-mode .border-gray-200,
.dark-mode .border-gray-300 {
  border-color: rgb(var(--gray-700-dark));
}

.dark-mode .bg-white\/95 {
  background-color: rgba(var(--gray-800-dark), 0.95);
}

.dark-mode .hover\:bg-gray-50:hover {
  background-color: rgb(var(--gray-700-dark));
}

.dark-mode .hover\:bg-blue-700:hover {
  background-color: rgb(var(--blue-700-dark));
}

.dark-mode .hover\:text-blue-600:hover {
  color: rgb(var(--primary-dark));
}

.dark-mode .text-blue-600 {
  color: rgb(var(--primary-dark));
}

/* Background gradients for dark mode */
.dark-mode .bg-gradient-to-b.from-background.via-background\/90.to-background {
  --tw-gradient-from: rgb(15 15 15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 15 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(15 15 15 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.dark-mode .bg-blue-500\/10 {
  background-color: rgba(59, 130, 246, 0.05);
}

.dark-mode .bg-purple-500\/10 {
  background-color: rgba(139, 92, 246, 0.05);
}

/* Dark mode form elements */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
  background-color: rgb(var(--gray-700-dark));
  border-color: rgb(var(--gray-600-dark));
  color: rgb(var(--foreground-dark));
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
  border-color: rgb(var(--primary-dark));
}

/* Dark mode is permanently enabled - no toggle button needed */