/* ===========================================================================
   Tema warna satuan kerja
   ---------------------------------------------------------------------------
   Berkas TERSENDIRI, dimuat kerangka pada setiap halaman — bukan hanya pada
   halaman satuan kerja.

   Semula blok ini berada di opd.css, dan itu cacat: opd.css hanya dimuat halaman
   beranda, halaman, kontak, dan informasi publik. Halaman daftar berita dan
   halaman satu berita tidak memuatnya, sehingga atribut data-tema-opd ada di
   sana tetapi tidak berpengaruh apa pun — diukur pada dinkes/berita: atributnya
   "hijau" sementara --utama-kuat tetap biru #14406b. Kegagalan seperti itu tidak
   menghasilkan galat apa pun; warnanya saja yang tidak pernah berganti.

   Lingkupnya tetap terbatas pada satuan kerja, dan yang membatasinya BUKAN
   berkas mana yang dimuat, melainkan ada tidaknya atribut data-tema-opd pada
   elemen akar. Kerangka hanya memasangnya bila halaman itu milik satu satuan
   kerja, sehingga halaman apex tetap memakai warna resmi portal walaupun berkas
   ini ikut dimuat di sana.

   Setiap tema hanya mengganti empat token warna — utama, utama-kuat, sorot-awal,
   sorot-akhir — ditambah warna keping ikon dan latar hias kepala. Latar, garis,
   dan warna teks tidak disentuh; itulah yang menjaga seluruh halaman tetap
   terbaca apa pun temanya.

   Perhatikan :not([data-kontras="tinggi"]). Tanpa itu tema akan MEMBATALKAN mode
   kontras tinggi: keduanya sama-sama menyasar :root dengan satu atribut,
   sehingga yang menang hanya ditentukan urutan berkas. Dengan pengecualian ini,
   urutan pemuatan tidak lagi menentukan apa pun — dan itulah yang membuat berkas
   ini aman dipindahkan ke mana saja.

   Angka kontras tiap tema tercatat di App\Enums\TemaOpd::kontrasTerburuk(),
   seluruhnya dihitung SAAT kilau menyapu — keadaan paling terang yang mungkin.
   Kode warnanya digandakan di TemaOpd::warna() untuk pratinjau di panel, dan
   penggandaan itu dijaga TemaOpdTest.
   =========================================================================== */

:root { --o-hias: rgb(27 85 138 / 52%); --o-hias-dua: rgb(18 180 124 / 34%); }

:root:not([data-kontras="tinggi"])[data-tema-opd="hijau"] {
    --utama: #1a6b48; --utama-kuat: #14563a;
    --sorot-awal: #14563a; --sorot-akhir: #196b48;
    --ikon-kartu-teks: #14563a;
    --o-hias: rgb(26 107 72 / 52%); --o-hias-dua: rgb(18 180 124 / 32%);
}
:root:not([data-kontras="tinggi"])[data-tema-opd="teal"] {
    --utama: #126b6b; --utama-kuat: #0d5757;
    --sorot-awal: #0d5757; --sorot-akhir: #106965;
    --ikon-kartu-teks: #0d5757;
    --o-hias: rgb(18 107 107 / 52%); --o-hias-dua: rgb(18 180 160 / 30%);
}
:root:not([data-kontras="tinggi"])[data-tema-opd="indigo"] {
    --utama: #3f4a9c; --utama-kuat: #333c80;
    --sorot-awal: #333c80; --sorot-akhir: #454f9e;
    --ikon-kartu-teks: #333c80;
    --o-hias: rgb(63 74 156 / 48%); --o-hias-dua: rgb(90 120 200 / 30%);
}
:root:not([data-kontras="tinggi"])[data-tema-opd="ungu"] {
    --utama: #6b3a8c; --utama-kuat: #582f73;
    --sorot-awal: #582f73; --sorot-akhir: #7a4299;
    --ikon-kartu-teks: #582f73;
    --o-hias: rgb(107 58 140 / 46%); --o-hias-dua: rgb(150 100 190 / 28%);
}
:root:not([data-kontras="tinggi"])[data-tema-opd="marun"] {
    --utama: #8c2f3f; --utama-kuat: #732634;
    --sorot-awal: #732634; --sorot-akhir: #993645;
    --ikon-kartu-teks: #732634;
    --o-hias: rgb(140 47 63 / 44%); --o-hias-dua: rgb(190 90 105 / 28%);
}
:root:not([data-kontras="tinggi"])[data-tema-opd="tanah"] {
    --utama: #8a5a1a; --utama-kuat: #704914;
    --sorot-awal: #704914; --sorot-akhir: #7d521a;
    --ikon-kartu-teks: #704914;
    --o-hias: rgb(138 90 26 / 44%); --o-hias-dua: rgb(190 140 60 / 28%);
}

/* ===========================================================================
   Varian mode gelap
   ---------------------------------------------------------------------------
   Sampai blok ini ada, berkas ini TIDAK punya mode gelap sama sekali: keenam
   tema selalu memasang --utama-kuat versi pekat, sebab nilainya dipilih untuk
   tulisan di atas latar terang. Di mode gelap nilai itu tetap dipasang, dan
   token yang sama dipakai sebagai warna tautan, keping penerbit, dan lencana
   di atas kartu gelap.

   Terukur pada dinkes (tema hijau), mode gelap: --utama-kuat #14563a di atas
   kartu #121e28 bernisbah 1,95:1 — jauh di bawah 4,5:1 yang dituntut WCAG AA,
   dan cukup rendah untuk membuat tulisannya praktis tidak terbaca. Tidak ada
   galat yang muncul; warnanya saja yang salah arah.

   Yang diganti hanya --utama dan --utama-kuat, dan itu disengaja:

     - --sorot-awal / --sorot-akhir tetap pekat. Keduanya latar gradien kepala
       yang bertulisan --teks-balik putih, dan justru pekatlah yang membuatnya
       terbaca — di mode gelap maupun terang.
     - --ikon-kartu-teks tetap pekat, sebab keping ikon berlatar --ikon-kartu
       yang terang di kedua mode.

   Nilainya dipilih sejajar dengan --utama-kuat gelap bawaan portal (#a8cbec,
   nisbah 10,1:1 terhadap kartu gelap), sehingga tema mana pun yang dipilih OPD
   memberi keterbacaan yang setara — bukan enam tema dengan enam tingkat
   keterbacaan berbeda.

   :not([data-kontras="tinggi"]) diteruskan dari blok terang di atas dengan
   alasan yang sama: mode kontras tinggi harus tetap menang. Dan karena
   pemilihnya satu :not() lebih panjang daripada blok terangnya, blok ini menang
   tanpa bergantung urutan.

   Uji warna_pratinjau_panel_sama_dengan_warna_di_css membaca kemunculan PERTAMA
   setiap penanda [data-tema-opd="..."], jadi blok terang di atas tetap yang
   dibandingkan dengan enum — dan itu benar: enum dipakai untuk pratinjau di
   panel, yang selalu berlatar terang.
   =========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-kontras="tinggi"]):not([data-tema="terang"])[data-tema-opd="hijau"] {
        --utama: #7fd6a8; --utama-kuat: #a6e3c2;
    }
    :root:not([data-kontras="tinggi"]):not([data-tema="terang"])[data-tema-opd="teal"] {
        --utama: #6fd3d3; --utama-kuat: #a0e5e5;
    }
    :root:not([data-kontras="tinggi"]):not([data-tema="terang"])[data-tema-opd="indigo"] {
        --utama: #a3abe8; --utama-kuat: #c3c9f4;
    }
    :root:not([data-kontras="tinggi"]):not([data-tema="terang"])[data-tema-opd="ungu"] {
        --utama: #c9a3e0; --utama-kuat: #ddc2ee;
    }
    :root:not([data-kontras="tinggi"]):not([data-tema="terang"])[data-tema-opd="marun"] {
        --utama: #eda3ae; --utama-kuat: #f4c2ca;
    }
    :root:not([data-kontras="tinggi"]):not([data-tema="terang"])[data-tema-opd="tanah"] {
        --utama: #e0b878; --utama-kuat: #edd0a3;
    }
}

/* Pilihan sadar pengguna selalu menang, ke arah mana pun. */
:root:not([data-kontras="tinggi"])[data-tema="gelap"][data-tema-opd="hijau"] {
    --utama: #7fd6a8; --utama-kuat: #a6e3c2;
}
:root:not([data-kontras="tinggi"])[data-tema="gelap"][data-tema-opd="teal"] {
    --utama: #6fd3d3; --utama-kuat: #a0e5e5;
}
:root:not([data-kontras="tinggi"])[data-tema="gelap"][data-tema-opd="indigo"] {
    --utama: #a3abe8; --utama-kuat: #c3c9f4;
}
:root:not([data-kontras="tinggi"])[data-tema="gelap"][data-tema-opd="ungu"] {
    --utama: #c9a3e0; --utama-kuat: #ddc2ee;
}
:root:not([data-kontras="tinggi"])[data-tema="gelap"][data-tema-opd="marun"] {
    --utama: #eda3ae; --utama-kuat: #f4c2ca;
}
:root:not([data-kontras="tinggi"])[data-tema="gelap"][data-tema-opd="tanah"] {
    --utama: #e0b878; --utama-kuat: #edd0a3;
}