/*
  YSMB design system v2: TOKEN
  Sumber: _output/07b-design-system-v2.md (rasio kontras dihitung skrip 07b-hitung-kontras.py).
  Hijau logo #1E5631 dominan. Limau #86B84A dan biru #2878B8 hanya aksen.
  Nama token berbasis PERAN, bukan rupa. Jangan menulis hex di luar berkas ini.

  ATURAN PASANGAN WARNA (yang dilarang ada di bagian bawah berkas ini).
*/

:root {
  color-scheme: light;

  /* ---------- Permukaan ---------- */
  --warna-latar:           #FAF9F5;  /* krem, latar utama */
  --warna-latar-kartu:     #FFFFFF;  /* kartu, panel dropdown, tab */
  --warna-latar-tenang:    #F0EFE9;  /* selang-seling, bilah running text */
  --warna-latar-tint:      #EFF3EA;  /* tint hijau: hover item, bagian ringan */
  --warna-latar-muda:      #E9F1E1;  /* kotak status sukses ("Tersalin") */
  --warna-latar-pekat:     #1E5631;  /* header, footer atas, blok pekat, tombol utama */
  --warna-latar-pekat-2:   #14401F;  /* bilah slogan/atas, footer bawah, hover, judul slider */
  --warna-latar-pekat-3:   #0E2F17;  /* ditekan (active), lapis paling gelap */
  --warna-latar-lightbox:  #0C110D;

  /* ---------- Teks di permukaan terang ---------- */
  --warna-teks:            #1A1A1A;  /* seluruh teks isi (AAA di semua latar terang) */
  --warna-teks-lembut:     #4A4A48;  /* metadata, keterangan (AAA) */
  --warna-teks-merek:      #1E5631;  /* judul/tautan hijau (AAA di krem, putih, tenang, tint) */
  --warna-teks-merek-aktif:#14401F;  /* tautan hover */
  --warna-teks-biru:       #174F7D;  /* tautan luar biru, turunan gelap dari biru logo (AAA di krem dan putih) */

  /* ---------- Teks di permukaan pekat ---------- */
  --warna-teks-di-pekat:        #FAF9F5;  /* krem; di hijau, hijau pekat, hijau dalam: AAA */
  --warna-teks-di-pekat-putih:  #FFFFFF;  /* menu, tombol: AAA */
  --warna-teks-di-pekat-lembut: #E6EFDD;  /* teks pendukung di footer/bilah: AAA */
  --warna-teks-di-limau:        #1A1A1A;  /* WAJIB hitam di atas limau (7,43:1) */

  /* ---------- Merek (hijau logo) ---------- */
  --warna-merek:           #1E5631;  /* tombol utama */
  --warna-merek-hover:     #14401F;  /* hover */
  --warna-merek-active:    #0E2F17;  /* ditekan */

  /* ---------- Aksen limau: latar tombol aksen, penanda non-teks. Teks di atasnya HITAM ---------- */
  --warna-limau:           #86B84A;
  --warna-limau-hover:     #9CC862;
  --warna-limau-active:    #82B447;  /* sengaja nyaris sama: pembeda ditekan = bingkai hitam, bukan warna */

  /* ---------- Aksen biru: ikon, garis, kartu penanda. Bukan teks di krem ---------- */
  --warna-biru:            #2878B8;
  --warna-biru-gelap:      #174F7D;

  /* ---------- Garis ---------- */
  --warna-garis:           #85827A;  /* bingkai kontrol dan kartu: >= 3,3:1 di semua latar terang */
  --warna-garis-halus:     #C9C6BA;  /* pemisah dekoratif SAJA (1,6:1, jangan jadi tepi kontrol) */
  --warna-garis-pekat:     #5F8F6C;  /* pemisah halus di permukaan hijau (dekoratif) */

  /* ---------- Fokus (dua lapis: cincin + halo) ---------- */
  --fokus-cincin-terang:   #1A1A1A;  /* pasangan untuk permukaan terang */
  --fokus-halo-terang:     #FFFFFF;
  --fokus-cincin-pekat:    #FFFFFF;  /* pasangan untuk permukaan pekat (hijau): dipakai lewat var() */
  --fokus-halo-pekat:      #0E2F17;
  --fokus-cincin:          var(--fokus-cincin-terang);
  --fokus-halo:            var(--fokus-halo-terang);
  --fokus-lebar:           3px;
  --fokus-jarak:           2px;
  --fokus-halo-lebar:      5px;

  /* ---------- Status ---------- */
  --warna-bahaya:          #8F1919;  /* teks galat: AAA di putih dan di latar bahaya */
  --warna-bahaya-latar:    #FBE9E7;
  --warna-sukses-teks:     #1E5631;  /* di --warna-latar-muda: AAA */
  --warna-belum-ada-latar: #FFF1A8;  /* penanda BELUM-ADA */
  --warna-belum-ada-teks:  #1A1A1A;
  --warna-belum-ada-garis: #6B4400;
  --warna-lencana-contoh:  #1A1A1A;  /* lencana "Foto contoh", teks putih */

  /* ---------- Huruf ---------- */
  --huruf-judul: "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --huruf-isi:   "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tebal-normal: 400;
  --tebal-sedang: 500;
  --tebal-tegas:  600;
  --tebal-judul:  700;

  /* Skala 1,25 dari dasar 18px (html 112,5%). Teks isi tidak pernah di bawah --teks-m. */
  --teks-xs:  0.833rem;  /* 15px: keterangan foto saja */
  --teks-s:   0.889rem;  /* 16px: label tombol WA, footer, bilah. Batas bawah situs */
  --teks-m:   1rem;      /* 18px: DASAR, seluruh teks isi dan menu */
  --teks-l:   1.222rem;  /* 22px */
  --teks-xl:  1.556rem;  /* 28px */
  --teks-2xl: 1.944rem;  /* 35px */
  --teks-3xl: 2.444rem;  /* 44px */
  --tinggi-baris-isi:   1.65;
  --tinggi-baris-judul: 1.25;
  --lebar-baris-maks:   62ch;

  /* ---------- Jarak ---------- */
  --jarak-1: 0.25rem;
  --jarak-2: 0.5rem;
  --jarak-3: 0.75rem;
  --jarak-4: 1rem;
  --jarak-5: 1.5rem;
  --jarak-6: 2rem;
  --jarak-8: 3rem;
  --jarak-10: 4rem;
  --jarak-12: 6rem;
  --gutter: 16px;  /* tepi kiri kanan di ponsel */

  /* ---------- Bentuk ---------- */
  --radius-kecil:  4px;
  --radius-sedang: 8px;
  --radius-besar:  12px;
  --radius-pil:    999px;  /* HANYA tombol WA melayang */
  --garis-tebal:   2px;
  --bayang-kartu:  0 1px 2px rgba(20, 64, 31, .12), 0 4px 12px rgba(20, 64, 31, .08);
  --bayang-panel:  0 8px 24px rgba(14, 47, 23, .22);
  --bayang-wa:     0 4px 16px rgba(14, 47, 23, .38);
  --bayang-bilah-bawah: 0 -4px 16px rgba(14, 47, 23, .3);  /* bilah WA ponsel dan penanda melayang */
  --warna-tirai:   rgba(12, 17, 13, .85);  /* latar belakang dialog (::backdrop) */

  /* ---------- Ukuran tetap (piksel, sengaja) ---------- */
  --sentuh-min:       48px;  /* tinggi minimum SEMUA target sentuh */
  --sentuh-besar:     56px;  /* tombol utama, kontrol slider, tab, baris menu ponsel */
  --tinggi-bilah-slogan-ponsel: 40px;  /* G2 */
  --tinggi-header-ponsel:       64px;  /* G2 */
  --tinggi-header-desktop:      80px;
  --tinggi-bilah-atas:          48px;  /* desktop: slogan + nomor admin */
  --tinggi-running-ponsel:      48px;  /* G2 menetapkan 44; naik ke 48 supaya tombol Jeda 48 px utuh (T-08) */
  --tinggi-bilah-wa-ponsel:     64px;  /* bilah WA melayang di ponsel: label 16 px + nomor 18 px (T-03: dasar scroll-padding-bottom) */
  --tinggi-running-desktop:     48px;
  --lebar-isi-maks:   63.333rem;  /* 1140 px pada huruf 18 px; dalam rem supaya lebar isi ikut membesar bersama huruf (T-02), menu mendatar tetap muat */
  --lebar-baca-maks:  37.778rem;  /* 680 px pada huruf 18 px; jumlah huruf per baris tetap */
  --titik-desktop:    55.5em;  /* hanya catatan: titik pindah menu mendatar, ditulis langsung di @container halaman (variabel CSS tidak bisa dipakai di query). 55,5 x 18 px = 999 px */

  /* ---------- Gerak ---------- */
  --transisi:          160ms ease-out;
  --transisi-fade:     400ms ease-in-out;  /* slider */
  --jeda-tutup-dropdown: 300ms;            /* jari goyang */
  --kecepatan-berjalan: 40;                /* px per detik, running text. durasi = lebar / kecepatan (diatur JS lewat --durasi-berjalan) */
  --durasi-berjalan-bawaan: 60s;

  /* ---------- Lapisan ---------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-panel-menu: 120;
  --z-wa: 90;
  --z-lightbox: 200;
}

/* Permukaan pekat membalik pasangan fokus: cincin putih, halo gelap */
.permukaan-pekat,
.header, .bilah-atas, .bilah-slogan, .footer, .panel-menu, .lightbox, .blok-pekat, .slider__judul-bidang, .judul-halaman {
  --fokus-cincin: var(--fokus-cincin-pekat);
  --fokus-halo:   var(--fokus-halo-pekat);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transisi: 0ms;
    --transisi-fade: 0ms;
    --jeda-tutup-dropdown: 0ms;
  }
}

/*
  PASANGAN YANG DILARANG (angka dari 07b-hitung-kontras.py)
  - teks limau #86B84A di atas hijau #1E5631 (3,69:1), krem (2,22:1), putih (2,34:1)
  - teks biru #2878B8 di atas krem #FAF9F5 (4,46:1, gagal AA). Pakai --warna-teks-biru bila perlu teks biru
  - teks putih di atas limau (2,34:1). Di atas limau selalu hitam
  - biru di atas hijau (1,84:1) dan di atas hijau pekat (2,51:1)
  - --warna-garis-halus sebagai tepi tombol/kartu/input (1,62:1)
  - warna hijau WhatsApp #25D366 selain pada bulatan tombol WA melayang (klien mengizinkan, lihat --warna-wa)
  - teks isi di bawah 18px, teks apa pun di bawah 16px
*/

/* ---------- Tambahan redesain v3 (meniru gaya al-hamidiyah.sch.id dengan warna YSMB) ---------- */
:root {
  --warna-kuning:        #F5B829;  /* aksen hangat: bentuk dekoratif, tombol di atas hijau/biru (teks hitam) */
  --warna-kuning-muda:   #FFE08A;
  --warna-kuning-teks:   #FFD35C;  /* teks aktif/hover di atas hijau tua (AAA) */
  --warna-oranye:        #E8742A;  /* aksen hangat kedua, hanya bentuk dekoratif */
  --warna-limau-muda:    #DCEBC0;  /* latar bagian limau muda */
  --warna-limau-pucat:   #F1F7E6;
  --warna-biru-pekat:    #1B5E96;  /* latar slide biru: teks putih 6,4:1 */
  --warna-biru-pucat:    #E6F1FA;
  --warna-teks-biru-gelap: #0F3B5F;
  --warna-teks-kuning-gelap: #3D2C00;
  --warna-wa:            #25D366;  /* hijau asli WhatsApp, HANYA bulatan tombol melayang (permintaan klien, menggantikan larangan lama) */
  --warna-wa-cincin:     #128C7E;  /* cincin gelap tipis supaya tepi bulatan terlihat di latar terang */
  --radius-xl: 24px;
  --bayang-kotak: 0 2px 4px rgba(20, 64, 31, .10), 0 12px 28px rgba(20, 64, 31, .16);
  --tinggi-bilah-slogan: 36px;
  --lebar-header-maks: 80rem;
}