/* frontend/assets/css/tokens.css
   Design token Buku Saku Digital.

   Satu sumber kebenaran untuk warna, jarak, radius, bayangan, gerak, dan
   tipografi. Tidak ada nilai warna mentah di berkas CSS lain — semuanya lewat
   variabel di sini, supaya mode gelap cukup mengganti nilai, bukan menulis
   ulang aturan.

   Nuansa: institusional (navy tua sebagai warna sekolah) dengan aksen emas
   PGRI dan hijau ketercapaian. Bukan abu-abu template.

   TEMA
   Hanya ada DUA blok nilai: terang (:root) dan gelap ([data-tema="gelap"]).
   Atribut data-tema SELALU dipasang ke tema yang berlaku — termasuk saat
   pengguna memilih "ikuti sistem" — oleh skrip kecil di <head> index.html
   sebelum halaman digambar, lalu dijaga core/tema.js. Dengan begitu tidak ada
   lagi tiga salinan token gelap (media query, pilihan terang, pilihan gelap)
   yang harus dijaga tetap sama, dan komponen tidak perlu tahu dari mana
   temanya berasal. */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------- palet dasar */
  --navy-950: #08121d;
  --navy-900: #0d1b2a;
  --navy-800: #12263f;
  --navy-700: #1e3a5f;
  --navy-600: #26507f;
  --navy-500: #3b6ca8;
  --navy-400: #5b8bc6;
  --navy-300: #8fb0d4;
  --navy-100: #dde8f5;
  --navy-050: #eef4fb;

  --emas-700: #8a6d10;
  --emas-500: #c9a227;
  --emas-400: #dcb84a;
  --emas-200: #f2e3ae;
  --emas-050: #fbf5e2;

  --hijau-700: #146145;
  --hijau-500: #1e7d5a;
  --hijau-200: #a8dcc6;
  --hijau-050: #e7f6ef;

  --amber-700: #92400e;
  --amber-500: #b45309;
  --amber-200: #fadfa8;
  --amber-050: #fdf5e6;

  --merah-700: #8f1d15;
  --merah-500: #b42318;
  --merah-200: #f5c4bf;
  --merah-050: #fdeceb;

  --abu-900: #16202b;
  --abu-800: #22303f;
  --abu-700: #3a4a5c;
  --abu-600: #526479;
  --abu-500: #6b7e93;
  --abu-400: #9aabbd;
  --abu-300: #cbd5e0;
  --abu-200: #e2e8f0;
  --abu-100: #eef2f7;
  --abu-050: #f5f7fa;
  --putih: #ffffff;

  /* ------------------------------------------------------- peran semantik */
  --warna-latar: #f3f5f9;
  --warna-permukaan: var(--putih);
  --warna-permukaan-2: var(--abu-050);
  --warna-permukaan-tinggi: var(--putih);
  --warna-garis: var(--abu-200);
  --warna-garis-kuat: var(--abu-300);

  --warna-teks: var(--abu-900);
  --warna-teks-lembut: var(--abu-600);
  --warna-teks-samar: var(--abu-500);
  --warna-teks-terbalik: var(--putih);

  --warna-primer: var(--navy-700);
  --warna-primer-kuat: var(--navy-800);
  --warna-primer-lembut: var(--navy-050);
  --warna-primer-garis: var(--navy-100);
  --warna-teks-primer: var(--navy-700);

  --warna-aksen: var(--emas-500);
  --warna-aksen-lembut: var(--emas-050);
  --warna-teks-aksen: var(--emas-700);

  --warna-sukses: var(--hijau-500);
  --warna-sukses-lembut: var(--hijau-050);
  --warna-teks-sukses: var(--hijau-700);

  --warna-peringatan: var(--amber-500);
  --warna-peringatan-lembut: var(--amber-050);
  --warna-teks-peringatan: var(--amber-700);

  --warna-bahaya: var(--merah-500);
  --warna-bahaya-lembut: var(--merah-050);
  --warna-teks-bahaya: var(--merah-700);

  --warna-fokus: #2563eb;
  --warna-tirai: rgba(13, 27, 42, .5);
  /* Lapisan sorot untuk hover pada permukaan apa pun, terang maupun gelap. */
  --warna-sorot: rgba(13, 27, 42, .05);
  --warna-kilau: rgba(255, 255, 255, .55);

  /* App bar: permukaan tembus pandang di atas konten yang digulir. */
  --warna-appbar: rgba(255, 255, 255, .82);

  /* Panel merek (sidebar, layar masuk): navy di KEDUA tema. Identitas
     sekolah tidak ikut berganti warna saat mode gelap dipilih. */
  --merek-latar: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-800) 55%, #17304f 100%);
  --merek-teks: #e8eef5;
  --merek-teks-lembut: rgba(232, 238, 245, .66);
  --merek-garis: rgba(255, 255, 255, .08);
  --merek-sorot: rgba(255, 255, 255, .06);
  --merek-aktif: rgba(201, 162, 39, .14);

  /* ------------------------------------------------- jarak (skala 4 piksel) */
  --jarak-0: 0;
  --jarak-1: 4px;
  --jarak-2: 8px;
  --jarak-3: 12px;
  --jarak-4: 16px;
  --jarak-5: 20px;
  --jarak-6: 24px;
  --jarak-8: 32px;
  --jarak-10: 40px;
  --jarak-12: 48px;
  --jarak-16: 64px;

  /* ------------------------------------------------------------- bentuk */
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 14px;
  --radius-4: 20px;
  --radius-penuh: 999px;

  --bayang-1: 0 1px 2px rgba(16, 32, 52, .05), 0 1px 3px rgba(16, 32, 52, .06);
  --bayang-2: 0 2px 4px rgba(16, 32, 52, .05), 0 8px 20px rgba(16, 32, 52, .08);
  --bayang-3: 0 12px 32px rgba(16, 32, 52, .16), 0 2px 8px rgba(16, 32, 52, .08);
  --bayang-atas: 0 -1px 0 var(--warna-garis), 0 -8px 24px rgba(16, 32, 52, .06);
  --bayang-primer: 0 1px 2px rgba(30, 58, 95, .2), 0 4px 12px rgba(30, 58, 95, .18);

  /* --------------------------------------------------------- tipografi */
  --font-utama: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-angka: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --teks-xs: 12px;
  --teks-sm: 13px;
  --teks-md: 15px;
  --teks-lg: 17px;
  --teks-xl: 20px;
  --teks-2xl: 24px;
  --teks-3xl: 30px;

  /* 16px pada input mencegah iOS memperbesar halaman saat papan ketik muncul. */
  --teks-input: 16px;

  --tebal-normal: 400;
  --tebal-sedang: 500;
  --tebal-tebal: 600;
  --tebal-berat: 700;

  --tinggi-baris-rapat: 1.25;
  --tinggi-baris: 1.5;
  --tinggi-baris-longgar: 1.7;

  /* ------------------------------------------------------------- lain-lain */
  --target-sentuh: 44px;
  --tinggi-appbar: 60px;
  --tinggi-bottomnav: 64px;
  --lebar-sidebar: 264px;
  --lebar-konten-maks: 1200px;

  --kurva: cubic-bezier(.2, .8, .3, 1);
  --transisi-cepat: 120ms var(--kurva);
  --transisi: 200ms var(--kurva);
  --transisi-lambat: 320ms var(--kurva);

  --z-konten: 1;
  --z-appbar: 30;
  --z-bottomnav: 30;
  --z-banner: 40;
  --z-sheet: 50;
  --z-modal: 60;
  --z-toast: 70;

  /* Area aman perangkat berponi (iPhone). */
  --aman-atas: env(safe-area-inset-top, 0px);
  --aman-bawah: env(safe-area-inset-bottom, 0px);
  --aman-kiri: env(safe-area-inset-left, 0px);
  --aman-kanan: env(safe-area-inset-right, 0px);

/* --------------------------------------------------- lambang untuk CSS --- */
/* Beberapa lambang hanya bisa dipasang lewat CSS (mis. ::after pada label
   bidang terkunci), sehingga tidak dapat memakai core/ikon.js. Yang itu
   disimpan di sini sebagai data-URI dan dipakai sebagai mask, bukan gambar,
   supaya warnanya tetap mengikuti currentColor di mode terang maupun gelap.
   Sumber: Lucide (ISC) — lihat assets/icons/LICENSE-lucide.txt. */
  --gembok-kecil: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%20%2F%3E%20%3C%2Fsvg%3E");
}

/* ============================================================ mode gelap */

:root[data-tema="gelap"] {
  color-scheme: dark;

  --warna-latar: #0a141f;
  --warna-permukaan: #101d2b;
  --warna-permukaan-2: #152536;
  --warna-permukaan-tinggi: #17293c;
  --warna-garis: #213447;
  --warna-garis-kuat: #2f465f;

  --warna-teks: #e8eef5;
  --warna-teks-lembut: #a9bbcd;
  --warna-teks-samar: #8095ab;
  /* Teks di atas warna primer tetap putih: navy-500 dengan teks gelap hanya
     berkontras 3,6:1, di bawah batas 4,5:1 untuk label tombol. */
  --warna-teks-terbalik: var(--putih);

  --warna-primer: var(--navy-500);
  --warna-primer-kuat: var(--navy-400);
  --warna-primer-lembut: #15283c;
  --warna-primer-garis: #27456a;
  --warna-teks-primer: #9cbde3;

  --warna-aksen: var(--emas-500);
  --warna-aksen-lembut: #2a2311;
  --warna-teks-aksen: var(--emas-200);

  --warna-sukses: #2f9c74;
  --warna-sukses-lembut: #10281f;
  --warna-teks-sukses: var(--hijau-200);

  --warna-peringatan: #d97706;
  --warna-peringatan-lembut: #2b2010;
  --warna-teks-peringatan: var(--amber-200);

  --warna-bahaya: #d64236;
  --warna-bahaya-lembut: #2c1412;
  --warna-teks-bahaya: var(--merah-200);

  --warna-fokus: #7aa7ff;
  --warna-tirai: rgba(0, 0, 0, .64);
  --warna-sorot: rgba(255, 255, 255, .05);
  --warna-kilau: rgba(255, 255, 255, .06);

  --warna-appbar: rgba(16, 29, 43, .84);

  --merek-latar: linear-gradient(165deg, var(--navy-950) 0%, #0c1928 60%, #102238 100%);

  --bayang-1: 0 1px 2px rgba(0, 0, 0, .35);
  --bayang-2: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .3);
  --bayang-3: 0 14px 36px rgba(0, 0, 0, .55);
  --bayang-atas: 0 -1px 0 var(--warna-garis), 0 -8px 24px rgba(0, 0, 0, .35);
  --bayang-primer: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(59, 108, 168, .28);
}