/* ═══════════════════════════════════════════════════════════════════
   tokens.css — SATU-SATUNYA sumber warna, jarak, radius, tipografi.
   Protokol 03 §2.

   ATURAN: berkas CSS lain TIDAK BOLEH memuat nilai hex atau rgba().
   Semua lewat var(--…). Perlu warna baru? Tambahkan di sini.

   TEMA: "Kedalaman Laut" — glassmorphism di atas air biru gelap,
   cahaya matahari menembus permukaan dari atas, partikel plankton
   bercahaya naik ke permukaan.
     mode gelap  = laut dalam   (bawaan)
     mode terang = laut dangkal (permukaan, sinar matahari kuat)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Aksen (semua diturunkan dari #00c4ee) ── */
  --accent:        #00c4ee;
  --accent-2:      #1a7fe0;
  --accent-3:      #09cdb5;
  --accent-soft:   rgba(0, 196, 238, .12);
  --accent-line:   rgba(0, 196, 238, .34);
  --accent-glow:   rgba(0, 196, 238, .34);
  --grad:          linear-gradient(135deg, #1560c8 0%, #0299c8 54%, #0a9c8e 100%);
  --grad-text:     linear-gradient(120deg, #7fe3ff 0%, #35d2f2 45%, #4fe6cf 100%);
  --on-accent:     #ffffff;

  /* ═══ LAUT DALAM (tema bawaan) ═══════════════════════════════════
     Empat titik kedalaman: tepat di bawah permukaan → palung. */
  --sea-1:         #0d5f8a;   /* tepat di bawah permukaan, kena matahari */
  --sea-2:         #07425f;
  --sea-3:         #03283e;
  --bg:            #01101c;   /* palung terdalam */
  --bg2:           #052740;   /* panel padat (dropdown, input) */
  --bg3:           #073350;   /* panel padat yang sedikit lebih terang */

  /* Cahaya menembus permukaan air (dipakai di body::before / ::after) */
  --surface-glow:  rgba(140, 232, 255, .42);
  --surface-fade:  rgba(140, 232, 255, 0);
  --ray:           rgba(168, 240, 255, .23);
  --ray-2:         rgba(120, 214, 255, .14);
  --ray-fade:      rgba(168, 240, 255, 0);
  --caustic:       rgba(180, 244, 255, .16);
  --caustic-fade:  rgba(180, 244, 255, 0);
  --abyss:         rgba(0, 8, 18, .55);   /* vignette dasar & tepi */
  --abyss-fade:    rgba(0, 8, 18, 0);

  /* Partikel canvas — dibaca sea.js.
     --particle WAJIB berbentuk "r, g, b" (tanpa rgb()). */
  --particle:      168, 240, 255;
  --particle-alpha: .62;
  --particle-blend: lighter;

  /* ═══ KACA (glassmorphism) ═══════════════════════════════════════ */
  --glass:         linear-gradient(158deg,
                     rgba(134, 220, 255, .115) 0%,
                     rgba(72, 168, 224, .045) 46%,
                     rgba(10, 58, 92, .05) 100%);
  --glass-2:       linear-gradient(158deg,
                     rgba(148, 230, 255, .175) 0%,
                     rgba(84, 186, 236, .075) 46%,
                     rgba(12, 68, 106, .06) 100%);
  --glass-top:     radial-gradient(ellipse 120% 70% at 50% -30%,
                     rgba(178, 240, 255, .16) 0%, rgba(178, 240, 255, 0) 70%);
  --glass-brd:     rgba(146, 224, 255, .17);
  --glass-brd-hi:  rgba(178, 240, 255, .42);
  --glass-sheen:   rgba(206, 246, 255, .28);   /* garis kilau tepi atas */
  --glass-blur:    18px;
  --glass-sat:     150%;
  --glass-shadow:  0 18px 44px rgba(0, 12, 26, .42);
  --glass-shadow-hi: 0 26px 60px rgba(0, 12, 26, .52);

  /* Kaca khusus navbar & footer — sedikit lebih pekat supaya teks
     tetap terbaca walau ada partikel terang lewat di belakangnya */
  --nav-glass:     rgba(3, 30, 50, .58);
  --foot-glass:    rgba(1, 18, 32, .40);
  /* Panel melayang DI DALAM navbar (menu hamburger, dropdown bahasa).
     PEKAT PENUH, sengaja — bukan kaca.
     Dua alasan: (1) backdrop-filter di dalam elemen yang sudah punya
     backdrop-filter tidak berfungsi di Chromium, jadi tidak ada blur yang
     menolong; (2) sisa transparansi sekecil 2% pun masih memperlihatkan
     bayangan judul hero di balik menu, dan itu terlihat seperti cacat. */
  --panel-glass:   #04223a;

  /* Judul hero: terang di puncak, meredup ke bawah — seperti kena
     cahaya dari permukaan air */
  --head-grad:     linear-gradient(180deg, #ffffff 0%, #cdeeff 55%, #8ecbe8 100%);

  /* Tombol Google — putih di kedua tema, sesuai pedoman merek Google.
     Justru keseragaman itu yang membuatnya langsung dikenali. */
  --google-bg:     #ffffff;
  --google-bg-hi:  #f1f5f9;
  --google-fg:     #1f2328;
  --google-brd:    rgba(255, 255, 255, .55);

  /* Turunan lama — tetap ada supaya komponen warisan tidak rusak */
  --surface:       rgba(96, 200, 246, .06);
  --surface-2:     rgba(96, 200, 246, .11);
  --border:        rgba(146, 224, 255, .15);
  --border-strong: rgba(146, 224, 255, .34);

  /* ── Teks ── */
  --text:          #e4f7ff;
  --text2:         rgba(203, 236, 252, .72);
  --text3:         rgba(166, 212, 236, .48);

  /* ── Status ── */
  --success:       #26e0b4;
  --warning:       #ffc043;
  --danger:        #ff6b7d;
  --success-soft:  rgba(38, 224, 180, .13);
  --warning-soft:  rgba(255, 192, 67, .13);
  --danger-soft:   rgba(255, 107, 125, .13);

  /* ── Palet garis grafik ── */
  --c1:#00c4ee; --c2:#09cdb5; --c3:#ffc043; --c4:#ff6b7d; --c5:#a78bfa;
  --c6:#4ade80; --c7:#fb923c; --c8:#38bdf8; --c9:#f472b6; --c10:#facc15;

  /* ── Masker (untuk mask-image; bukan warna tampil) ── */
  --mask-on:       rgba(0, 0, 0, 1);
  --mask-off:      rgba(0, 0, 0, 0);

  /* ── Ukuran ── */
  --sidebar-w: 220px;
  --navbar-h:  64px;
  --topbar-h:  56px;
  --wrap:      1120px;
  --radius-sm: 9px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* jarak kelipatan 4 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;  --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:96px;

  /* ── Tipografi ── */
  --font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cjk: 'Inter', 'Noto Sans SC', sans-serif;
  --fs-xs:  12px;
  --fs-sm:  13.5px;
  --fs-base:16px;      /* JANGAN di bawah 16px untuk input: Safari iOS auto-zoom */
  --fs-md:  18px;
  --fs-lg:  20px;
  --fs-xl:  26px;
  --fs-2xl: 34px;

  /* ── Transisi & bayangan ── */
  --tr:      .18s ease;
  --tr-slow: .25s ease;
  --shadow:  0 24px 60px rgba(0, 8, 20, .45);
  --shadow-drawer: 24px 0 60px rgba(0, 8, 20, .5);
  --scrim:   rgba(1, 16, 28, .62);
  --glow-1:  rgba(0, 196, 238, .09);
  --glow-2:  rgba(9, 205, 181, .07);
}

/* ═══════════════════════════════════════════════════════════════════
   LAUT DANGKAL (mode terang) — hanya menimpa WARNA, ukuran tetap.
   Bayangkan berdiri di air sepinggang: air biru muda, matahari terang
   dari atas, gelembung putih naik, kaca jadi frosted glass putih.

   DUA PEMILIH, SENGAJA:
     html[data-pretheme="light"] body — disetel skrip kecil di <head>
       SEBELUM halaman dilukis. Tanpa ini, pengguna mode terang melihat
       kedipan laut dalam yang gelap dulu selama sepersekian detik.
     body.theme-light — dipasang theme.js setelah halaman siap.
   theme.js WAJIB memperbarui data-pretheme juga saat tombol ditekan,
   kalau tidak atribut lama akan mengunci halaman di mode terang.
   ═══════════════════════════════════════════════════════════════════ */
body.theme-light,
html[data-pretheme="light"] body {
  --accent:        #0479a3;
  --accent-2:      #1364b8;
  --accent-3:      #0a8c78;
  --accent-soft:   rgba(4, 121, 163, .11);
  --accent-line:   rgba(4, 121, 163, .30);
  --accent-glow:   rgba(4, 121, 163, .26);
  --grad:          linear-gradient(135deg, #1360bd 0%, #0289b4 54%, #0a9382 100%);
  --grad-text:     linear-gradient(120deg, #0d5fae 0%, #0479a3 50%, #0a8c78 100%);

  /* Kedalaman: terang di permukaan → biru muda di bawah */
  --sea-1:         #f0fbff;
  --sea-2:         #d6f0fc;
  --sea-3:         #b9e3f6;
  --bg:            #9ed7ef;
  --bg2:           #ffffff;
  --bg3:           #eaf7fd;

  /* Sinar matahari di air dangkal jauh lebih kuat dan hangat */
  --surface-glow:  rgba(255, 253, 232, .78);
  --surface-fade:  rgba(255, 253, 232, 0);
  --ray:           rgba(255, 255, 255, .55);
  --ray-2:         rgba(255, 250, 214, .34);
  --ray-fade:      rgba(255, 255, 255, 0);
  --caustic:       rgba(255, 255, 255, .40);
  --caustic-fade:  rgba(255, 255, 255, 0);
  --abyss:         rgba(6, 74, 112, .16);
  --abyss-fade:    rgba(6, 74, 112, 0);

  /* Gelembung putih; source-over supaya tidak "membakar" latar terang */
  --particle:      255, 255, 255;
  --particle-alpha: .85;
  --particle-blend: source-over;

  /* Kaca beku putih */
  --glass:         linear-gradient(158deg,
                     rgba(255, 255, 255, .72) 0%,
                     rgba(255, 255, 255, .50) 100%);
  --glass-2:       linear-gradient(158deg,
                     rgba(255, 255, 255, .90) 0%,
                     rgba(255, 255, 255, .68) 100%);
  --glass-top:     radial-gradient(ellipse 120% 70% at 50% -30%,
                     rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, 0) 70%);
  --glass-brd:     rgba(255, 255, 255, .85);
  --glass-brd-hi:  rgba(4, 121, 163, .38);
  --glass-sheen:   rgba(255, 255, 255, .95);
  --glass-blur:    16px;
  --glass-sat:     165%;
  --glass-shadow:  0 16px 40px rgba(6, 74, 112, .14);
  --glass-shadow-hi: 0 24px 54px rgba(6, 74, 112, .20);

  --nav-glass:     rgba(255, 255, 255, .66);
  --foot-glass:    rgba(255, 255, 255, .42);
  --panel-glass:   #ffffff;
  --head-grad:     linear-gradient(180deg, #05364c 0%, #06293b 60%, #0a4762 100%);
  --google-brd:    rgba(6, 41, 59, .18);

  --surface:       rgba(255, 255, 255, .62);
  --surface-2:     rgba(255, 255, 255, .86);
  --border:        rgba(255, 255, 255, .80);
  --border-strong: rgba(4, 121, 163, .32);

  --text:          #06293b;
  --text2:         rgba(6, 41, 59, .74);
  --text3:         rgba(6, 41, 59, .50);

  --success:       #08876c;
  --warning:       #b87d10;
  --danger:        #cf3446;
  --success-soft:  rgba(8, 135, 108, .12);
  --warning-soft:  rgba(184, 125, 16, .12);
  --danger-soft:   rgba(207, 52, 70, .12);

  --c1:#0479a3; --c2:#07866f; --c3:#b87d10; --c4:#cf3446; --c5:#7c5cd6;
  --c6:#2f9e44; --c7:#e8590c; --c8:#1c7ed6; --c9:#c2255c; --c10:#a8850a;

  --shadow: 0 18px 46px rgba(6, 74, 112, .12);
  --shadow-drawer: 24px 0 60px rgba(6, 74, 112, .18);
  --scrim:  rgba(6, 74, 112, .38);
  --glow-1: rgba(4, 121, 163, .07);
  --glow-2: rgba(10, 140, 120, .05);
}

/* ── Perangkat kecil: turunkan beban GPU dari backdrop-filter ── */
@media (max-width: 768px) {
  :root,
  body.theme-light,
  html[data-pretheme="light"] body { --glass-blur: 12px; --glass-sat: 130%; }
}

/* ── Langit di kotak "Saat ini" halaman Cuaca ──────────────────────────
   Satu set untuk KEDUA tema, sengaja. Kotak itu meniru jendela ke langit,
   bukan panel aplikasi: siang tetap biru dan malam tetap gelap walau
   aplikasinya bertema terang — langit terang-pucat di tema terang membuat
   tulisan putih di atasnya tidak terbaca. Karena itu ditaruh di :root dan
   TIDAK ditimpa blok tema terang di atas. */
:root {
  --sky-siang-1:   #1466c4;
  --sky-siang-2:   #2fb5e8;
  --sky-mendung-1: #34506a;
  --sky-mendung-2: #62809a;
  --sky-hujan-1:   #1f3348;
  --sky-hujan-2:   #3a5670;
  --sky-malam-1:   #0a1430;
  --sky-malam-2:   #1f3263;
  --sky-ink:       #ffffff;
  --sky-ink-2:     rgba(255, 255, 255, .80);
  --sky-glass:     rgba(255, 255, 255, .14);
  --sky-glass-brd: rgba(255, 255, 255, .22);
}

/* ── Awan di ikon cuaca ────────────────────────────────────────────────
   Dua tema, dua perlakuan. Di tema gelap awan terang tanpa garis tepi. Di
   tema terang awan PUTIH dengan garis tepi abu — memakai --text (biru tua)
   di sini membuat setiap "berawan" terbaca seperti awan badai. */
:root {
  --wi-cloud:      #e8f6ff;
  --wi-cloud-2:    #8fb3c9;
  --wi-cloud-line: transparent;
}
body.theme-light,
html[data-pretheme="light"] body {
  --wi-cloud:      #ffffff;
  --wi-cloud-2:    #b4c6d4;
  --wi-cloud-line: #7f98ab;
}

/* ── Gambar pemandangan kandang di kotak "Saat ini" (wx_ilustrasi) ─────
   Sama seperti langit di atas: satu set untuk kedua tema, karena gambar
   itu jendela ke luar, bukan bagian panel aplikasi. Atap seng merah-coklat,
   tirai terpal biru, sawit hijau — pemandangan kandang di Banyuasin. */
:root {
  --ils-sun:         #ffd84a;
  --ils-sun-glow:    rgba(255, 236, 150, .35);
  --ils-moon:        #f6f1cf;
  --ils-star:        rgba(255, 255, 255, .85);
  --ils-cloud:       rgba(255, 255, 255, .92);
  --ils-cloud-dark:  rgba(160, 178, 194, .85);
  --ils-hill-far:    #4f9a72;
  --ils-hill-near:   #3a8458;
  --ils-ground:      #2f7447;
  --ils-path:        #c9b489;
  --ils-wall:        #f1ede2;
  --ils-curtain:     #2f6fa3;
  --ils-post:        #8a7658;
  --ils-roof:        #b24a33;
  --ils-roof-2:      #8a3624;
  --ils-trunk:       #6e5436;
  --ils-leaf:        #2f8f45;
  --ils-leaf-2:      #1f6e33;
  --ils-lamp:        #ffd46b;
  --ils-rain:        rgba(215, 232, 255, .70);
  --ils-fog:         rgba(235, 242, 248, .55);
  --ils-haze:        rgba(226, 214, 186, .28);
  --ils-bolt:        #ffe066;
  --ils-shade-night: rgba(4, 12, 34, .55);
  --ils-shade-rain:  rgba(30, 45, 62, .35);
  --ils-box:         rgba(6, 22, 42, .55);
  --ils-box-brd:     rgba(255, 255, 255, .18);
}

/* ── Kode QR pemasangan verifikasi 2 langkah ───────────────────────────
   Satu set untuk KEDUA tema, sengaja: pemindai paling andal membaca kotak
   gelap di atas latar terang. QR terbalik (terang di atas gelap) tidak
   terbaca oleh sebagian aplikasi authenticator. Karena itu ditaruh di
   :root dan TIDAK ditimpa blok tema terang. */
:root {
  --qr-dark:  #000000;
  --qr-light: #ffffff;
}

/* ── Gambar isometrik halaman publik (config/iso_art.php, iso.css) ─────
   Satu set untuk KEDUA tema, sama alasannya dengan --ils-*: gambarnya
   diorama kandang yang mengambang, bukan bagian panel aplikasi. Atap seng
   merah-coklat, tirai terpal biru, ayam coklat, telur coklat, sawit —
   kandang open house baterai di Sumatera Selatan.
   Hanya bayangan pulau yang ikut tema (blok terang di bawahnya). */
:root {
  --iso-grass-t:   #86c96a;
  --iso-grass-l:   #6bb055;
  --iso-grass-r:   #5a9a48;
  --iso-soil-l:    #b07a4f;
  --iso-soil-r:    #8e5f3b;
  --iso-soil-2:    #c48f62;
  --iso-soil-3:    #a57048;
  --iso-path:      #dcc497;
  --iso-cement-t:  #ebe6da;
  --iso-cement-l:  #d2c9b6;
  --iso-cement-r:  #b9ae98;
  --iso-wall-t:    #fbf8f1;
  --iso-wall-l:    #ece5d6;
  --iso-wall-r:    #d9cfbb;
  --iso-wall-in:   #e1d9c7;
  --iso-post-t:    #a3adb3;
  --iso-post-l:    #86929a;
  --iso-post-r:    #6d7880;
  --iso-roof-t:    #c65a3e;
  --iso-roof-t2:   #b04c33;
  --iso-roof-l:    #9c4029;
  --iso-roof-r:    #82341f;
  --iso-roof-line: rgba(90, 30, 15, .26);
  --iso-rafter:    #8c6b45;
  --iso-tarp-l:    #3176ad;
  --iso-tarp-line: rgba(14, 50, 85, .30);
  --iso-tarp-roll: #2a6699;
  --iso-tarp-hi:   #5aa0d6;
  --iso-cage-in:   #4f6472;
  --iso-cage-side: #93a3ad;
  --iso-cage-top:  #bcc8cf;
  --iso-wire:      rgba(236, 243, 247, .75);
  --iso-frame:     #7e8d96;
  --iso-lip-t:     #d8dfe3;
  --iso-lip-l:     #b2bec5;
  --iso-trough-t:  #e3e9ec;
  --iso-trough-l:  #b9c4ca;
  --iso-feed:      #c79f63;
  --iso-hen:       #b8642c;
  --iso-hen-2:     #94491f;
  --iso-hen-3:     #6d3416;
  --iso-hen-ink:   #5a2a12;
  --iso-hen-line:  rgba(70, 28, 8, .45);
  --iso-comb:      #e0352d;
  --iso-beak:      #f2b23a;
  --iso-leg:       #e9a93b;
  --iso-eye:       #1e130b;
  --iso-glint:     #ffffff;
  --iso-egg:       #efcda6;
  --iso-egg-2:     #d6a67c;
  --iso-egg-hi:    rgba(255, 248, 238, .85);
  --iso-tray-t:    #cfc6b5;
  --iso-tray-l:    #b4aa97;
  --iso-tray-r:    #9d927e;
  --iso-cup:       #aa9f8a;
  --iso-pallet-t:  #b88a55;
  --iso-pallet-l:  #9a6f40;
  --iso-pallet-r:  #7f5a32;
  --iso-sack-t:    #f6f3ea;
  --iso-sack-l:    #e4dfd2;
  --iso-sack-r:    #cec7b7;
  --iso-sack-band: #2f9e5b;
  --iso-door:      #7b5c3a;
  --iso-door-2:    #9c7a52;
  --iso-sign:      #0f4c6e;
  --iso-sign-t:    #ffffff;
  --iso-trunk:     #7a5a3a;
  --iso-trunk-2:   #5e4329;
  --iso-frond:     #2f9a4c;
  --iso-frond-2:   #227a3a;
  --iso-frond-3:   #46b562;
  --iso-rib:       rgba(20, 70, 30, .45);
  --iso-bush:      #3d9f56;
  --iso-bush-2:    #2c7f43;
  --iso-bush-3:    #4fb466;
  --iso-phone-t:   #44535f;
  --iso-phone-l:   #26343f;
  --iso-phone-r:   #1b262f;
  --iso-screen:    #062a44;
  --iso-ui-1:      #00c4ee;
  --iso-ui-2:      #09cdb5;
  --iso-ui-ok:     #26e0b4;
  --iso-ui-warn:   #ffc043;
  --iso-ui-row:    rgba(96, 200, 246, .14);
  --iso-ui-dim:    rgba(203, 236, 252, .38);
  --iso-ui-tx:     rgba(228, 247, 255, .85);
  --iso-ui-axis:   rgba(146, 224, 255, .35);
  --iso-flow:      #1fd0f5;
  --iso-flow-bg:   rgba(31, 208, 245, .16);
  --iso-sun:       #ffd84a;
  --iso-sun-glow:  rgba(255, 226, 120, .55);
  --iso-sun-glow-2: rgba(255, 216, 74, .16);
  --iso-sun-glow-0: rgba(255, 216, 74, 0);
  --iso-cloud:     #ffffff;
  --iso-cloud-2:   #dbe7ef;
  /* alas gambar kecil, mesin hitung, batang grafik */
  --iso-plat-t:    #e2eef4;
  --iso-plat-l:    #aac5d3;
  --iso-plat-r:    #8aa9bb;
  --iso-white:     #ffffff;
  --iso-ui-off:    rgba(203, 236, 252, .18);
  --iso-mach-t:    #63d7e8;
  --iso-mach-l:    #22aac6;
  --iso-mach-r:    #1888a3;
  --iso-mach-in:   #0e5f73;
  --iso-gear:      #e6fbff;
  --iso-gear-2:    #b5ecf6;
  --iso-tile-t:    #ffd36a;
  --iso-tile-l:    #f0b43a;
  --iso-tile-r:    #d39a22;
  --iso-tile-x:    #5a3a00;
  --iso-bar1-t:    #5fe0fb;
  --iso-bar1-l:    #12b6dc;
  --iso-bar1-r:    #0b8fb0;
  --iso-bar2-t:    #5ff0d6;
  --iso-bar2-l:    #10c3a6;
  --iso-bar2-r:    #0a9a83;
  --iso-bar3-t:    #ffd77a;
  --iso-bar3-l:    #f2b23a;
  --iso-bar3-r:    #cf8f1c;
  --iso-coin:      #f7cf5c;
  --iso-coin-2:    #d9a42c;
  --iso-coin-3:    #e8b93f;
  --iso-string:    #8a7a60;
  --iso-tag-hole:  #062a44;
  --iso-sheet-t:   #ffffff;
  --iso-sheet-l:   #eef3f0;
  --iso-sheet-r:   #cfd8d3;
  --iso-sheet-h:   #1f9d55;
  --iso-sheet-g:   #c9d6ce;
  --iso-sheet-hl:  rgba(31, 157, 85, .22);
  --iso-tower:     #8fa3b0;
  /* bangunan mini, rumah jaga, tandon */
  --iso-tarpbox-l: #3176ad;
  --iso-tarpbox-r: #255a86;
  --iso-house-t:   #f3ead8;
  --iso-house-l:   #e6dac2;
  --iso-house-r:   #cdbfa3;
  --iso-window:    #7fc6e8;
  --iso-tank:      #3a86c8;
  --iso-tank-2:    #2c6ea8;
  --iso-tank-t:    #6db0e6;
  --iso-bubble:    #ffffff;
  --iso-bubble-t:  #0f4c6e;
  /* meja catatan (bagian Masalah) */
  --iso-desk-t:    #c99459;
  --iso-desk-l:    #a8743f;
  --iso-desk-r:    #8b5d30;
  --iso-lap-t:     #d3dae0;
  --iso-lap-l:     #aeb7bf;
  --iso-lap-r:     #8f99a2;
  --iso-key:       #6b7782;
  --iso-err:       #ff5a6a;
  --iso-paper:     #fffdf6;
  --iso-paper-2:   #f3eedf;
  --iso-inkl:      rgba(60, 80, 110, .35);
  --iso-ink:       #3d5a80;
  --iso-cover-t:   #2f6fa3;
  --iso-cover-l:   #255a86;
  --iso-cover-r:   #1d4a6e;
  --iso-pen:       #1d3557;
  --iso-calc-t:    #39444e;
  --iso-calc-l:    #2a333b;
  --iso-calc-r:    #1f272e;
  --iso-calc-b:    #c9d2d9;
  --iso-calc-d:    #b7e4c7;
  /* sarang, cangkang, papan arah, obrolan */
  --iso-nest-2:    #b0843f;
  --iso-nest-in:   #7a5428;
  --iso-straw:     #e0bd6f;
  --iso-shell:     #f5e3cc;
  --iso-shell-2:   #e9cfae;
  --iso-chat-1:    rgba(203, 236, 252, .35);
  --iso-env-2:     #9fb7c6;
  --iso-signb:     #c9935a;
  --iso-signb-2:   #b07c45;
  --iso-shadow:    rgba(0, 10, 22, .42);
  --iso-shadow-soft: rgba(20, 60, 20, .24);
}
body.theme-light,
html[data-pretheme="light"] body {
  --iso-shadow:    rgba(6, 74, 112, .16);
}