/* ============================================================================ Anglocita CMS — lapisan normalisasi utility ---------------------------------------------------------------------------- Dimuat oleh KEDUA shell CMS (panel admin & dashboard customer), sesudah app-ui.css/admin.css dan sebelum cms-sneat.css. Tugasnya satu: menarik utility Tailwind mentah yang bertebaran di isi halaman (`text-gray-800`, `bg-gray-50`, `text-pink-500`, …) ke token `--ui-*`, tanpa menyentuh markup. Tailwind CDN menyuntikkan utility itu dengan spesifisitas satu class (0,1,0); selektor dua class di sini (`.cms-sneat .x`) bernilai (0,2,0) sehingga menang terlepas dari urutan sumber. Karena token `--ui-*` sendiri sudah dipetakan ke palet Sneat oleh cms-sneat.css seksi 2, hasil akhirnya otomatis konsisten dengan tema. Di-scope ke `.cms-sneat` (class di kedua layout CMS), BUKAN ke `.admin-body`, supaya dashboard customer ikut ternormalisasi juga. ========================================================================== */ /* ---------- Text colour normalisation ---------- */ .cms-sneat .text-gray-900, .cms-sneat .text-gray-800 { color: var(--ui-text); } .cms-sneat .text-gray-700, .cms-sneat .text-gray-600 { color: var(--ui-text-soft); } .cms-sneat .text-gray-500, .cms-sneat .text-gray-400 { color: var(--ui-muted); } .cms-sneat .text-gray-300 { color: var(--ui-border-strong); } .cms-sneat .hover\:text-gray-600:hover, .cms-sneat .hover\:text-gray-700:hover { color: var(--ui-text-soft); } /* ---------- Surface / background normalisation ---------- */ .cms-sneat .bg-gray-50 { background-color: var(--ui-surface-2); } .cms-sneat .bg-gray-100 { background-color: #eff0f2; } .cms-sneat .hover\:bg-gray-50:hover { background-color: var(--ui-brand-50); } .cms-sneat .hover\:bg-gray-100:hover { background-color: #eff0f2; } .cms-sneat .hover\:bg-gray-200:hover { background-color: var(--ui-border); } /* ---------- Border normalisation ---------- */ .cms-sneat .border-gray-100, .cms-sneat .border-gray-200 { border-color: var(--ui-border); } .cms-sneat .border-gray-300 { border-color: var(--ui-border-strong); } .cms-sneat .divide-gray-50 > :not([hidden]) ~ :not([hidden]), .cms-sneat .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ui-border); } /* ---------- Brand (pink/rose) utility normalisation ---------- */ .cms-sneat .text-pink-600, .cms-sneat .text-pink-500 { color: var(--ui-brand); } .cms-sneat .text-pink-400 { color: var(--ui-brand-300); } .cms-sneat .hover\:text-pink-700:hover, .cms-sneat .hover\:text-pink-600:hover { color: var(--ui-brand-700); } .cms-sneat .bg-pink-50 { background-color: var(--ui-brand-50); } .cms-sneat .hover\:bg-pink-50:hover { background-color: var(--ui-brand-50); } .cms-sneat .hover\:bg-pink-100:hover { background-color: var(--ui-brand-100); } .cms-sneat .border-pink-200 { border-color: var(--ui-brand-200); } .cms-sneat .border-pink-300 { border-color: var(--ui-brand-300); } .cms-sneat .bg-pink-500 { background-color: var(--ui-brand); } .cms-sneat .hover\:bg-pink-600:hover { background-color: var(--ui-brand-600); } .cms-sneat .ring-pink-200 { --tw-ring-color: var(--ui-brand-200); } /* ---------- Danger utility normalisation ---------- */ .cms-sneat .text-red-500, .cms-sneat .text-red-400 { color: var(--ui-danger); } .cms-sneat .hover\:text-red-600:hover { color: #b23446; } /* ---------- Small inline action buttons inside table rows ---------- Several list rows use `