/* Sacristan — dark mode (Carlos's mockup, docs/design/dark-mode, approved by Bruno 2026-10-29).
   The theme is <html data-theme="dark|light">, set before first paint by layouts/_theme.blade.php: the visitor's saved choice
   (localStorage only) or else the device setting. The cached HTML never carries a theme. Screen only, so print stays black on white.
   Most colours come from the classical.css tokens, so retuning them does most of the work; below are the hard-coded white boxes. */
@media screen {
  html[data-theme=dark] {
    color-scheme: dark;
    --color-bg: #141312;
    --color-surface: #252321;
    --color-text: #efebe5;
    --color-accent: #cfa15e;
    --color-accent-2: #c79a5a;
    --color-divider: color-mix(in srgb, #efebe5 14%, transparent);
    /* neutral ramp turned over: the same step names keep their job (300 = hairline, 600 = tertiary text, 700 = secondary text) */
    --color-neutral-100: #1a1918;
    --color-neutral-200: #222120;
    --color-neutral-300: #2f2c29;
    --color-neutral-400: #45413c;
    --color-neutral-500: #6e6963;
    --color-neutral-600: #8e8881;
    --color-neutral-700: #b4aea6;
    --color-neutral-800: #d2ccc4;
    --color-neutral-900: #e6e1da;
    /* gold: lifted one step so gold text passes AA on the dark ground (#dcb67c on #141312 = 9.7:1, on cards 9.0:1; tertiary #8e8881 = 5.3:1 / 4.9:1) */
    --color-accent-100: #2a2219;
    --color-accent-200: #3a2e1e;
    --color-accent-300: #5a4527;
    --color-accent-400: #b88a4c;
    --color-accent-500: #cfa15e;
    --color-accent-600: #d6ab6c;
    --color-accent-700: #dcb67c;
    --color-accent-800: #e8c995;
    --color-accent-900: #f2dcb4;
    --shadow-sm: 0 0 0 1px #2f2c29;
    --shadow-md: 0 0 0 1px #2f2c29, 0 6px 18px rgba(0,0,0,.35);
    --shadow-lg: 0 0 0 1px #2f2c29, 0 16px 40px rgba(0,0,0,.5);
    --shadow-soft: 0 0 0 1px rgba(255,255,255,.02), 0 6px 18px rgba(0,0,0,.28);
    --shadow-softer: 0 2px 8px rgba(0,0,0,.25);
    --color-card: #1c1b19;
    --on-ink: #141312;               /* text on an ink-filled button (ink is light in dark mode) */
  }
  /* the page-scoped card colours */
  html[data-theme=dark] .page.home, html[data-theme=dark] .page.church, html[data-theme=dark] .sheet, html[data-theme=dark] body { --card: #1c1b19; --row: #1c1b19; }
  html[data-theme=dark] .cw { --chip: #252321; }

  /* white boxes → card */
  html[data-theme=dark] .site-foot, html[data-theme=dark] .callout.lite, html[data-theme=dark] .sup-toggle input:checked + label, html[data-theme=dark] .callout-btn.alt, html[data-theme=dark] .callout-btn.alt:hover, html[data-theme=dark] .nav .langs ul, html[data-theme=dark] .cw .dstrip .in, html[data-theme=dark] .cw .pill, html[data-theme=dark] .cw .cmore, html[data-theme=dark] .gl-plate, html[data-theme=dark] .page.church .suggest-dialog, html[data-theme=dark] .page.church .suggest .input, html[data-theme=dark] .cs-field, html[data-theme=dark] #ph-form input[type=text], html[data-theme=dark] .bd, html[data-theme=dark] .bd .chk input:not([type]), html[data-theme=dark] .bd .chk select { background: #1c1b19; }
  html[data-theme=dark] .cw .dstrip { background: var(--color-bg); }
  html[data-theme=dark] .locnote.status { background: #1c1b19; }   /* inline <style> in explore.blade.php */
  html[data-theme=dark] .srow .ph.noph, html[data-theme=dark] .sheet .row .plate.noph, html[data-theme=dark] .row .plate.noph, html[data-theme=dark] .ph-line-ico { background: #2a2219; }
  html[data-theme=dark] .gl-plate img { background: #252321; }
  html[data-theme=dark] .page.church .stickybar { background: rgba(20,19,18,.94); }
  html[data-theme=dark] .cs-stale:not(.callout) { background: #2a2219; color: #dcb67c; }
  html[data-theme=dark] .cs-sheet__grab { background: #45413c; }
  html[data-theme=dark] .cs-field::placeholder { color: #8e8881; }
  html[data-theme=dark] .cs-err, html[data-theme=dark] .ph-status.err { color: #e08a76; }
  html[data-theme=dark] .bd .x { background: #252321; color: #b4aea6; }
  html[data-theme=dark] .bd .sty, html[data-theme=dark] .bd .chk input:not([type]), html[data-theme=dark] .bd .chk select { border-color: #45413c; }
  html[data-theme=dark] .bd .code { background: #252321; border-color: #45413c; color: #d2ccc4; }
  html[data-theme=dark] .bd .bd-btn2 { border-color: #45413c; }
  html[data-theme=dark] .bd .fine { border-top-color: #2f2c29; }
  html[data-theme=dark] .page.church .own a { border-bottom-color: #45413c; }
  /* the badge preview stays a white "parish website": most parish sites are light, and the badge must be judged there */
  html[data-theme=dark] .bd .prev { background: #fff; border-color: #6e6963; }

  html[data-theme=dark] .rv-tabs a[aria-current="page"] small { color: rgba(20,19,18,.7); }

  /* photos: a touch less glare, never inverted */
  html[data-theme=dark] .photo img, html[data-theme=dark] .spec img, html[data-theme=dark] .cw .ph, html[data-theme=dark] .gl-plate img, html[data-theme=dark] .srow .ph img, html[data-theme=dark] .plate img { filter: brightness(.92) contrast(1.02); }
  /* the liturgical-colour dots read on dark with a light ring */
  html[data-theme=dark] .lit-sw { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
  /* the seal: brand gold stays (#b68235 on the logo itself), its white cross stays white — nothing to change */

  /* maps (explore): MapLibre tiles tinted to the warm dark ground until a real dark style exists */
  html[data-theme=dark] .maplibregl-canvas { filter: invert(.92) hue-rotate(180deg) saturate(.35) brightness(.9) sepia(.12); }
  html[data-theme=dark] .sheet .maplibregl-popup-content { background: #1c1b19; color: #b4aea6; }
  html[data-theme=dark] .sheet .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #1c1b19; }
  html[data-theme=dark] .sheet .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #1c1b19; }
  html[data-theme=dark] .maplibregl-ctrl-group { background: #1c1b19; }
  html[data-theme=dark] .maplibregl-ctrl-group button + button { border-top-color: #2f2c29; }
  html[data-theme=dark] .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1); }
  html[data-theme=dark] .maplibregl-ctrl-attrib { background: rgba(20,19,18,.7) !important; color: #8e8881; }
  html[data-theme=dark] .maplibregl-ctrl-attrib a { color: #b4aea6; }
}