/* ══════════════════════════════════════════════════════════════════════════
TOKENS.CSS — Lapisan token bersama untuk seluruh portal
══════════════════════════════════════════════════════════════════════════
MASALAH YANG DISELESAIKAN
-------------------------
24 halaman memakai var(--bg2), var(--bg3), var(--pdim), var(--muted), dll
yang TIDAK PERNAH didefinisikan di halaman itu maupun di stylesheet yang
dimuatnya. Akibatnya properti CSS-nya menjadi invalid dan browser memakai
nilai warisan / transparan — panel jadi hilang, teks jadi rendah kontras,
dan tab aktif tidak kelihatan.
Contoh nyata sebelum perbaikan:
views/login.ejs -> .nav-link:hover{background:var(--bg3)} (undefined)
views/qris_static.ejs -> tidak punya :root sama sekali, tapi memakai 6 token
views/dashboard.ejs -> .badge{background:var(--pdim)} (undefined)
PENDEKATAN
----------
File ini HANYA mendefinisikan variabel — tidak ada selector komponen, tidak
ada reset, tidak ada !important. Jadi ia tidak bisa mengubah tampilan
halaman yang tokennya sudah lengkap; ia hanya mengisi yang kosong.
Nama variabel sengaja dipertahankan persis seperti yang sudah dipakai
(--bg, --bg2, --pdim, ...) supaya 34.067 baris markup tidak perlu disentuh.
URUTAN MUAT
-----------
Muat tokens.css LEBIH DAHULU, baru stylesheet portal:
Dengan urutan ini admin.css / mitra.css tetap menang untuk token yang
memang sudah mereka atur, sementara token yang hilang tetap terisi.
Halaman terang (customer/publik) menambahkan class "theme-light" pada
atau ; tanpa itu default-nya gelap, mengikuti admin.css.
══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────
DEFAULT: TEMA GELAP
Nilainya disamakan dengan :root milik admin.css agar tidak ada pergeseran
warna pada halaman admin yang sudah ada.
───────────────────────────────────────────────────────────────────────── */
:root {
/* Permukaan */
--bg: #0d1117; /* latar halaman */
--bg2: #161b22; /* panel / kartu */
--bg3: #21262d; /* permukaan naik / hover */
--card: #161b22;
--sidebar-bg: #0d1117;
/* Garis & teks */
--border: rgba(240,246,252,0.1);
--text: #e6edf3;
--muted: #7d8590;
/* Warna aksi + varian redup (dim) untuk latar badge/tab */
--primary: #6366f1;
--pdim: rgba(99,102,241,0.15);
--success: #3fb950;
--sdim: rgba(63,185,80,0.15);
--warning: #d29922;
--wdim: rgba(210,153,34,0.15);
--danger: #f85149;
--ddim: rgba(248,81,73,0.15);
--info: #58a6ff;
--idim: rgba(88,166,255,0.15);
--hover-bg: rgba(255,255,255,0.05);
/* Radius & layout — dipakai mitra.css, disediakan di sini agar konsisten */
--radius: 14px;
--radius-sm: 8px;
--topbar-h: 58px;
--bottom-h: 68px;
/* Alias kompatibilitas: token lama yang dipakai segelintir halaman.
Didefinisikan agar halaman lama tidak rusak, bukan untuk dipakai lagi. */
--fg: var(--text);
--brand: var(--primary);
--p: var(--primary);
--b: var(--border);
--muted2: var(--muted);
--text-color: var(--text);
--bg-main: var(--bg);
--bg-card: var(--bg2);
}
/* ─────────────────────────────────────────────────────────────────────────
TEMA TERANG
Dipakai halaman customer/publik (login, dashboard pelanggan, cek tagihan,
voucher publik, QRIS). Nilainya mengikuti html.light-mode-pre di admin.css
supaya tombol toggle tema tetap konsisten lintas portal.
───────────────────────────────────────────────────────────────────────── */
html.theme-light,
html.theme-light body,
body.theme-light,
html.light-mode-pre,
html.light-mode-pre body,
body.light-mode {
--bg: #f8fafc;
--bg2: #ffffff;
--bg3: #eef1f7;
--card: #ffffff;
--sidebar-bg: #f0f2f8;
--border: rgba(0,0,0,0.09);
--text: #1a1d27;
--muted: #64748b;
--primary: #6366f1;
--pdim: rgba(99,102,241,0.10);
--success: #16a34a;
--sdim: rgba(22,163,74,0.10);
--warning: #d97706;
--wdim: rgba(217,119,6,0.10);
--danger: #dc2626;
--ddim: rgba(220,38,38,0.10);
--info: #2563eb;
--idim: rgba(37,99,235,0.10);
--hover-bg: rgba(99,102,241,0.07);
}
/* ─────────────────────────────────────────────────────────────────────────
HALAMAN CETAK
Struk termal & invoice dirender ke kertas: paksa dasar terang agar token
gelap tidak menghasilkan cetakan blok hitam / teks tak terbaca.
───────────────────────────────────────────────────────────────────────── */
@media print {
:root {
--bg: #ffffff;
--bg2: #ffffff;
--bg3: #f5f5f5;
--card: #ffffff;
--text: #000000;
--muted: #444444;
--border: rgba(0,0,0,0.2);
}
}