/* rentalrdp.com — tema flat: dark = hitam murni, light = putih murni. Status: system/dark/light via data-theme di . */ html[data-theme="dark"] { color-scheme: dark; --c-bg: #202020; --c-card: #2a2a2a; --c-ui: #343434; --c-ui-hover: #3f3f3f; --c-muted-bg: #4e4e4e; --c-border: #3a3a3a; --c-border-2: #4a4a4a; --c-text: #ececec; --c-text-sub: #cfcfcf; --c-text-muted: #a8a8a8; --c-text-faint: #8a8a8a; --c-em3: #6ee7b7; --c-em4: #34d399; --c-red3: #fca5a5; --c-amber2: #fde68a; --c-amber3: #fcd34d; } html[data-theme="light"] { color-scheme: light; --c-bg: #f4f4f4; --c-card: #fdfdfd; --c-ui: #ececec; --c-ui-hover: #e1e1e1; --c-muted-bg: #d5d5d5; --c-border: #dedede; --c-border-2: #cccccc; --c-text: #222222; --c-text-sub: #454545; --c-text-muted: #666666; --c-text-faint: #858585; --c-em3: #047857; --c-em4: #059669; --c-red3: #dc2626; --c-amber2: #b45309; --c-amber3: #b45309; } /* Default kalau JS belum sempat set (safety: ikut sistem) */ html:not([data-theme]) { color-scheme: light dark; } /* Peta ulang kelas Tailwind yang dipakai front-end agar ikut tema tanpa ubah tiap template JS */ html[data-theme] .bg-slate-950 { background-color: var(--c-bg); } html[data-theme] .bg-slate-950\/90 { background-color: var(--c-bg); } html[data-theme] .bg-slate-900 { background-color: var(--c-card); } html[data-theme] .bg-slate-800 { background-color: var(--c-ui); } html[data-theme] .bg-slate-700 { background-color: var(--c-ui-hover); } html[data-theme] .bg-slate-600 { background-color: var(--c-muted-bg); } html[data-theme] .bg-slate-500 { background-color: var(--c-muted-bg); } html[data-theme] .hover\:bg-slate-700:hover { background-color: var(--c-ui-hover); } html[data-theme] .text-slate-100 { color: var(--c-text); } html[data-theme] .text-slate-200 { color: var(--c-text); } html[data-theme] .text-slate-300 { color: var(--c-text-sub); } html[data-theme] .text-slate-400 { color: var(--c-text-muted); } html[data-theme] .text-slate-500 { color: var(--c-text-faint); } html[data-theme] .border-slate-800 { border-color: var(--c-border); } html[data-theme] .border-slate-700 { border-color: var(--c-border-2); } html[data-theme] .text-emerald-300 { color: var(--c-em3); } html[data-theme] .text-emerald-400 { color: var(--c-em4); } html[data-theme] .text-red-300 { color: var(--c-red3); } html[data-theme] .text-amber-200 { color: var(--c-amber2); } html[data-theme] .text-amber-300 { color: var(--c-amber3); } /* Kartu & input custom */ html[data-theme] .card { background: var(--c-card); border-color: var(--c-border); } html[data-theme] input, html[data-theme] select, html[data-theme] textarea { background-color: var(--c-ui); color: var(--c-text); } html[data-theme] dialog { background: var(--c-card); color: var(--c-text); border-color: var(--c-border); }