/* Loft64 site-wide theme toggle + dark mode + mobile breadcrumb */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.theme-toggle:hover {
  border-color: #9333ea;
  background: #faf5ff;
}
#themeToggle .icon-sun,
#themeToggleMobile .icon-sun {
  display: none;
}
#themeToggle .icon-moon,
#themeToggleMobile .icon-moon {
  display: inline;
}
[data-theme="dark"] .theme-toggle {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
}
[data-theme="dark"] .theme-toggle:hover {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.15);
}
[data-theme="dark"] #themeToggle .icon-sun,
[data-theme="dark"] #themeToggleMobile .icon-sun {
  display: inline;
}
[data-theme="dark"] #themeToggle .icon-moon,
[data-theme="dark"] #themeToggleMobile .icon-moon {
  display: none;
}

.loft-mobile-breadcrumb {
  font-size: 0.8125rem;
  color: #64748b;
}
.loft-mobile-breadcrumb a {
  color: #9333ea;
  font-weight: 600;
  text-decoration: none;
}
.loft-mobile-breadcrumb a:hover {
  text-decoration: underline;
}
.loft-mobile-breadcrumb .loft-bc-sep {
  margin: 0 0.35rem;
  color: #94a3b8;
}
.loft-mobile-breadcrumb .loft-bc-current {
  color: #334155;
  font-weight: 600;
}
[data-theme="dark"] .loft-mobile-breadcrumb {
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .loft-mobile-breadcrumb .loft-bc-current {
  color: #e2e8f0;
}

/* —— Dark mode: main site (Tailwind utility overrides) —— */
[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="dark"] body {
  background-color: #0f172a !important;
  color: #e2e8f0;
}
[data-theme="dark"] nav.bg-white,
[data-theme="dark"] .loft-nav.bg-white,
[data-theme="dark"] #mobileNav,
[data-theme="dark"] #loftNav #mobileNav {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
[data-theme="dark"] nav .text-gray-700,
[data-theme="dark"] nav .nav-mobile-link {
  color: #cbd5e1 !important;
}
[data-theme="dark"] nav .text-gray-700:hover,
[data-theme="dark"] nav .nav-mobile-link:hover {
  color: #fff !important;
  background-color: rgba(147, 51, 234, 0.15) !important;
}
[data-theme="dark"] nav .text-purple-600,
[data-theme="dark"] nav .text-purple-700 {
  color: #c084fc !important;
}
[data-theme="dark"] #navToggle,
[data-theme="dark"] #navToggleMobile {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .bg-white {
  background-color: #1e293b !important;
}
[data-theme="dark"] .bg-gray-50 {
  background-color: #0f172a !important;
}
[data-theme="dark"] .bg-gray-100 {
  background-color: #1e293b !important;
}
[data-theme="dark"] .bg-gray-800 {
  background-color: #020617 !important;
}
[data-theme="dark"] .bg-gray-900 {
  background-color: #020617 !important;
}
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
  color: #f1f5f9 !important;
}
[data-theme="dark"] .text-gray-700 {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .text-gray-600 {
  color: #94a3b8 !important;
}
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400 {
  color: #94a3b8 !important;
}
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-100 {
  border-color: #334155 !important;
}
[data-theme="dark"] .game-card {
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .feature-card {
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
}
[data-theme="dark"] .pricing-card {
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
  color: #e2e8f0;
}
[data-theme="dark"] .pricing-card.featured {
  background: linear-gradient(135deg, #5b21b6 0%, #4c1d95 100%) !important;
  color: #fff !important;
}
[data-theme="dark"] .shadow-lg {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .link-card {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .link-card:hover {
  border-color: #a855f7 !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-indigo-50,
[data-theme="dark"] .bg-pink-50,
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-yellow-50 {
  filter: brightness(0.85);
}
[data-theme="dark"] .gallery-item.bg-purple-200,
[data-theme="dark"] .gallery-item.bg-blue-200,
[data-theme="dark"] .gallery-item.bg-green-200,
[data-theme="dark"] .gallery-item.bg-yellow-200,
[data-theme="dark"] .gallery-item.bg-pink-200,
[data-theme="dark"] .gallery-item.bg-indigo-200,
[data-theme="dark"] .gallery-item.bg-red-200,
[data-theme="dark"] .gallery-item.bg-orange-200,
[data-theme="dark"] .gallery-item.bg-cyan-200 {
  filter: brightness(0.75) saturate(0.9);
}
[data-theme="dark"] header.sticky.bg-white\/90 {
  background-color: rgba(30, 41, 59, 0.95) !important;
}
[data-theme="dark"] .from-blue-50,
[data-theme="dark"] .to-purple-50,
[data-theme="dark"] .from-indigo-50,
[data-theme="dark"] .to-pink-50 {
  --tw-gradient-from: #0f172a !important;
  --tw-gradient-to: #1e293b !important;
}