/* ============================================================================
   TOKENS — GuardianKos (disalin dari guardian-dashboard 2026-09-08)
   Dipisah dari index.html pada 2026-08-15 waktu dashboard dirombak dari
   "pencatat" jadi "penasihat" (pivot bot 2026-08-14, spec-cfo-ahli-gizi.md).
   Berkas ini HANYA berisi nilai. Nol selector komponen — itu di app.css.

   Mengikuti Brand OS 06-visual-identity: biru #2563EB / navy, tipografi
   Poppins (judul, label, tombol) + Inter (badan teks DAN semua angka).
   Sistemnya disamakan dengan landing page pada 2026-08-07 — sebelumnya dua
   permukaan ini pakai dua pasang font dan dua biru yang berbeda.

   ⚠️ JANGAN ubah --cat-*, --status-*, --div-* sembarangan.
   Nilainya divalidasi lewat skill dataviz (scripts/validate_palette.js):
   lolos lightness band, chroma floor, pemisahan buta-warna (CVD), dan kontras.
   Permukaan (#FFFFFF terang / #111C33 gelap) SUDAH divalidasi ulang terhadap
   palet ini pada 2026-07-27 — hasil: ALL CHECKS PASS.
   Kalau mengganti warna permukaan lagi, WAJIB jalankan ulang validatornya.

   Rombak 2026-08-15 TIDAK menyentuh satu pun nilai --brand/--cat/--status/--div.
   Yang ditambah cuma skala spasi & ukuran ikon, dua hal yang sebelumnya
   memang tidak pernah punya token sama sekali.
   ============================================================================ */
:root{
  color-scheme: light;

  /* ---- brand (dari logo resmi — Brand Bible §10) ----
     2026-08-07: disamakan dengan landing (--blue #2563EB), satu-satunya hex
     brand yang dikunci Brand OS. Token viz (--cat/--status/--div) TIDAK ikut
     berubah — itu set tervalidasi. */
  /* 2026-09-12: palet disetel meniru Juragan Kost (biru terang + navy + putih). */
  --brand-blue:#2f80ed; --brand-blue-bright:#4a90e2;
  --brand-navy:#123a6b; --brand-navy-deep:#0f2f57;
  --jk-blue:#2f80ed; --jk-navy:#123a6b; --jk-head:#3b8ae0;
  --jk-chip:#22314e; --jk-telat:#e23b3b; --jk-in:#16a3c9; --jk-out:#e23b3b;
  --brand-amber:#AD7C31; --brand-amber-soft:#D9B676;
  --brand-slate:#4B5563; --brand-light:#EDF2FA; --brand-green:#10B981;

  /* ---- bentuk ----
     Diturunkan 2026-08-16 (16→12, 10→8) waktu bahasa visualnya disamain ke
     keluarga shadcn/Efferd. Alasannya bukan selera: radius 16px di kartu
     selebar 280px bikin sudutnya makan ruang teks dan seluruh grid kelihatan
     "empuk" — bahasa aplikasi konsumen, bukan panel data. Radius kecil bikin
     tepi kartu sejajar sama tepi tabel dan input di sebelahnya.
     --radius-lg dipakai buat permukaan besar (overlay) yang justru butuh
     kesan lembut. */
  --radius:12px; --radius-sm:8px; --radius-lg:16px;

  /* ---- CINCIN FOKUS (baru 2026-08-16) ----
     shadcn misahin "outline" dari "ring": ring itu bayangan berwarna dengan
     jarak, jadi dia kebaca di atas latar apa pun termasuk tombol biru penuh.
     Sebelumnya cuma outline 2px yang ilang ketelen di tombol primer. */
  --ring:0 0 0 2px var(--viz-surface), 0 0 0 4px var(--brand-blue-bright);

  /* ---- LEBAR SIDEBAR (baru 2026-08-16) ----
     Dua nilai karena sidebar sekarang bisa dilipat jadi rel ikon. Angkanya
     dipakai grid-template-columns DAN gradasi latar .shell — dulu 236px
     ditulis tiga kali di tempat berbeda, jadi mustahil diubah tanpa salah
     satunya ketinggalan. */
  --sb-w:236px; --sb-w-rail:64px;

  /* ---- SKALA SPASI (baru 2026-08-15) ----
     Sebelumnya nol skala: nilai px ad-hoc 8/9/12/16/17/19/21/22/23/26 tersebar
     di seluruh berkas, jadi dua kartu bersebelahan bisa punya padding beda 2px
     tanpa alasan. Kepadatan "dashboard" (bukan halaman pemasaran): langkah 4,
     dasar 8. Nilai ganjil lama dibulatkan ke langkah terdekat waktu dipakai. */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px;

  /* ---- UKURAN IKON (baru 2026-08-15) ----
     Ikon dulu emoji, jadi ukurannya ikut font-size dan nggak pernah sama.
     Sekarang SVG dengan tiga ukuran resmi. Ketebalan garis dikunci di sini
     juga — campur 1,5 dan 2 di satu layar itu yang bikin ikon kelihatan
     dicomot dari dua set berbeda. */
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px;
  --icon-stroke:1.75;

  /* ---- elevasi bertint-biru, bukan abu netral ---- */
  --shadow-sm:0 1px 2px rgba(10,31,61,.06), 0 4px 12px -6px rgba(10,31,61,.10);
  --shadow-md:0 2px 4px rgba(10,31,61,.06), 0 14px 32px -14px rgba(10,31,61,.22);

  /* motif Thread Device (garis+titik sirkuit dari huruf "G" logo) — dipakai tipis */
  --thread:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 36H72M36 0V72' stroke='%236FA0E0' stroke-width='1' opacity='.5'/%3E%3Ccircle cx='36' cy='36' r='2' fill='%236FA0E0' opacity='.8'/%3E%3C/svg%3E");

  /* --- viz: permukaan & tinta (cool-tinted, diselaraskan ke navy brand) --- */
  --viz-surface:      #ffffff;
  --viz-page:         #f4f7fc;
  --viz-ink:          #0b1420;
  --viz-ink-2:        #4a5a72;
  /* Digelapin dari #8494ac pada 2026-08-15. Nilai lamanya cuma 3,08:1 di atas
     putih — di bawah ambang WCAG AA 4,5:1, dan token ini kepakai buat teks
     kecil di mana-mana: label sumbu chart, catatan kaki, kepala tabel, hint.
     Bukan token viz tervalidasi (yang dikunci itu --cat/--status/--div), jadi
     aman diubah. Nilai baru: 5,4:1 di atas putih, 4,9:1 di atas --viz-page. */
  --viz-ink-muted:    #5d6b80;
  --viz-grid:         #dfe6f2;
  --viz-baseline:     #bcc8dc;
  --viz-good-text:    #006300;
  --viz-border:       rgba(11,20,32,.09);

  /* --- viz: palet data TERVALIDASI — jangan diutak-atik --- */
  --cat-1: #2a78d6; --cat-2: #008300; --cat-3: #e87ba4; --cat-4: #eda100;
  --cat-5: #1baf7a; --cat-6: #eb6834; --cat-7: #4a3aa7; --cat-8: #e34948;
  --status-good: #0ca30c; --status-warn: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b;
  --div-pos: #2a78d6; --div-neg: #e34948; --div-mid: #eef2f8;
}

/* Nilai gelap ditulis dua kali dengan sengaja: sekali di bawah media query
   (buat yang biarin tema ikut sistem) dan sekali di [data-theme="dark"] (buat
   yang maksa gelap di HP bermode terang). Menggabungkan keduanya jadi satu
   selector nggak bisa — media query nggak bisa lihat data-theme. */
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --brand-light:#16223d; --brand-slate:#94a3b8;
    --brand-navy-deep:#060E1B; --brand-navy:#0C1A31;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.5);
    --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 14px 32px -14px rgba(0,0,0,.6);
    --viz-surface:#111c33; --viz-page:#080f1c; --viz-ink:#eaf0fa; --viz-ink-2:#a8b8d4;
    --viz-ink-muted:#7286a4; --viz-grid:#22314e; --viz-baseline:#33456a;
    --viz-good-text:#3ec93e; --viz-border:rgba(255,255,255,.10);
    --cat-1:#3987e5; --cat-2:#008300; --cat-3:#d55181; --cat-4:#c98500;
    --cat-5:#199e70; --cat-6:#d95926; --cat-7:#9085e9; --cat-8:#e66767;
    --div-pos:#3987e5; --div-neg:#e66767; --div-mid:#22314e;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --brand-light:#16223d; --brand-slate:#94a3b8;
  --brand-navy-deep:#060E1B; --brand-navy:#0C1A31;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.5);
  --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 14px 32px -14px rgba(0,0,0,.6);
  --viz-surface:#111c33; --viz-page:#080f1c; --viz-ink:#eaf0fa; --viz-ink-2:#a8b8d4;
  --viz-ink-muted:#7286a4; --viz-grid:#22314e; --viz-baseline:#33456a;
  --viz-good-text:#3ec93e; --viz-border:rgba(255,255,255,.10);
  --cat-1:#3987e5; --cat-2:#008300; --cat-3:#d55181; --cat-4:#c98500;
  --cat-5:#199e70; --cat-6:#d95926; --cat-7:#9085e9; --cat-8:#e66767;
  --div-pos:#3987e5; --div-neg:#e66767; --div-mid:#22314e;
}