/* ========================================
   La Bottega Fresca — Dark Mode Overrides
   ======================================== */

/* Shimmer animation (shared, used by skeleton loaders) */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* Dark Mode Theme */
html.dark {
  --primary: #e07058;
  --primary-dark: #c0533d;
  --primary-light: #f09080;
  --secondary: #8fa466;
  --secondary-light: #a4b87c;
  --bg-cream: #1a1614;
  --bg-white: #262220;
  --text-dark: #f0ebe3;
  --text-mid: #a09890;
  --text-light: #7a7068;
  --accent-gold: #e8a34d;
  --border-sand: #3a3228;
  --success: #66bb6a;
  --success-light: #1b2e1c;
  --danger: #ef5350;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.5);
}

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

html.dark img {
  opacity: 0.92;
}

html.dark .app-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-sand);
}

html.dark .bottom-nav {
  background: var(--bg-white);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}

html.dark .search-box {
  background: var(--bg-white);
  border-color: var(--border-sand);
}

html.dark .product-card {
  background: var(--bg-white);
}

html.dark .card {
  background: var(--bg-white);
}

html.dark .cart-item {
  background: var(--bg-white);
}

html.dark .cart-summary {
  background: var(--bg-white);
}

html.dark .feature-card {
  background: var(--bg-white);
}

html.dark .testimonial-card {
  background: var(--bg-white);
}

html.dark .newsletter {
  background: #3a4a2a;
}

html.dark .newsletter-form input {
  background: rgba(255,255,255,0.1);
}

html.dark .form-input {
  background: var(--bg-white);
  border-color: var(--border-sand);
  color: var(--text-dark);
}

html.dark .filter-tab {
  background: var(--bg-white);
  border-color: var(--border-sand);
  color: var(--text-mid);
}

html.dark .filter-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

html.dark .mobile-menu {
  background: var(--bg-white);
}

html.dark .category-icon {
  background: var(--bg-white);
  border-color: var(--border-sand);
}

html.dark .app-footer {
  background: #0e0c0a;
}

html.dark .store-preloader {
  background: var(--bg-cream);
}

html.dark .value-card {
  background: var(--bg-white);
}

html.dark .promo-link {
  background: rgba(255,255,255,0.15);
}

html.dark .btn-secondary {
  background: var(--bg-white);
  border-color: var(--border-sand);
  color: var(--text-dark);
}

/* Dark mode toggle button styling */
#dark-mode-toggle {
  cursor: pointer;
}