/* Token desain bersama bergaya dasbor Lingora untuk halaman depan, lembaga, masuk, pengaturan, Absensi, dan Keuangan.
   Alasan tiap nilai dan rasio kontras ada di DESIGN.md (root proyek). */
:root {
  --hijau-900: #0f1f38;
  --hijau-800: #094bb0;
  --hijau-700: #0b5ed7;
  --hijau-600: #0b5ed7;
  --hijau-300: #93c5fd;
  --hijau-200: #cfe2fc;
  --hijau-100: #dfeeff;
  --hijau-50:  #eaf3ff;
  --aksen:     #38bdf8;
  --fokus:     #0b5ed7;
  --emas-500:  #f59e0b;
  --emas-100:  #fef3c7;
  --emas-800:  #78350f;
  --merah-700: #b91c1c;
  --merah-100: #fee2e2;
  --kertas:    #f0f5fb;
  --kertas-2:  #e3ecf7;
  --permukaan: #ffffff;
  --tinta:     #0f1f38;
  --tinta-2:   #3b4d63;
  --garis:     #dce6f2;
  --garis-kuat:#6e839b;

  /* 5 warna pastel khas ubin Lingora (semua lolos kontras WCAG AAA >13.5:1 dengan --tinta) */
  --ungu-latar:   #f3e8ff; --ungu-ikon:   #8b5cf6; --ungu-garis:   #d8b4fe;
  --koral-latar:  #ffe4e6; --koral-ikon:  #f43f5e; --koral-garis:  #fda4af;
  --zamrud-latar: #dcfce7; --zamrud-ikon: #16a34a; --zamrud-garis: #86efac;
  --langit-latar: #dbeafe; --langit-ikon: #2563eb; --langit-garis: #93c5fd;
  --oranye-latar: #ffedd5; --oranye-ikon: #ea580c; --oranye-garis: #fdba74;

  --st-hadir: var(--zamrud-latar);
  --st-terlambat: var(--oranye-latar);
  --st-sakit: var(--ungu-latar);
  --st-izin: var(--langit-latar);
  --st-alpha: var(--koral-latar);

  --font-judul: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-isi: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-kartu: 22px;
  --r-kontrol: 12px;
  --bayang-kartu: 0 6px 20px rgba(15, 31, 56, .05);
  --bayang-angkat: 0 18px 40px rgba(15, 31, 56, .14);
}

.garis-kop { width: 48px; height: 4px; border: 0; margin: 0; border-radius: 4px; background: var(--hijau-700); }

a[href], button:not(:disabled), summary, select:not(:disabled), label[for], [role="button"], [role="tab"], [role="switch"],
input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled), input[type="file"]:not(:disabled) { cursor: pointer; }
button:disabled, select:disabled, input:disabled, textarea:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Lingkaran panah hanya untuk tombol perpindahan halaman/modul (R-08) */
.panah-bulat { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hijau-100); color: var(--hijau-700); flex: none; }
.panah-bulat svg { width: 14px; height: 14px; }
.tombol.gelap .panah-bulat { background: rgba(255, 255, 255, .24); color: #fff; }

/* Sakelar modul Absensi | Keuangan untuk akun yang memiliki kedua akses */
.tukar-modul { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--kertas); border: 1px solid var(--garis); }
.tukar-modul > * { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 10px;
  font: 700 14px/1.2 var(--font-isi); color: var(--tinta-2); text-decoration: none; white-space: nowrap; }
.tukar-modul > a:hover { background: var(--hijau-50); color: var(--hijau-700); }
.tukar-modul > [aria-current] { background: var(--hijau-700); color: #fff; }
.tukar-modul > a .panah-bulat { width: 20px; height: 20px; }
.tukar-modul > a .panah-bulat svg { width: 12px; height: 12px; }
.tukar-modul.gelap { background: var(--kertas); border-color: var(--garis); margin: 0 4px 14px; }
.tukar-modul.gelap > * { color: var(--tinta-2); }
.tukar-modul.gelap > a:hover { background: var(--hijau-50); color: var(--hijau-700); }
.tukar-modul.gelap > [aria-current] { background: var(--hijau-700); color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}