/*
 * D.CATALOG — designer handoff, 2026-10-06
 * Add this stylesheet and data-theme="bw" to <html> to enable B/W.
 * Remove the attribute (or the stylesheet link) to restore the original palette.
 * Layout, typography, component styles and application state stay in their own files.
 * Keep the filter on the document root: filtering body or a layout wrapper would
 * change the containing block of fixed navigation and overlays.
 * Reference: https://www.w3.org/TR/filter-effects-1/#FilterProperty
 */
html[data-theme="bw"] {
  filter: grayscale(1);
  color-scheme: light;
  background: #f7f7f7;
}

/* Native dialogs and popovers render in the top layer, outside ordinary paint order. */
html[data-theme="bw"] :is(dialog, [popover]) {
  filter: grayscale(1);
}

html[data-theme="bw"] :is(dialog, [popover])::backdrop {
  background-color: rgb(0 0 0 / 42%);
  filter: grayscale(1);
}

html[data-theme="bw"] :is(input, select, textarea, progress) {
  accent-color: #222;
}

html[data-theme="bw"] :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: #222 !important;
}

html[data-theme="bw"] ::selection {
  background: #222;
  color: #fff;
}

@media print {
  html[data-theme="bw"] {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}