/*
 * Dark theme rules that tokens cannot express: page backgrounds, third party widgets, images and the colour utility classes
 * used in views. Everything else switches through the variables in theme.css. Applied when <html data-theme="dark">.
 */
html[data-theme="dark"] body { background-color: var(--wh-bg); color: var(--wh-text); }
html[data-theme="dark"] ::selection { background: rgba(244, 124, 31, .35); color: #fff; }
html[data-theme="dark"] ::placeholder { color: var(--wh-faint); opacity: 1; }
html[data-theme="dark"] hr { border-color: var(--wh-line); }
html[data-theme="dark"] img { color-scheme: normal; }

/* Colour utility classes used in views (generated from the views; DarkThemeTest keeps this list complete) */
html[data-theme="dark"] .bg-amber-100 { background-color: var(--tone-amber-bg); }
html[data-theme="dark"] .bg-amber-50 { background-color: var(--tone-amber-soft); }
html[data-theme="dark"] .bg-blue-50 { background-color: var(--tone-blue-soft); }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--wh-surface-3); }
html[data-theme="dark"] .bg-gray-50 { background-color: var(--wh-surface-2); }
html[data-theme="dark"] .bg-green-100 { background-color: var(--tone-green-bg); }
html[data-theme="dark"] .bg-green-50 { background-color: var(--tone-green-soft); }
html[data-theme="dark"] .bg-indigo-50 { background-color: var(--tone-violet-soft); }
html[data-theme="dark"] .bg-orange-50 { background-color: var(--tone-orange-soft); }
html[data-theme="dark"] .bg-purple-50 { background-color: var(--tone-violet-soft); }
html[data-theme="dark"] .bg-red-50 { background-color: var(--tone-red-soft); }
html[data-theme="dark"] .bg-teal-50 { background-color: var(--tone-cyan-soft); }
html[data-theme="dark"] .bg-white { background-color: var(--wh-surface); }
html[data-theme="dark"] .border-amber-100 { border-color: var(--tone-amber-bg); }
html[data-theme="dark"] .border-amber-200 { border-color: var(--tone-amber-line); }
html[data-theme="dark"] .border-blue-100 { border-color: var(--tone-blue-bg); }
html[data-theme="dark"] .border-blue-200 { border-color: var(--tone-blue-line); }
html[data-theme="dark"] .border-gray-100 { border-color: var(--wh-line-soft); }
html[data-theme="dark"] .border-gray-200 { border-color: var(--wh-line); }
html[data-theme="dark"] .border-gray-300 { border-color: var(--wh-line-strong); }
html[data-theme="dark"] .border-gray-50 { border-color: var(--wh-line-soft); }
html[data-theme="dark"] .border-green-200 { border-color: var(--tone-green-line); }
html[data-theme="dark"] .border-indigo-200 { border-color: var(--tone-violet-line); }
html[data-theme="dark"] .border-orange-200 { border-color: var(--tone-orange-line); }
html[data-theme="dark"] .border-purple-200 { border-color: var(--tone-violet-line); }
html[data-theme="dark"] .border-red-200 { border-color: var(--tone-red-line); }
html[data-theme="dark"] .border-teal-200 { border-color: var(--tone-cyan-line); }
html[data-theme="dark"] .divide-gray-50 > * + * { border-color: var(--wh-line-soft); }
html[data-theme="dark"] .text-amber-500 { color: var(--tone-amber-mid); }
html[data-theme="dark"] .text-amber-600 { color: var(--tone-amber-mid); }
html[data-theme="dark"] .text-amber-700 { color: var(--tone-amber-fg); }
html[data-theme="dark"] .text-amber-800 { color: var(--tone-amber-fg); }
html[data-theme="dark"] .text-blue-300 { color: var(--tone-blue-line); }
html[data-theme="dark"] .text-blue-400 { color: var(--tone-blue-mid); }
html[data-theme="dark"] .text-blue-500 { color: var(--tone-blue-mid); }
html[data-theme="dark"] .text-blue-600 { color: var(--tone-blue-mid); }
html[data-theme="dark"] .text-blue-700 { color: var(--tone-blue-fg); }
html[data-theme="dark"] .text-blue-900 { color: var(--tone-blue-fg); }
html[data-theme="dark"] .text-gray-300 { color: var(--wh-faint); }
html[data-theme="dark"] .text-gray-400 { color: var(--wh-faint); }
html[data-theme="dark"] .text-gray-500 { color: var(--wh-muted); }
html[data-theme="dark"] .text-gray-600 { color: var(--wh-text); }
html[data-theme="dark"] .text-gray-700 { color: var(--wh-text); }
html[data-theme="dark"] .text-gray-800 { color: var(--wh-ink); }
html[data-theme="dark"] .text-gray-900 { color: var(--wh-ink); }
html[data-theme="dark"] .text-green-500 { color: var(--tone-green-mid); }
html[data-theme="dark"] .text-green-600 { color: var(--tone-green-mid); }
html[data-theme="dark"] .text-green-700 { color: var(--tone-green-fg); }
html[data-theme="dark"] .text-green-800 { color: var(--tone-green-fg); }
html[data-theme="dark"] .text-indigo-500 { color: var(--tone-violet-mid); }
html[data-theme="dark"] .text-indigo-700 { color: var(--tone-violet-fg); }
html[data-theme="dark"] .text-navy { color: var(--wh-navy-text); }
html[data-theme="dark"] .text-orange { color: var(--orange-text); }
html[data-theme="dark"] .text-orange-400 { color: var(--tone-orange-mid); }
html[data-theme="dark"] .text-orange-500 { color: var(--tone-orange-mid); }
html[data-theme="dark"] .text-orange-600 { color: var(--tone-orange-mid); }
html[data-theme="dark"] .text-orange-700 { color: var(--tone-orange-fg); }
html[data-theme="dark"] .text-orange-900 { color: var(--tone-orange-fg); }
html[data-theme="dark"] .text-purple-600 { color: var(--tone-violet-mid); }
html[data-theme="dark"] .text-purple-700 { color: var(--tone-violet-fg); }
html[data-theme="dark"] .text-red-300 { color: var(--tone-red-line); }
html[data-theme="dark"] .text-red-400 { color: var(--tone-red-mid); }
html[data-theme="dark"] .text-red-500 { color: var(--tone-red-mid); }
html[data-theme="dark"] .text-red-600 { color: var(--tone-red-mid); }
html[data-theme="dark"] .text-red-700 { color: var(--tone-red-fg); }
html[data-theme="dark"] .text-red-800 { color: var(--tone-red-fg); }
html[data-theme="dark"] .text-teal-700 { color: var(--tone-cyan-fg); }
html[data-theme="dark"] .text-yellow-500 { color: var(--tone-amber-mid); }
html[data-theme="dark"] .focus\:ring-orange-300:focus { --tw-ring-color: var(--tone-orange-line); }
html[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: var(--tone-blue-soft); }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--wh-surface-3); }
html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--wh-surface-2); }
html[data-theme="dark"] .hover\:bg-red-50:hover { background-color: var(--tone-red-soft); }
html[data-theme="dark"] .hover\:border-gray-300:hover { border-color: var(--wh-line-strong); }
html[data-theme="dark"] .hover\:border-orange-300:hover { border-color: var(--tone-orange-line); }
html[data-theme="dark"] .hover\:text-blue-700:hover { color: var(--tone-blue-fg); }
html[data-theme="dark"] .hover\:text-blue-800:hover { color: var(--tone-blue-fg); }
html[data-theme="dark"] .hover\:text-gray-600:hover { color: var(--wh-text); }
html[data-theme="dark"] .hover\:text-gray-700:hover { color: var(--wh-text); }
html[data-theme="dark"] .hover\:text-navy:hover { color: var(--wh-navy-text); }
html[data-theme="dark"] .hover\:text-red-600:hover { color: var(--tone-red-mid); }

/* Rich text editor (Redactix reads these variables from :root) */
html[data-theme="dark"] {
    --redactix-primary: #60A5FA;
    --redactix-primary-hover: #93C5FD;
    --redactix-primary-light: rgba(59, 130, 246, .22);
    --redactix-danger: #F87171;
    --redactix-danger-hover: #FCA5A5;
    --redactix-danger-light: rgba(239, 68, 68, .18);
    --redactix-border: var(--wh-line);
    --redactix-bg: var(--wh-surface);
    --redactix-bg-secondary: var(--wh-surface-2);
    --redactix-bg-hover: var(--wh-surface-3);
    --redactix-bg-active: var(--wh-line);
    --redactix-text: var(--wh-text);
    --redactix-text-muted: var(--wh-muted);
    --redactix-text-placeholder: var(--wh-faint);
    --redactix-shadow: 0 4px 12px rgba(0, 0, 0, .45);
    --redactix-overlay: rgba(0, 0, 0, .6);
    --redactix-blockquote-bg: var(--wh-surface-2);
    --redactix-code-bg: var(--wh-surface-3);
    --redactix-code-color: #FB7185;
    --redactix-mark-bg: #854D0E;
    --redactix-spoiler-bg: var(--wh-line);
}

/* Date picker (flatpickr) */
html[data-theme="dark"] .flatpickr-calendar { background: var(--wh-surface); color: var(--wh-text); box-shadow: 0 12px 32px var(--wh-shadow); }
html[data-theme="dark"] .flatpickr-calendar.arrowTop::before, html[data-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--wh-surface); }
html[data-theme="dark"] .flatpickr-calendar.arrowBottom::before, html[data-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--wh-surface); }
html[data-theme="dark"] .flatpickr-months .flatpickr-month, html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme="dark"] .flatpickr-current-month input.cur-year, html[data-theme="dark"] .flatpickr-weekdays { background: transparent; color: var(--wh-ink); fill: var(--wh-ink); }
html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--wh-surface); color: var(--wh-ink); }
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg, html[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--wh-text); }
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg, html[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg { fill: #F47C1F; }
html[data-theme="dark"] span.flatpickr-weekday { background: transparent; color: var(--wh-muted); }
html[data-theme="dark"] .flatpickr-day { color: var(--wh-text); }
html[data-theme="dark"] .flatpickr-day.prevMonthDay, html[data-theme="dark"] .flatpickr-day.nextMonthDay, html[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--wh-faint); opacity: .6; }
html[data-theme="dark"] .flatpickr-day.selected, html[data-theme="dark"] .flatpickr-day.startRange, html[data-theme="dark"] .flatpickr-day.endRange { background: #F47C1F; border-color: #F47C1F; color: #fff; }
html[data-theme="dark"] .flatpickr-day.inRange { color: var(--wh-ink); }

/* Dark buttons made with gray-800/900 would vanish on a dark page */
html[data-theme="dark"] .bg-gray-800 { background-color: #334155; }
html[data-theme="dark"] .hover\:bg-gray-900:hover { background-color: #475569; }

/* Storefront brand surfaces: neutral charcoal instead of the (possibly very dark) brand colour */
html[data-theme="dark"] .ft { background: #101113; }
html[data-theme="dark"] .hiw2:not([style*="--navy"]) { background: linear-gradient(160deg, #2A2D35 0%, #1A1C21 100%); }

/* Product and category pictures are made for white pages; soften them so they do not glare */
html[data-theme="dark"] .pcard-img, html[data-theme="dark"] .cat-img { filter: brightness(.9); }

/* Storefront hero and stats band: neutral charcoal instead of fixed navy */
html[data-theme="dark"] .stats-bar, html[data-theme="dark"] .hero-t3 { background: linear-gradient(135deg, #1A1C21 0%, #24272E 55%, #2B2F38 100%); }
html[data-theme="dark"] .hero-t2 { background-color: #1A1C21; }
html[data-theme="dark"] .hero-t2 .hero-overlay { background: linear-gradient(160deg, rgba(16,17,19,.85) 0%, rgba(16,17,19,.68) 45%, rgba(16,17,19,.5) 100%); }


/* Storefront headings, names and prices use the strong text colour instead of a saturated blue */
html[data-theme="dark"] .store-shell { --tone-blue-fg: var(--wh-ink); }

/* Rows that need action: a quieter tint than the shared amber so long lists do not turn brown */
html[data-theme="dark"] .order-list-card tbody tr.order-needs-action { background: rgba(245, 158, 11, .04); }