html.theme-dark {
  color-scheme: dark;
}

html.theme-dark body {
  background: #0e1210;
  color: #f4f4f5;
}

html.theme-dark .min-h-screen,
html.theme-dark .bg-\[\#fafafa\],
html.theme-dark .bg-\[\#f9f9f9\],
html.theme-dark .bg-\[\#f5f5f5\],
html.theme-dark .bg-grocery-mint {
  background-color: #121614 !important;
}

html.theme-dark .bg-white {
  background-color: #171c19 !important;
}

html.theme-dark .text-\[\#0a0a0a\],
html.theme-dark .text-gray-900,
html.theme-dark .text-grocery-forest {
  color: #f4f4f5 !important;
}

html.theme-dark .text-\[\#737373\],
html.theme-dark .text-\[\#a3a3a3\],
html.theme-dark .text-gray-400,
html.theme-dark .text-gray-500,
html.theme-dark .text-gray-600 {
  color: #a1a1aa !important;
}

html.theme-dark .border-\[\#f0f0f0\],
html.theme-dark .border-\[\#e5e5e5\],
html.theme-dark .border-gray-100,
html.theme-dark .border-grocery-forest\/10 {
  border-color: #2a322d !important;
}

html.theme-dark nav.border-b {
  background-color: #171c19 !important;
}

html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea {
  background-color: #121614;
  color: #f4f4f5;
  border-color: #2a322d;
}

html.theme-dark .bg-gradient-to-b {
  background-image: none !important;
  background-color: #121614 !important;
}

/* Storefront shimmer / skeleton */
@keyframes storefront-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.sf-shimmer {
  position: relative;
  overflow: hidden;
  background-color: #e8eee9;
  isolation: isolate;
}

.sf-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 45%,
    rgba(255, 255, 255, 0.7) 55%,
    transparent 100%
  );
  animation: storefront-shimmer 1.35s ease-in-out infinite;
  pointer-events: none;
}

html.theme-dark .sf-shimmer {
  background-color: #242a26;
}

html.theme-dark .sf-shimmer::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .sf-shimmer::after {
    animation: none;
  }
}