:root{ --primary:#2563EB; --primary-hover:#1D4ED8; --sidebar:#102249; /* permukaan & latar */ --background:#FFFFFF; /* latar aplikasi */ --surface:#FFFFFF; /* kartu / panel */ --surface-2:#F8FAFC; /* header tabel / hover / sub-panel */ --surface-3:#F1F5F9; /* chip / track / isian */ --navbar-bg:#FFFFFF; /* tombol & dropdown di navbar */ --border:#E2E8F0; --text:#1E293B; --text-dark:#1E293B; --text-light:#64748B; --success:#22C55E; --danger:#EF4444; --warning:#F59E0B; --radius:16px; --shadow: 0 8px 24px rgba(15,23,42,.08); } /* ============================================================ MODE MALAM (Dark) — aktif saat Hanya menimpa token; semua komponen yang pakai var(...) ikut. ============================================================ */ html[data-theme="dark"]{ --primary:#3B82F6; --primary-hover:#60A5FA; --sidebar:#0B1220; --background:#0F172A; /* slate-900 */ --surface:#1E293B; /* slate-800 — kartu */ --surface-2:#243246; /* elevated / hover */ --surface-3:#334155; /* chip / track */ --navbar-bg:#1E293B; --border:#334155; /* slate-700 */ --text:#E2E8F0; /* slate-200 */ --text-dark:#F1F5F9; --text-light:#94A3B8; /* slate-400 */ --shadow: 0 8px 24px rgba(0,0,0,.45); color-scheme: dark; }