/* Jaring pengaman tema gelap.
 *
 * Sebelum berkas ini, mode gelap SEPENUHNYA bergantung pada JavaScript:
 * site.js menetapkan data-theme, dan CSS hanya mengenal html[data-theme="dark"].
 * Tidak ada satu pun @media (prefers-color-scheme) di seluruh proyek.
 *
 * Akibatnya, pengunjung dengan sistem gelap yang membuka blog ini akan melihat
 * halaman TERANG sampai JavaScript selesai dimuat — dan halaman terang permanen
 * bila JS gagal, diblokir, atau dimatikan. Sudah diverifikasi: dengan JS
 * dinonaktifkan, latar tetap #fbfdf9 walaupun sistem dalam mode gelap.
 *
 * Nilai di bawah sengaja identik dengan blok html[data-theme="dark"] di
 * nature-theme.css. Bila salah satu diubah, ubah keduanya.
 *
 * :not([data-theme="light"]) menjaga agar pilihan eksplisit pengunjung tetap
 * menang: seseorang yang menekan tombol menjadi terang di sistem gelap tetap
 * mendapat halaman terang.
 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --paper:  #112019;
    --paper-2:#172a21;
    --ink:    #eef8f0;
    --muted:  #a9beb0;
    --line:   rgba(255,255,255,.12);
    --card:   #15261e;
    --shadow: 0 18px 46px rgba(0,0,0,.24);
    color-scheme: dark;
  }
  html:not([data-theme="light"]) .sidebar-about { background: var(--paper-2); }
  html:not([data-theme="light"]) .comment-form  { background: var(--paper-2); }
}
html[data-theme="dark"] { color-scheme: dark; }

/* ---------------------------------------------------------------------------
 * Warna yang dipaku di dalam isi artikel
 * ---------------------------------------------------------------------------
 * Isi artikel dirender apa adanya lewat {{.post.content|raw}}. Teks yang
 * ditempel dari Word, Google Docs, atau WordPress lama membawa warnanya
 * sendiri:
 *
 *   <p style="color:#000000">          <span style="color: rgb(0,0,0)">
 *   <font color="#333333">             <h2 style="color:#1a1a1a">
 *
 * Gaya sebaris mengalahkan setiap aturan kelas, jadi di mode malam paragraf
 * itu tetap hitam di atas latar gelap. Terukur: rasio kontras 1,03 sampai 1,34
 * — di bawah 1,5 tulisan praktis tidak terlihat sama sekali, dan tidak ada
 * galat apa pun yang muncul.
 *
 * !important di sini bukan jalan pintas. Ini justru satu-satunya kasus yang
 * memang membutuhkannya: melawan gaya sebaris yang ditulis penulis konten,
 * bukan melawan lembar gaya sendiri.
 *
 * Penargetannya sempit — hanya elemen di dalam .prose yang benar-benar
 * membawa atribut style berisi warna, atau tag <font> lama. Isi artikel yang
 * ditulis normal tidak tersentuh sama sekali.
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .prose [style*="color"],
  html:not([data-theme="light"]) .prose font[color] {
    color: inherit !important;
  }
  /* Latar putih yang dipaku membuat kotak menyilaukan di tengah halaman gelap.
     Teksnya memang terbaca, tetapi tampilannya seperti halaman yang rusak. */
  html:not([data-theme="light"]) .prose [style*="background"],
  html:not([data-theme="light"]) .prose [bgcolor] {
    background: transparent !important;
  }
  html:not([data-theme="light"]) .prose table,
  html:not([data-theme="light"]) .prose td,
  html:not([data-theme="light"]) .prose th {
    background: transparent !important;
    color: inherit !important;
    border-color: var(--line) !important;
  }
}

html[data-theme="dark"] .prose [style*="color"],
html[data-theme="dark"] .prose font[color] {
  color: inherit !important;
}
html[data-theme="dark"] .prose [style*="background"],
html[data-theme="dark"] .prose [bgcolor] {
  background: transparent !important;
}
html[data-theme="dark"] .prose table,
html[data-theme="dark"] .prose td,
html[data-theme="dark"] .prose th {
  background: transparent !important;
  color: inherit !important;
  border-color: var(--line) !important;
}