/* Swill Art — dark mode (follows the visitor's system setting only)
   Shared across customer-facing pages: link this AFTER each page's inline
   <style> so equal-specificity rules win. Dark-navy palette, not pure black. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0d1826;
    --surface: #17283d;
    --surface2: #1d3249;
    --text: #e4edf7;
    --muted: #92abc6;
    --accent: #5aa9e0;
    --accent-light: #7fc4ee;
    --border: #2b4560;
    --danger: #e07070;
    --success: #4cc38a;
  }

  body { background-image: none !important; }

  /* The site header gradient feeds off --accent — keep it deep navy, not
     the lighter text-accent */
  header {
    background: linear-gradient(135deg, #12304a 0%, #1d4a70 100%) !important;
  }

  /* Inputs — several pages hardcode #f8f9fb */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea, select {
    background-color: #122238 !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }
  input::placeholder, textarea::placeholder { color: #5f7a96 !important; }

  /* Hardcoded greys on light surfaces that need muting on dark */
  .art-desc, .modal .modal-desc, .order-items-list, .post-text,
  .terms-section p, .terms-section li { color: var(--muted) !important; }

  /* Light placeholder fills behind artwork images */
  .art-card img, .art-card .no-image, .art-img-wrap, .modal-image {
    background: linear-gradient(135deg, #17283d 0%, #0f1f33 100%) !important;
  }

  /* Cards that hardcode white */
  .account-card { background: var(--surface) !important; }

  /* Step dots / panels that hardcode pale greys */
  .step-dot { background: #17283d !important; }
  .sold-panel { background: #17283d !important; }

  /* Toast: light-theme version is a dark pill; invert it */
  .toast { background: #e4edf7 !important; color: #17283d !important; }

  /* Amber "verification pending" note needs a lighter amber on dark */
  #d-email-pending { color: #f0a95e !important; }

  /* Status tint chips stay legible — just soften their text colours */
  .status-badge.delivered { color: #b07cc6 !important; }
}