/* ==========================================================================
   CERDAS v2 — Design tokens
   SEMUA nilai visual (warna, font, ukuran, jarak, radius, bayangan) ada di sini.
   Komponen di app.css hanya boleh memakai var(--...). Untuk mengganti design system
   (mis. dari Figma), cukup ubah nilai di berkas ini.
   Nilai awal diambil dari CSS v1 (0-cerdas-vol2/index_versi a.php). Beberapa warna teks
   digelapkan sedikit agar memenuhi kontras WCAG AA (lihat catatan "AA").
   ========================================================================== */

:root {
  /* ---------- Warna dasar ---------- */
  --warna-latar: #EAF4F9;
  --warna-permukaan: #FFFFFF;
  --warna-permukaan-redup: #F7FAFC;
  --warna-permukaan-info: #F0F7FB;
  --warna-permukaan-hover: #F0F5F8;
  --warna-permukaan-aktif: #EEF4F7;

  --warna-teks: #1A2A38;
  --warna-judul: #2F4156;
  --warna-teks-sekunder: #52616E;
  --warna-teks-tabel: #465665;
  --warna-teks-nav: #536474;
  --warna-teks-catatan: #4E6273;
  --warna-teks-samar: #5E6D79;        /* AA: v1 #71808C (4,06:1) */
  --warna-teks-terbalik: #FFFFFF;

  --warna-aksen: #567C8D;             /* ikon, garis aksen, tombol */
  --warna-aksen-teks: #48697A;        /* AA: teks berwarna aksen di latar terang */
  --warna-aksen-gelap: #2F4156;

  --warna-garis: #E2E9F0;
  --warna-garis-kuat: #D6E0E8;
  --warna-garis-lembut: #E8EEF3;

  --warna-badge-latar: #EAF0F4;
  --warna-badge-teks: #465665;

  /* ---------- Warna makna ---------- */
  --warna-naik-latar: #FCE8E6;        /* di atas rata-rata / domain kesehatan */
  --warna-naik-teks: #B23B2D;
  --warna-turun-latar: #E3F3EA;       /* di bawah rata-rata / arah positif */
  --warna-turun-teks: #1E7A4C;
  --warna-info-latar: #E3F0FA;        /* domain pendidikan */
  --warna-info-teks: #2A6FA8;
  --warna-peringatan-latar: #FFF4E5;
  --warna-peringatan-teks: #8A4B00;
  --warna-peringatan-garis: #F0B45A;
  --warna-error-latar: #FCE8E6;
  --warna-error-teks: #9F2E22;

  /* ---------- Status laporan warga (kontras teks ≥ 4,5:1) ---------- */
  --status-diterima-latar: #E3F2FD;
  --status-diterima-teks: #1565C0;
  --status-diteruskan-latar: #FFF3E0;
  --status-diteruskan-teks: #A84300;
  --status-ditindaklanjuti-latar: #F3E5F5;
  --status-ditindaklanjuti-teks: #6A1B9A;
  --status-selesai-latar: #E8F5E9;
  --status-selesai-teks: #2E7D32;
  --status-dialihkan-latar: #FFF8E1;
  --status-dialihkan-teks: #8A5A00;
  --status-ditolak-latar: #FCE8E6;
  --status-ditolak-teks: #9F2E22;
  --status-dibuka-kembali-latar: #E0F2F1;
  --status-dibuka-kembali-teks: #00695C;

  /* ---------- Kabar perkembangan OPD & jawaban pelapor ---------- */
  --kabar-kemajuan-latar: var(--warna-info-latar);
  --kabar-kemajuan-teks: var(--warna-info-teks);
  --kabar-kendala-latar: var(--warna-peringatan-latar);
  --kabar-kendala-teks: var(--warna-peringatan-teks);
  --konfirmasi-beres-latar: var(--status-selesai-latar);
  --konfirmasi-beres-teks: var(--status-selesai-teks);
  --konfirmasi-belum-latar: var(--status-ditolak-latar);
  --konfirmasi-belum-teks: var(--status-ditolak-teks);

  /* ---------- Status arahan program (monev) ---------- */
  --arahan-belum-latar: #EAF0F4;
  --arahan-belum-teks: #465665;
  --arahan-belum-isi: #B8C2C9;
  --arahan-direncanakan-latar: #E3F2FD;
  --arahan-direncanakan-teks: #1565C0;
  --arahan-direncanakan-isi: #1565C0;
  --arahan-berjalan-latar: #FFF3E0;
  --arahan-berjalan-teks: #A84300;
  --arahan-berjalan-isi: #E07B1A;
  --arahan-selesai-latar: #E8F5E9;
  --arahan-selesai-teks: #2E7D32;
  --arahan-selesai-isi: #2E7D32;
  --arahan-lewat-latar: #FCE8E6;
  --arahan-lewat-teks: #9F2E22;

  /* ---------- Formulir & tombol ---------- */
  --warna-input-latar: #FFFFFF;
  --warna-input-garis: #C3D0DB;
  --warna-input-fokus: #0049B2;       /* biru merek CERDAS */
  --warna-bahaya: #9F2E22;
  --warna-bahaya-hover: #7E2219;
  --warna-sukses-latar: #E3F3EA;
  --warna-sukses-teks: #1E7A4C;
  --warna-info-pesan-latar: #E3F0FA;
  --warna-info-pesan-teks: #1F5A8A;

  /* ---------- Warna kawasan (cluster) ---------- */
  --cluster-1: #e74c3c;
  --cluster-2: #f39c12;
  --cluster-3: #f1c40f;
  --cluster-4: #2ecc71;
  --cluster-5: #3498db;
  --cluster-6: #9b59b6;
  --cluster-7: #1abc9c;
  --cluster-8: #d35400;
  --cluster-lain: #B8C2C9;            /* kecamatan tanpa data / kawasan tak dikenal */
  --peta-garis-wilayah: #FFFFFF;
  --peta-garis-sorot: #2F4156;
  --peta-isi-opasitas: 0.76;
  --peta-isi-opasitas-sorot: 0.88;
  --peta-isi-opasitas-kosong: 0.30;
  --grafik-opasitas-batang: 0.6;
  --grafik-grid: rgba(0, 0, 0, 0.05);
  --grafik-garis-batang: 1.5px;
  --grafik-garis-putus: 5 4;        /* pola garis rata-rata kabupaten (px) */
  --grafik-lubang-donat: 58%;
  --grafik-opasitas-label: 0.9;
  --grafik-maks-huruf-label: 14;    /* label sumbu x dibungkus per ~14 huruf */
  --peta-padding: 10px;

  /* ---------- Warna kelompok indikator ---------- */
  --kelompok-1: #e74c3c;
  --kelompok-2: #f39c12;
  --kelompok-3: #2ecc71;
  --kelompok-4: #3498db;
  --kelompok-5: #16a085;
  --kelompok-lain: #B8C2C9;

  /* ---------- Tipografi ---------- */
  --font-dasar: "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ukuran-3xs: 0.58rem;
  --ukuran-2xs: 0.65rem;
  --ukuran-xs: 0.70rem;
  --ukuran-sm: 0.75rem;
  --ukuran-md: 0.82rem;
  --ukuran-base: 0.86rem;
  --ukuran-lg: 0.92rem;
  --ukuran-xl: 1.05rem;
  --ukuran-2xl: 1.4rem;
  --ukuran-input: 1rem;              /* minimal 16px agar iPhone tidak memperbesar layar saat mengetik */
  --ukuran-ikon-besar: 2.5rem;

  --tebal-normal: 400;
  --tebal-sedang: 600;
  --tebal-semi: 650;
  --tebal-tebal: 700;
  --tebal-ekstra: 750;

  --tinggi-baris-rapat: 1.3;
  --tinggi-baris-normal: 1.45;
  --tinggi-baris-longgar: 1.6;
  --spasi-huruf-label: 0.3px;

  /* ---------- Jarak ---------- */
  --jarak-1: 2px;
  --jarak-2: 4px;
  --jarak-3: 6px;
  --jarak-4: 8px;
  --jarak-5: 10px;
  --jarak-6: 12px;
  --jarak-7: 14px;
  --jarak-8: 16px;
  --jarak-9: 18px;
  --jarak-10: 20px;
  --jarak-11: 22px;
  --jarak-12: 32px;

  /* ---------- Radius ---------- */
  --radius-kecil: 4px;
  --radius-sedang: 7px;
  --radius-besar: 11px;
  --radius-navbar: 12px;
  --radius-kartu: 14px;
  --radius-banner: 18px;
  --radius-pil: 20px;
  --radius-bulat: 50%;

  /* ---------- Bayangan ---------- */
  --bayangan-navbar: 0 2px 10px rgba(47, 65, 86, 0.05);
  --bayangan-menu: 0 10px 28px rgba(47, 65, 86, 0.14);
  --bayangan-kartu: 0 2px 12px rgba(47, 65, 86, 0.06);
  --bayangan-angkat: 0 4px 12px rgba(47, 65, 86, 0.08);
  --bayangan-banner: 0 8px 24px rgba(47, 65, 86, 0.20);
  --fokus-cincin: 0 0 0 3px rgba(0, 73, 178, 0.30);

  /* ---------- Tata letak ---------- */
  --lebar-maks: 1600px;
  --tinggi-peta: 480px;
  --tinggi-peta-tablet: 420px;
  --tinggi-peta-ponsel: 350px;
  --tinggi-grafik: 230px;
  --tinggi-grafik-ponsel: 200px;
  --tinggi-maks-panel: 640px;
  --lebar-min-popup: 260px;
  --lebar-min-kartu-kelompok: 220px;
  --lebar-min-pilih: 125px;
  --lebar-min-kode: 36px;
  --lebar-pesan: 640px;
  --ukuran-swatch: 12px;
  --ukuran-swatch-besar: 17px;
  --garis-tipis: 1px;
  --garis-sedang: 2px;
  --garis-aksen: 3px;
  --garis-aksen-tebal: 4px;
  --garis-peta: 1.8px;
  --garis-peta-sorot: 3px;

  /* ---------- Tata letak formulir ---------- */
  --lebar-kolom-sempit: 720px;
  --lebar-kolom-sangat-sempit: 440px;
  --lebar-min-kolom-form: 200px;
  --lebar-min-kolom-ringkas: 180px;
  --lebar-min-tombol-jawab: 140px;
  --lebar-min-kotak-status: 140px;
  --tinggi-input: 42px;
  --tinggi-input-kecil: 32px;
  --ukuran-centang: 18px;
  --ukuran-titik-linimasa: 12px;
  --ukuran-kode-laporan: 1.6rem;
  --spasi-huruf-kode: 1.5px;

  /* ---------- Monev ---------- */
  --tinggi-bar-progres: 10px;
  --lebar-min-kartu-monev: 360px;
  --lebar-min-bar-tabel: 140px;
  --ukuran-angka-utama: 2.2rem;

  /* ---------- Ringkasan Kecamatan & cetak ---------- */
  --warna-nada-baik: #1E7A4C;
  --warna-nada-perhatian: #B23B2D;
  --lebar-min-kartu-kecamatan: 200px;
  --ukuran-judul-halaman: 1.5rem;
  --ukuran-cetak: 10pt;
  --lebar-baca: 60ch;
  --warna-cetak-garis: #BFC9D1;

  /* ---------- Rekam suara (form Lapor) ---------- */
  --warna-rekam: var(--warna-bahaya);
  --ukuran-titik-rekam: 10px;
  --tinggi-sentuh: 44px;             /* target sentuh minimal di HP */
  --opasitas-kedip: 0.25;

  /* ---------- QR Kanal Warga & kop cetak ---------- */
  --warna-qr-gelap: var(--warna-judul);   /* cukup gelap agar mudah dipindai */
  --warna-qr-terang: #FFFFFF;
  --lebar-qr-poster: 200px;
  --lebar-min-poster: 280px;
  --ukuran-judul-poster: 1.2rem;
  --lebar-qr-poster-cetak: 105mm;
  --lebar-qr-kecil-cetak: 30mm;
  --ukuran-judul-poster-cetak: 24pt;
  --ukuran-teks-poster-cetak: 13pt;
  --ukuran-kop-cetak: 14pt;
  --ukuran-kop-judul-cetak: 12pt;
  --ukuran-kop-meta-cetak: 8pt;

  /* ---------- Nilai baik / perlu perhatian (popup peta, profil kecamatan) ---------- */
  --warna-baik-latar: var(--warna-turun-latar);
  --warna-baik-teks: var(--warna-nada-baik);
  --warna-perhatian-latar: var(--warna-naik-latar);
  --warna-perhatian-teks: var(--warna-nada-perhatian);
  --warna-netral-latar: var(--warna-badge-latar);
  --warna-netral-teks: var(--warna-badge-teks);

  /* ---------- Warna merek CERDAS (diambil dari logo) ---------- */
  --warna-merek: #0049B2;             /* biru lengkung huruf C */
  --warna-merek-gelap: #062964;       /* biru tua tulisan CERDAS */
  --warna-merek-teks-redup: #DCE7F7;  /* AA di atas biru merek (≥ 5,9:1) */
  --warna-merek-latar: #E8F0FB;       /* latar tipis biru merek: hover, aktif */
  --hero-latar: linear-gradient(135deg, var(--warna-merek) 0%, var(--warna-merek-gelap) 100%);  /* cadangan bila gambar gagal dimuat */
  --hero-gambar: url("../img/hero-awan.webp");   /* latar biru dengan awan mega mendung (2000 × 667) */
  --hero-warna-dasar: #0A3FB0;                   /* warna rata-rata gambar, tampil selama gambar dimuat */
  --hero-gambar-posisi-y: 70%;                   /* 100% = rata bawah (versi awal); makin kecil, awan bawah makin turun */

  /* ---------- Tombol (palet CERDAS) ---------- */
  --warna-tombol: var(--warna-merek);
  --warna-tombol-hover: var(--warna-merek-gelap);
  --warna-tombol-garis: var(--warna-merek);
  --warna-tombol-garis-hover-latar: var(--warna-merek-latar);

  /* ---------- Hero Beranda & peta ---------- */
  --lebar-maks-hero-teks: 520px;
  --ukuran-hero-judul: clamp(1.9rem, 1.15rem + 2.6vw, 3rem);
  --tinggi-baris-hero-judul: 1.12;
  --ukuran-hero-desk: 1rem;
  --ukuran-hero-input: 1rem;   /* 16px: mencegah zoom otomatis di iPhone saat memilih */
  --tinggi-input-hero: 48px;
  --padding-hero-lebar: 72px 64px;
  --padding-hero-ponsel: 32px 22px 40px;
  --tinggi-min-hero: 420px;
  --ukuran-tombol-peta: 30px;
  --lebar-maks-legenda: 220px;
  --opasitas-legenda-redup: 0.55;

  /* ---------- Foto laporan ---------- */
  --tinggi-maks-pratinjau-foto: 220px;
  --tinggi-maks-foto-laporan: 420px;

  /* ---------- Header ---------- */
  --tinggi-logo-navbar: 52px;
  --tinggi-logo-navbar-ponsel: 38px;
  --tinggi-indikator-nav: 3px;
  --ukuran-nav: 0.9rem;
  --tinggi-tombol-nav: 40px;
  --lebar-menu-turun: 260px;
  --lebar-maks-nama-akun: 160px;
  --ukuran-ikon-menu: 18px;

  /* ---------- Gerak ---------- */
  --transisi: 0.2s ease;
  --durasi-kedip: 1.2s;
}

/* Ukuran kertas cetak. Ditulis di sini karena @page tidak bisa membaca variabel CSS. */
@page { size: A4; margin: 14mm; }