/* Dark mode semantic overrides. Also supports WP style variation "Sombre". */
html[data-theme="dark"],
body.is-style-sombre {
  --bg: var(--abysse);
  --fg: var(--acier);
  --fg-muted: #b9c2d1;
  --surface: #31435f;
  --surface-2: #263751;
  --border: rgba(224, 225, 221, 0.22);
  --accent-title: #d9e4ff;
  --accent-title-soft: rgba(217, 228, 255, 0.16);
  color-scheme: dark;
}

html[data-theme="dark"] .brand__mark,
body.is-style-sombre .brand__mark {
  background: var(--blanc);
  color: var(--abysse);
}

html[data-theme="dark"] .site-header,
body.is-style-sombre .site-header {
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}

html[data-theme="dark"] .sylka-hero h1,
body.is-style-sombre .sylka-hero h1 {
  color: var(--acier);
}

html[data-theme="dark"] .btn--secondary,
body.is-style-sombre .btn--secondary {
  color: var(--acier);
  border-color: rgba(224, 225, 221, 0.7);
}

html[data-theme="dark"] .btn--secondary:hover,
body.is-style-sombre .btn--secondary:hover {
  color: var(--orange-ht);
  border-color: var(--orange-ht);
}

html[data-theme="dark"] .sylka-verbatim,
html[data-theme="dark"] .sylka-case,
html[data-theme="dark"] .sylka-assess__card,
html[data-theme="dark"] .sylka-cases__filters [data-action="cases-filter"],
body.is-style-sombre .sylka-verbatim,
body.is-style-sombre .sylka-case,
body.is-style-sombre .sylka-assess__card,
body.is-style-sombre .sylka-cases__filters [data-action="cases-filter"] {
  background: #3a4f70;
  border-color: rgba(224, 225, 221, 0.26);
  box-shadow: 0 10px 24px rgba(8, 16, 30, 0.28);
}

html[data-theme="dark"] .sylka-verbatim::before,
body.is-style-sombre .sylka-verbatim::before {
  background: #3a4f70;
}