/* =====================================================================
   AkseleraSync — Design Tokens
   ---------------------------------------------------------------------
   Satu sumber untuk skala spacing, radius, tipografi, dan kepadatan.

   Dimuat PERTAMA di antara stylesheet portal (setelah <style> inline di
   index.html) supaya nilai di sini dapat dikonsumsi seluruh portal.

   Warna brand masih didefinisikan di <style> inline index.html dan
   sengaja TIDAK diduplikasi di sini — duplikasi warna dengan nama
   berbeda adalah salah satu penyebab utang CSS yang sedang dirapikan.

   ATURAN PAKAI
   - Jangan menulis nilai spacing/radius/font-size mentah di CSS portal.
     Pakai var() dari berkas ini.
   - Ukuran teks terkecil yang boleh dipakai adalah --fs-caption (12px).
     Kontrak audit visual melarang teks informasi di bawah 12px.
   - Kepadatan dibedakan per portal lewat blok [data-active-portal],
     bukan dengan menulis ulang komponen.
   ===================================================================== */

:root {
  /* --- Skala spacing (basis 4px) ------------------------------------ */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* --- Radius ------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Skala tipografi ---------------------------------------------
     Mengikuti empat ukuran inti yang dikunci dokumen produk
     (25 / 18 / 15 / 13) lalu dilengkapi agar seluruh kebutuhan
     tertutup tanpa perlu turun di bawah 12px.                        */
  --fs-display: calc(25px * var(--font-scale, 1));
  --fs-title:   calc(20px * var(--font-scale, 1));
  --fs-heading: calc(18px * var(--font-scale, 1));
  --fs-subhead: calc(16px * var(--font-scale, 1));
  --fs-body:    calc(15px * var(--font-scale, 1));
  --fs-small:   calc(13px * var(--font-scale, 1));
  --fs-caption: calc(12px * var(--font-scale, 1));

  /* Angka besar pada kartu KPI — boleh melampaui skala teks. */
  --fs-metric-lg: calc(30px * var(--font-scale, 1));
  --fs-metric-md: calc(24px * var(--font-scale, 1));

  /* --- Bobot huruf --------------------------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* --- Tinggi baris -------------------------------------------------- */
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.5;
  --lh-relaxed: 1.62;

  /* --- Jarak antar huruf --------------------------------------------- */
  --ls-label: .08em;   /* untuk label kapital */
  --ls-tight: -.01em;  /* untuk judul besar */

  /* --- Elevasi ------------------------------------------------------- */
  --elev-1: 0 4px 14px rgba(21, 36, 74, .07);
  --elev-2: 0 10px 28px rgba(21, 36, 74, .10);
  --elev-3: 0 18px 42px rgba(21, 36, 74, .14);

  /* --- Target sentuh -------------------------------------------------
     Kontrak audit: minimum 44x44.                                     */
  --touch-min: 44px;

  /* --- Tombol aksi bundar (lonceng pemberitahuan dan sejenisnya) ------
     Pemilik produk menetapkan bentuk Portal Staf sebagai standar, dan
     Portal Staf memakai pil penuh — nama class-nya pun `round-btn`.
     Sebelum token ini ada, keempat portal menuliskan radiusnya sendiri
     dan hasilnya tidak pernah seragam: wali 12px, guru 13px, staf 999px,
     pimpinan 999px. Menyamakan angkanya satu per satu tidak menolong,
     karena tiap portal masih menimpa nilainya di berkasnya sendiri.

     Karena itu nilainya tinggal DI SINI. Portal cukup menulis
       border-radius: var(--bell-radius);
       width: var(--bell-size); height: var(--bell-size);
     dan TIDAK menuliskan angka radius sendiri. Mengubah bentuk lonceng
     di keempat portal cukup dengan mengubah satu baris di bawah ini.

     Markup bakunya satu anak: <button class="round-btn ..."><ikon></button>.
     Rinciannya ada di blok STANDAR TOPBAR PORTAL, puncak portal-staff.css. */
  --bell-size: var(--touch-min);
  --bell-radius: var(--r-pill);

  /* --- Lebar bingkai aplikasi (.app di index.html, .bottom-nav) -------
     Dasar 480px meniru bingkai ponsel yang SENGAJA dipertahankan di
     desktop untuk Wali/Guru/Staf: produk harian, dipakai sekali-sekali
     atau sambil berjalan, tidak butuh lebar penuh.

     Portal Pimpinan menimpa nilai ini ke 1180px HANYA pada layar ≥900px
     (lihat [data-active-portal="pimpinan"] di bawah, dan bagian "23
     DESKTOP" di portal-leadership.css) karena dashboardnya memuat kartu
     KPI dan chart yang butuh ruang. Ini VARIAN YANG DISAHKAN, bukan bug —
     lihat catatan di kepala storage/qa/ui-anomalies.md. Bottom-nav
     Pimpinan juga pindah dari dock bawah ke bilah atas pada lebar yang
     sama, sehingga tinggi (64px vs 72px) dan sudut radius yang membulat
     (atas vs bawah) memang berbeda karena strukturnya berbeda, BUKAN
     karena lupa disamakan — jangan dipaksa seragam. */
  --portal-frame-width: 480px;

  /* --- Durasi gerak --------------------------------------------------- */
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(.22, .61, .36, 1);

  /* =================================================================
     RITME SECTION — keputusan pemilik produk 26 Agu 2026
     Section terasa "menempel" karena jarak ANTAR section nyaris sama
     dengan jarak DI DALAM section, sehingga mata tidak tahu isi milik
     judul yang mana. Prinsip proximity menuntut rasio minimal 3:1:
     antar section 40px berbanding blok judul ke isinya 12px = 3,3:1.
     Pimpinan satu-satunya yang menimpa ke 32px (lihat bloknya di
     bawah) karena kepadatan pindainya dipertahankan.
     ================================================================= */
  --sec-gap: var(--sp-8);        /* 40px — jarak antar section        */
  --sec-head-gap: var(--sp-3);   /* 12px — blok judul ke konten       */

  /* Warna teks kicker section, aman dibaca sebagai TEKS 12px di kanvas
     terang. Ini BUKAN duplikat warna brand di index.html — keempatnya
     turunan gelap yang lolos kontras teks, dan dipakai lintas portal
     sehingga tempatnya di sini. Khusus emas: --gold mentah #D7A52E
     DILARANG untuk teks kicker karena kontrasnya kurang; pakai
     --kick-gold. Warna tidak pernah jadi pembeda tunggal — teks kicker
     itu sendiri cadangan non-warnanya. */
  --kick-indigo: #243B72;
  --kick-emerald: #087A60;
  --kick-gold: #8A6A14;
  --kick-terra: #9C4529;

  /* =================================================================
     KEPADATAN — nilai baku (dipakai Guru & Staf)
     Portal mewarisi komponen yang sama; hanya angka di bawah ini yang
     berbeda, sehingga tiap portal pas dengan cara kerjanya tanpa
     memecah design system.
     ================================================================= */
  --d-page-pad: var(--sp-4);      /* padding tepi halaman            */

  /* Jarak antar section DIPETAKAN ke --sec-gap (lihat blok RITME
     SECTION di atas) supaya semua halaman lama ikut otomatis tanpa
     ganti selektor. Pemetaan ini bekerja karena data-active-portal
     terpasang di <html> — elemen yang sama dengan :root — sehingga
     var() di sini membaca --sec-gap hasil timpaan portal. Portal yang
     butuh nilai lain menimpa --sec-gap, BUKAN --d-section-gap. */
  --d-section-gap: var(--sec-gap);
  --d-card-pad: var(--sp-4);      /* padding dalam kartu             */
  --d-card-gap: var(--sp-3);      /* jarak antar kartu               */
  --d-row-pad: var(--sp-3);       /* padding baris daftar            */
  --d-card-radius: var(--r-lg);
  --d-body-size: var(--fs-body);
}

/* --- Portal Wali — paling lapang -----------------------------------
   Dipakai orang tua, sesekali, sering sambil berdiri. Sasaran: target
   sentuh besar, teks nyaman, sedikit keputusan per layar.            */
[data-active-portal="wali"] {
  --d-page-pad: var(--sp-5);
  /* Override --d-section-gap 32px yang lama DIHAPUS (26 Agu 2026):
     Wali kini mengikuti --sec-gap baku 40px seperti portal lain. */
  --d-card-pad: var(--sp-5);
  --d-card-gap: var(--sp-4);
  --d-row-pad: var(--sp-4);
  --d-card-radius: var(--r-xl);
  --d-body-size: var(--fs-body);
}

/* --- Portal Pimpinan — paling padat ---------------------------------
   Dipakai untuk memindai banyak angka sekaligus lalu memutuskan.
   Kepadatan naik, tetapi ukuran teks TIDAK turun di bawah 12px.      */
[data-active-portal="pimpinan"] {
  --d-page-pad: var(--sp-4);
  /* Satu-satunya portal yang menimpa --sec-gap: 32px, bukan 40px,
     karena kepadatan pindai dashboard dipertahankan (keputusan
     pemilik produk 26 Agu 2026). Tetap di atas rasio 3:1 terhadap
     --sec-head-gap 12px. */
  --sec-gap: var(--sp-7);
  --d-card-pad: var(--sp-3);
  --d-card-gap: var(--sp-2);
  --d-row-pad: var(--sp-2);
  --d-card-radius: var(--r-md);
  --d-body-size: var(--fs-small);
}

/* --- Portal Staf — menengah, condong padat -------------------------
   Dipakai sepanjang hari untuk mengerjakan antrean tugas.            */
[data-active-portal="staf"] {
  /* Override --d-section-gap 20px yang lama DIHAPUS (26 Agu 2026):
     Staf mengikuti --sec-gap baku 40px. Ritme grid halaman Staf
     menggenapkan sisanya — lihat RITME BLOK HALAMAN di
     portal-staff.css. */
  --d-card-pad: var(--sp-3);
  --d-card-gap: var(--sp-3);
  --d-card-radius: var(--r-md);
  --d-body-size: var(--fs-small);
}

/* --- Desktop: naikkan kelapangan pada layar lebar ------------------- */
@media (min-width: 900px) {
  :root {
    --d-page-pad: var(--sp-6);
    /* Paksaan --d-section-gap 32px yang lama DIHAPUS (26 Agu 2026):
       ia justru MENURUNKAN jarak dari baku baru 40px. Desktop kini
       tetap 40px; Pimpinan tetap 32px dari timpaan --sec-gap pada
       bloknya sendiri, yang berlaku di semua lebar layar. */
  }
  [data-active-portal="pimpinan"] {
    --d-card-pad: var(--sp-4);
    --d-card-gap: var(--sp-3);
    /* Varian bingkai lebar yang disahkan untuk dashboard Pimpinan —
       lihat catatan panjang pada --portal-frame-width di atas. */
    --portal-frame-width: 1180px;
    /* Lebar sidebar navigasi vertikal Pimpinan pada layar ini (bagian
       "23 DESKTOP" di portal-leadership.css). Dock bawah/bilah atas
       lama berubah jadi sidebar kiri tinggi penuh; token ini dipakai
       baik untuk lebar sidebar itu sendiri maupun padding-left konten
       di sebelahnya, supaya keduanya tidak pernah berbeda. */
    --leadership-sidebar-width: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

/* --- Kunci gulir latar saat sheet/modal terbuka ---------------------
   .app tidak scroll sendiri (min-height: 100dvh, bukan wadah overflow),
   jadi halaman sesungguhnya scroll di <body>. Sheet/modal cuma overlay
   fixed di atasnya — tanpa aturan ini latar tetap ikut tergulir di
   belakang lembar yang terbuka. Class dipasang di <html> oleh setiap
   sistem sheet/modal (empat portal + modul ZIS + modul Ujian) lewat
   penghitung bersama, sehingga dua overlay yang kebetulan tumpang
   tindih tidak saling membuka kunci milik yang lain. */
html.sheet-open,
html.sheet-open body {
  overflow: hidden;
}