/* Optional dark theme. Load after the shared component styles. */
html[data-theme='dark'] {
  color-scheme: dark;
  --background: #0D181B;
  --ink: #E8F3F2;
  --muted: #A4B8B9;
  --surface: #142428;
  --border: #2B4044;
  --cyan: #56E1ED;
  --lime: #E6F6AA;
  --focus: #56E1ED;
  --danger: #FF8992;
  --success: #9DDEB6;
  --scroll-thumb: #49666A;
  --scroll-track: #101E22;
  --scroll-hover: #698C8F;
  --scroll-active: #8CB9BB;
  --theme-panel: #122125;
  --theme-raised: #1B3035;
  --theme-accent-soft: #1A373B;
  --theme-on-brand: #142C2F;
  --theme-border-hover: #547479;
  --theme-shadow: #00000055;
  background: var(--background);
  color: var(--ink);
}

html[data-theme='dark'] body { background: var(--background); color: var(--ink); }
html[data-theme='dark'] ::selection { background: var(--lime); color: var(--theme-on-brand); }
html[data-theme='dark'] .site-header { background: rgb(13 24 27 / 94%); border-color: var(--border); }
html[data-theme='dark'] .brand-period,
html[data-theme='dark'] .pickup-selection { color: var(--cyan); }
html[data-theme='dark'] .main-nav a[aria-current='page']::after,
html[data-theme='dark'] .eyebrow .status-dot { background: var(--cyan); }
html[data-theme='dark'] .section-heading .eyebrow,
html[data-theme='dark'] .dialog-heading .eyebrow { color: var(--muted); }

html[data-theme='dark'] .demo-strip,
html[data-theme='dark'] .demo-mode,
html[data-theme='dark'] .farmer-cta,
html[data-theme='dark'] .community-banner,
html[data-theme='dark'] .provider-callout,
html[data-theme='dark'] .pickup-logistics,
html[data-theme='dark'] .receipt-code {
  background: linear-gradient(110deg, rgb(86 225 237 / 10%), rgb(230 246 170 / 10%));
}
html[data-theme='dark'] .hero-halo { background: linear-gradient(135deg, rgb(86 225 237 / 10%), rgb(230 246 170 / 10%)); }
html[data-theme='dark'] .hero-photo { border-color: var(--surface); }
html[data-theme='dark'] .hero-float,
html[data-theme='dark'] .photo-label {
  background: var(--theme-panel);
  border-color: var(--border);
  box-shadow: 0 14px 45px var(--theme-shadow);
}
html[data-theme='dark'] .float-icon { background: rgb(230 246 170 / 12%); color: var(--lime); }
html[data-theme='dark'] .hero-benefits .icon { color: var(--success); }
html[data-theme='dark'] .community-banner p { color: var(--muted); }
html[data-theme='dark'] .community-points p { color: var(--ink); }
html[data-theme='dark'] .community-symbol,
html[data-theme='dark'] .community-banner::after { border-color: var(--border); }

html[data-theme='dark'] .product-card,
html[data-theme='dark'] .producer-card,
html[data-theme='dark'] .pickup-bar,
html[data-theme='dark'] .order-card,
html[data-theme='dark'] .stat-card,
html[data-theme='dark'] .provider-orders > article,
html[data-theme='dark'] .provider-mini-products button,
html[data-theme='dark'] .request-list article,
html[data-theme='dark'] .table-wrap,
html[data-theme='dark'] .pickup-card,
html[data-theme='dark'] .farm-profile-empty,
html[data-theme='dark'] .farm-profile-panel,
html[data-theme='dark'] .listing-ai-product { background: var(--theme-panel); }
html[data-theme='dark'] .product-card:hover,
html[data-theme='dark'] .producer-card:hover,
html[data-theme='dark'] .provider-mini-products button:hover { border-color: var(--theme-border-hover); box-shadow: 0 10px 30px #00000020; }
html[data-theme='dark'] .empty-state { background: var(--surface); }
html[data-theme='dark'] .region-badge,
html[data-theme='dark'] .badge,
html[data-theme='dark'] .sidebar-link > span,
html[data-theme='dark'] .how-icon,
html[data-theme='dark'] .callout-icon,
html[data-theme='dark'] .request-icon,
html[data-theme='dark'] .empty-icon { background: var(--theme-raised); }
html[data-theme='dark'] .how-card-top > span:last-child { color: var(--muted); }
html[data-theme='dark'] .sidebar-link.selected { background: var(--theme-accent-soft); color: var(--cyan); }
html[data-theme='dark'] .order-avatar { background: rgb(157 222 182 / 12%); color: var(--success); }
html[data-theme='dark'] .order-items > div { border-color: var(--border); }
html[data-theme='dark'] tr:hover td { background: var(--surface); }
html[data-theme='dark'] .pickup-type-farm { background: rgb(230 246 170 / 12%); color: var(--lime); }
html[data-theme='dark'] .farm-profile-avatar,
html[data-theme='dark'] .farm-profile-symbol,
html[data-theme='dark'] .receipt-success { color: var(--theme-on-brand); }

html[data-theme='dark'] .btn-primary { color: var(--theme-on-brand); }
html[data-theme='dark'] .btn-primary:hover:not(:disabled) { background: #7AEAF3; box-shadow: 0 5px 18px #56E1ED20; }
html[data-theme='dark'] .btn-secondary { background: var(--theme-panel); color: var(--ink); }
html[data-theme='dark'] .btn-secondary:hover:not(:disabled) { background: var(--theme-raised); border-color: var(--theme-border-hover); }
html[data-theme='dark'] .btn-dark,
html[data-theme='dark'] .skip-link { background: var(--ink); color: var(--theme-on-brand); }
html[data-theme='dark'] .btn-dark:hover:not(:disabled) { background: #CEE8E5; }
html[data-theme='dark'] .btn-danger { background: #8D2F3A; color: #FFF2F3; }
html[data-theme='dark'] .btn-danger:hover:not(:disabled) { background: #AD3F4D; }
html[data-theme='dark'] .filter-chip.selected,
html[data-theme='dark'] .cart-count { background: var(--cyan); border-color: var(--cyan); color: var(--theme-on-brand); }
html[data-theme='dark'] .filter-chip:hover { border-color: var(--theme-border-hover); background: var(--surface); }
html[data-theme='dark'] .filter-chip.selected:hover { background: #7AEAF3; color: var(--theme-on-brand); }
html[data-theme='dark'] .add-button { background: var(--theme-accent-soft); color: var(--cyan); }
html[data-theme='dark'] .add-button:hover:not(:disabled) { background: var(--cyan); color: var(--theme-on-brand); }
html[data-theme='dark'] .cart-button:hover { border-color: var(--theme-border-hover); }
html[data-theme='dark'] .icon-button:hover,
html[data-theme='dark'] .quantity-control button:hover:not(:disabled) { background: var(--theme-raised); }
html[data-theme='dark'] .icon-button:active { background: var(--theme-accent-soft); }
html[data-theme='dark'] .provider-link:hover,
html[data-theme='dark'] .text-link:hover,
html[data-theme='dark'] .producer-caption:hover,
html[data-theme='dark'] .product-info h3 button:hover,
html[data-theme='dark'] .footer-top > a:last-child:hover,
html[data-theme='dark'] summary:hover { color: var(--cyan); }

html[data-theme='dark'] .product-badge,
html[data-theme='dark'] .sold-out { background: rgb(18 33 37 / 96%); color: var(--ink); }
html[data-theme='dark'] .favorite-button { background: var(--theme-panel); color: var(--ink); }
html[data-theme='dark'] .favorite-button.is-favorite { color: #FF9BBE; }
html[data-theme='dark'] .favorite-button.is-favorite .icon { fill: #582B40; }
html[data-theme='dark'] .favorite-button:hover { background: var(--lime); color: var(--theme-on-brand); }

html[data-theme='dark'] select,
html[data-theme='dark'] option,
html[data-theme='dark'] .search-field,
html[data-theme='dark'] .field input,
html[data-theme='dark'] .field textarea,
html[data-theme='dark'] .field select { background: var(--theme-panel); color: var(--ink); }
html[data-theme='dark'] .sort-label select { background: var(--background); }
html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder { color: var(--muted); opacity: 1; }
html[data-theme='dark'] .field input:hover,
html[data-theme='dark'] .field textarea:hover,
html[data-theme='dark'] .field select:hover { border-color: var(--theme-border-hover); }
html[data-theme='dark'] .field input:focus,
html[data-theme='dark'] .field textarea:focus,
html[data-theme='dark'] .field select:focus,
html[data-theme='dark'] .search-field:focus-within { border-color: var(--focus); }
html[data-theme='dark'] .search-field:focus-within { outline-color: #56E1ED50; }
html[data-theme='dark'] .field input[aria-invalid='true'],
html[data-theme='dark'] .field textarea[aria-invalid='true'],
html[data-theme='dark'] .field select[aria-invalid='true'] { border-color: var(--danger); background: #321F27; }
html[data-theme='dark'] input[type='radio'],
html[data-theme='dark'] input[type='checkbox'] { accent-color: var(--cyan); }
html[data-theme='dark'] input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--theme-panel) inset; caret-color: var(--ink); }

html[data-theme='dark'] dialog { background: var(--theme-panel); box-shadow: 0 35px 100px #00000070; }
html[data-theme='dark'] dialog::backdrop { background: rgb(0 8 11 / 72%); }
html[data-theme='dark'] .notice { background: rgb(157 222 182 / 9%); border-color: #3A5949; color: #B8E3CA; }
html[data-theme='dark'] .status-pending { color: #E9CC8E; background: #3A3020; }
html[data-theme='dark'] .status-ready { color: var(--cyan); background: #163A42; }
html[data-theme='dark'] .status-collected { color: var(--success); background: #1A372B; }
html[data-theme='dark'] .status-cancelled { color: #D8B6BF; background: #37272E; }
html[data-theme='dark'] .pickup-option:has(input:checked),
html[data-theme='dark'] .pickup-choice.selected { background: var(--theme-accent-soft); border-color: var(--cyan); }
html[data-theme='dark'] .receipt-code { border-color: var(--theme-border-hover); }
html[data-theme='dark'] .discard-banner { background: #332C20; border-color: #776446; color: #EED6A1; }
html[data-theme='dark'] .toast { color: var(--ink); background: var(--theme-raised); border: 1px solid var(--border); box-shadow: 0 10px 40px #00000055; }
html[data-theme='dark'] .toast.error { color: #FFF2F3; background: #772E39; border-color: #AA5964; }
html[data-theme='dark'] .live-build { background: rgb(18 33 37 / 96%); border-color: var(--border); box-shadow: 0 2px 15px #00000020; }
html[data-theme='dark'] .live-build .status-dot { background: var(--success); }
html[data-theme='dark'] .listing-ai[aria-busy='true'] .listing-ai-generate { background: var(--surface); color: var(--ink); }

@media (max-width: 600px) {
  html[data-theme='dark'] .main-nav { background: var(--background); border-top-color: var(--border); }
}

@media (forced-colors: active) {
  html[data-theme='dark'] {
    --background: Canvas; --ink: CanvasText; --muted: CanvasText; --surface: Canvas; --border: ButtonText;
    --theme-panel: Canvas; --theme-raised: Canvas; --theme-accent-soft: Canvas; --theme-on-brand: HighlightText;
    --focus: Highlight; --cyan: Highlight; --lime: Canvas; --danger: CanvasText; --success: CanvasText;
  }
  html[data-theme='dark'] .btn-primary,
  html[data-theme='dark'] .filter-chip.selected { background: Highlight; color: HighlightText; }
}