/* Dark theme for the older Bootstrap + Tailwind pages (Learn, Blog, News, Marketplace, Support, login/sign-up).
   Bootstrap 5.3 switches itself via data-bs-theme; this file maps the Tailwind colour utilities those
   templates use onto the site's dark tokens (tokens.css). Loaded only by base_legacy.html. */

[data-bs-theme="dark"] {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-secondary-bg: var(--color-surface);
  --bs-tertiary-bg: var(--color-bg-alt);
  --bs-border-color: var(--color-border);
  --bs-emphasis-color: var(--color-heading);
  --bs-link-color: var(--color-link);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-link-color-rgb: 140, 196, 255;
}

/* Surfaces */
[data-bs-theme="dark"] body { background: var(--color-bg); color: var(--color-text); }
[data-bs-theme="dark"] .bg-white { background-color: var(--color-surface) !important; }
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-gray-50 { background-color: var(--color-bg-alt) !important; }
[data-bs-theme="dark"] .bg-gray-100 { background-color: #132a40 !important; }
[data-bs-theme="dark"] .bg-blue-50,
[data-bs-theme="dark"] .bg-blue-100 { background-color: rgba(140, 196, 255, 0.12) !important; }
[data-bs-theme="dark"] .bg-red-50 { background-color: var(--color-error-bg) !important; }
[data-bs-theme="dark"] .bg-green-100 { background-color: var(--color-success-bg) !important; }
[data-bs-theme="dark"] .bg-yellow-100 { background-color: rgba(249, 178, 51, 0.15) !important; }
[data-bs-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--color-tint) !important; }

/* Text */
[data-bs-theme="dark"] .text-gray-900,
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .hover\:text-gray-800:hover { color: var(--color-heading) !important; }
[data-bs-theme="dark"] .text-gray-700,
[data-bs-theme="dark"] .text-gray-600 { color: var(--color-body-strong) !important; }
[data-bs-theme="dark"] .text-gray-500,
[data-bs-theme="dark"] .text-gray-400,
[data-bs-theme="dark"] .text-muted { color: var(--color-text-muted) !important; }
[data-bs-theme="dark"] .text-blue-500,
[data-bs-theme="dark"] .text-blue-600,
[data-bs-theme="dark"] .text-blue-800,
[data-bs-theme="dark"] .group:hover .group-hover\:text-blue-600 { color: var(--color-link) !important; }
[data-bs-theme="dark"] .hover\:text-blue-800:hover { color: var(--color-link-hover) !important; }
[data-bs-theme="dark"] .text-red-500,
[data-bs-theme="dark"] .text-red-600 { color: var(--color-error) !important; }
[data-bs-theme="dark"] .text-green-500,
[data-bs-theme="dark"] .text-green-800 { color: var(--color-success) !important; }
[data-bs-theme="dark"] .text-yellow-800 { color: #f9d27a !important; }

/* Borders */
[data-bs-theme="dark"] .border-gray-100,
[data-bs-theme="dark"] .border-gray-200,
[data-bs-theme="dark"] .border-gray-300,
[data-bs-theme="dark"] .border-blue-100,
[data-bs-theme="dark"] .border-red-100 { border-color: var(--color-border) !important; }
[data-bs-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border) !important; }

/* Form fields styled only with Tailwind utilities */
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-input-border);
}
[data-bs-theme="dark"] ::placeholder { color: var(--color-text-muted); opacity: 1; }

/* Images with white backgrounds read better slightly dimmed on dark pages */
[data-bs-theme="dark"] main img:not([src$=".svg"]) { filter: brightness(0.92); }