/* Dark mode styles for landing page settings */

/* Base styles for dark mode */
.dark body {
  background-color: #111827;
  color: #f3f4f6;
}

/* Card and container styles */
.dark .bg-white {
  background-color: #1f2937;
}

.dark .border-gray-200 {
  border-color: #374151;
}

.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

/* Text styles */
.dark .text-gray-900 {
  color: #f3f4f6;
}

.dark .text-gray-700 {
  color: #d1d5db;
}

.dark .text-gray-600 {
  color: #9ca3af;
}

.dark .text-gray-500 {
  color: #6b7280;
}

/* Form elements */
.dark input,
.dark textarea,
.dark select {
  background-color: #111827;
  border-color: #4b5563;
  color: #f3f4f6;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #6b7280;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: var(--theme-color);
  box-shadow: 0 0 0 2px rgba(var(--theme-color-rgb), 0.2);
}

/* Button styles */
.dark .btn-outline,
.dark button[variant="outline"] {
  border-color: #4b5563;
  color: #d1d5db;
}

.dark .btn-outline:hover,
.dark button[variant="outline"]:hover {
  background-color: #374151;
}

/* Icon backgrounds */
.dark .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2);
}

.dark .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.2);
}

.dark .bg-purple-100 {
  background-color: rgba(139, 92, 246, 0.2);
}

.dark .bg-orange-100 {
  background-color: rgba(249, 115, 22, 0.2);
}

.dark .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.2);
}

.dark .bg-gray-50 {
  background-color: #1f2937;
}

/* Icon colors */
.dark .text-blue-600 {
  color: #60a5fa;
}

.dark .text-green-600 {
  color: #34d399;
}

.dark .text-purple-600 {
  color: #a78bfa;
}

.dark .text-orange-600 {
  color: #fb923c;
}

.dark .text-red-600 {
  color: #f87171;
}

/* Preview sections */
.dark .preview-section {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .preview-content {
  background-color: #111827;
}

/* Switch component */
.dark .switch {
  background-color: #4b5563;
}

.dark .switch[aria-checked="true"] {
  background-color: var(--theme-color);
}

/* Progress bar */
.dark .progress-bg {
  background-color: #374151;
}

/* Separator */
.dark .separator {
  background-color: #374151;
}