/* ============================================================================
   Nusantika AI: satu-satunya sumber token desain (ACUAN-PROYEK.md bagian 2.1
   sampai 2.3). Semua halaman memuat file ini, lalu komponen.css di atasnya.
   Jangan tambah warna, ukuran huruf, atau bentuk baru di luar sini: kalau
   sesuatu belum ada tokennya, tambahkan token, jangan tulis nilai mentah.

   Revisi 25 September 2026 atas permintaan owner: aksen lime diganti hijau
   duit (#127A42), huruf aplikasi Outfit. Kanvas putih dan tinta hitam tetap.
   Nama token lama dipertahankan, hanya nilainya yang berganti.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Manrope:wght@500;600;700;800&family=Chivo+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* aksen: hijau duit. --n-aksen untuk bidang isi (tombol primer, sorotan
     kata, pita CTA, indikator menu aktif, batang grafik), selalu dengan teks
     --n-di-aksen (putih, 5,4:1). Teks beraksen di atas kartu lewat
     --n-aksen-teks supaya mode gelap bisa memakai hijau yang lebih terang. */
  --n-aksen:      #127A42;
  --n-aksen-teks: #127A42;
  --n-hijau:  #127A42;   /* sinonim --n-aksen untuk latar */
  --n-daun:   #0F6A38;   /* hover/tekan tombol primer, seri kedua grafik */

  /* tinta dan kanvas */
  --n-hutan:  #101310;   /* judul, sama dengan tinta */
  --n-tinta:  #101310;
  --n-abu:    #676767;
  --n-embun:  #E7F6EC;   /* latar badge, baris terpilih */
  --n-pasir:  #FFFFFF;   /* latar halaman */
  --n-rail:   #F5F6F7;   /* rail kiri, seksi selang-seling */
  --n-kertas: #FFFFFF;   /* kartu: dibedakan dari halaman oleh garis */
  --n-garis:  #D0D5DB;
  --n-garis-lembut: #E5E7EB;

  /* status: hanya untuk keadaan, bukan hiasan. Lime itu merek, status itu
     keadaan, jangan dicampur. Warna status dipakai untuk bidang (titik,
     batang); teksnya lewat token -teks yang lulus 4,5:1 di atas latarnya. */
  --n-baik:    #1B7F4C;
  --n-waspada: #C08A1E;
  --n-serius:  #D2542B;
  --n-kritis:  #C4302B;
  --n-baik-teks:    var(--n-baik);
  --n-waspada-teks: #8A5F0E;
  --n-serius-teks:  #A8431F;
  --n-baik-bg:    #EEF8F2;
  --n-waspada-bg: #FDF5E6;
  --n-serius-bg:  #FDF0EA;
  --n-kritis-bg:  #FDEEEC;
  --n-info:    #3949AB;
  --n-info-bg: #EEF2FF;
  --n-kritis-garis: #F3C2C2;

  /* --n-kontras: permukaan gelap tetap (tombol gelap, toast, tooltip) yang
     TIDAK ikut berubah di mode gelap, karena selalu dipasangkan teks putih.
     --n-kritis-teks: warna kritis untuk teks di atas kartu (badge, pesan
     galat), terpisah dari --n-kritis yang dipakai sebagai latar tombol
     bahaya berteks putih. */
  --n-kontras: #101310;
  --n-kontras-naik: #242824;    /* hover tombol gelap */
  --n-putih: #FFFFFF;           /* teks di atas --n-kontras dan --n-kritis */
  --n-di-aksen: #FFFFFF;        /* teks di atas hijau duit, juga di mode gelap */
  --n-abu-kontras: #A3A8A2;     /* teks sekunder di atas --n-kontras */
  --n-teks-kontras: #D5D8D4;    /* teks badan di atas --n-kontras */
  --n-aksen-di-kontras: #4ADE80; /* teks hijau, HANYA di atas --n-kontras */
  --n-garis-kontras: rgba(255, 255, 255, .14);
  --n-kritis-teks: var(--n-kritis);
  --n-tirai: rgba(16, 19, 16, .55);   /* latar dialog dan sheet */
  --n-tirai-tur: rgba(16, 19, 16, .6);

  /* huruf */
  --n-tampilan: 'Outfit', system-ui, sans-serif;
  --n-badan:    'Outfit', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --n-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* skala huruf: 12, 13, 15, 17, 20, 24, 32, 44, 60 */
  --n-t-12: 12px;
  --n-t-13: 13px;
  --n-t-15: 15px;
  --n-t-17: 17px;
  --n-t-20: 20px;
  --n-t-24: 24px;
  --n-t-32: 32px;
  --n-t-44: 44px;
  --n-t-60: 60px;
  --n-judul-besar: clamp(34px, 3.3vw, 56px);

  /* ukuran huruf badan bawaan per konteks */
  --n-badan-konsol: var(--n-t-15);
  --n-badan-landing: 16px;

  /* bentuk: kotak dengan lengkung kecil, gaya vantis.sh */
  --n-r-xs: 4px;
  --n-r-sm: 6px;
  --n-r-md: 8px;
  --n-r-lg: 12px;
  --n-r-pil: 999px;   /* hanya avatar dan titik status */
  --n-r-xl: 32px;     /* kartu utama di beranda superadmin, admin, dan karyawan */

  /* kedalaman: hampir tidak terlihat, kartu dipisah garis */
  --n-bayang-kecil: 0 3px 14px rgba(0, 0, 0, .07);
  --n-bayang:       0 16px 40px rgba(0, 0, 0, .10);
  --n-bayang-besar: 0 18px 48px rgba(0, 0, 0, .15);
  --n-sorot-dalam:  inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.18);
  --n-bayang-kartu: 0 4px 20px rgba(0, 0, 0, .05);   /* kartu beranda gaya fintech */

  /* tekstur: garis diagonal halus untuk latar dekoratif */
  --n-arsir:       linear-gradient(105deg, rgba(10,10,10,.045) 0 1px, transparent 1px 5px);
  --n-arsir-gelap: linear-gradient(105deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px);

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

  --n-lebar-rail: 248px;
  --n-pegas: cubic-bezier(.16, 1, .3, 1);
  --n-durasi: 180ms;
}

/* mode gelap: dua jalur aktivasi.
   1) Otomatis lewat preferensi sistem operasi (prefers-color-scheme), kecuali
      halaman diberi data-theme="light" secara manual (override).
   2) Manual lewat data-theme="dark" di elemen <html>.
   Nilai mengikuti kolom "Mode gelap" di ACUAN-PROYEK.md bagian 2.2. Semua
   pasangan teks/latar dicek >= 4,5:1 oleh tests/test_kontras.py. */
:root {
  --n-aksen-teks-gelap: #4ADE80;
  --n-daun-gelap:       #0F6A38;
  --n-hutan-gelap:      #EDEFEA;
  --n-tinta-gelap:      #EDEFEA;
  --n-abu-gelap:        #9BA09A;
  --n-embun-gelap:      #0F2418;
  --n-pasir-gelap:      #0B0D0B;
  --n-rail-gelap:       #121512;
  --n-kertas-gelap:     #141714;
  --n-garis-gelap:      #2A2E2A;
  --n-garis-lembut-gelap: #1F231F;
  --n-baik-gelap:       #4FD98A;
  --n-baik-bg-gelap:    #14261C;
  --n-waspada-gelap:    #E4B14A;
  --n-waspada-bg-gelap: #2A2213;
  --n-serius-gelap:     #F0895B;
  --n-serius-bg-gelap:  #2E1B12;
  --n-kritis-bg-gelap:  #2E1414;
  --n-kritis-teks-gelap: #F1786E;
  --n-info-gelap:       #9BA7F0;
  --n-info-bg-gelap:    #1C2140;
  --n-kritis-garis-gelap: #5A2522;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --n-aksen-teks: var(--n-aksen-teks-gelap);
    --n-daun:   var(--n-daun-gelap);
    --n-hutan:  var(--n-hutan-gelap);
    --n-tinta:  var(--n-tinta-gelap);
    --n-abu:    var(--n-abu-gelap);
    --n-embun:  var(--n-embun-gelap);
    --n-pasir:  var(--n-pasir-gelap);
    --n-rail:   var(--n-rail-gelap);
    --n-kertas: var(--n-kertas-gelap);
    --n-garis:  var(--n-garis-gelap);
    --n-garis-lembut: var(--n-garis-lembut-gelap);
    --n-baik:       var(--n-baik-gelap);
    --n-baik-teks:  var(--n-baik-gelap);
    --n-baik-bg:    var(--n-baik-bg-gelap);
    --n-waspada:    var(--n-waspada-gelap);
    --n-waspada-teks: var(--n-waspada-gelap);
    --n-waspada-bg: var(--n-waspada-bg-gelap);
    --n-serius:     var(--n-serius-gelap);
    --n-serius-teks: var(--n-serius-gelap);
    --n-serius-bg:  var(--n-serius-bg-gelap);
    --n-kritis-bg:  var(--n-kritis-bg-gelap);
    --n-kritis-teks: var(--n-kritis-teks-gelap);
    --n-info:    var(--n-info-gelap);
    --n-info-bg: var(--n-info-bg-gelap);
    --n-kritis-garis: var(--n-kritis-garis-gelap);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --n-aksen-teks: var(--n-aksen-teks-gelap);
  --n-daun:   var(--n-daun-gelap);
  --n-hutan:  var(--n-hutan-gelap);
  --n-tinta:  var(--n-tinta-gelap);
  --n-abu:    var(--n-abu-gelap);
  --n-embun:  var(--n-embun-gelap);
  --n-pasir:  var(--n-pasir-gelap);
  --n-rail:   var(--n-rail-gelap);
  --n-kertas: var(--n-kertas-gelap);
  --n-garis:  var(--n-garis-gelap);
  --n-garis-lembut: var(--n-garis-lembut-gelap);
  --n-baik:       var(--n-baik-gelap);
  --n-baik-teks:  var(--n-baik-gelap);
  --n-baik-bg:    var(--n-baik-bg-gelap);
  --n-waspada:    var(--n-waspada-gelap);
  --n-waspada-teks: var(--n-waspada-gelap);
  --n-waspada-bg: var(--n-waspada-bg-gelap);
  --n-serius:     var(--n-serius-gelap);
  --n-serius-teks: var(--n-serius-gelap);
  --n-serius-bg:  var(--n-serius-bg-gelap);
  --n-kritis-bg:  var(--n-kritis-bg-gelap);
  --n-kritis-teks: var(--n-kritis-teks-gelap);
  --n-info:    var(--n-info-gelap);
  --n-info-bg: var(--n-info-bg-gelap);
  --n-kritis-garis: var(--n-kritis-garis-gelap);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--n-pasir);
  color: var(--n-tinta);
  font: 400 var(--n-badan-konsol)/1.55 var(--n-badan);
}

/* Judul besar tipis (300) gaya vantis.sh; judul kecil 500. */
h1, h2, h3, h4 {
  font-family: var(--n-tampilan);
  letter-spacing: -.02em;
  margin: 0;
  color: var(--n-hutan);
}
h1, h2 { font-weight: 300; }
h3, h4 { font-weight: 500; letter-spacing: -.01em; }

a { color: var(--n-aksen-teks); }

.n-mono { font-family: var(--n-mono); font-variant-numeric: tabular-nums; }

.n-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;
}