/* ==========================================================================
   Barokah Energy — Utilitas

   Lapis terakhir yang dimuat, sehingga boleh menimpa default komponen.
   Isinya sengaja sedikit: hanya pola yang sebelumnya ditulis sebagai atribut
   style= di puluhan tempat. Setiap penambahan di sini harus benar-benar
   berulang; kalau hanya dipakai sekali, tempatnya di komponen atau section.

   Alasan berkas ini ada sama sekali: atribut style= memaksa CSP membuka
   'unsafe-inline' pada style-src. Menghabiskannya menutup celah itu.
   ========================================================================== */

/* ---- Jarak vertikal -------------------------------------------------------
   Nilainya mengikuti skala di tokens.css, bukan angka lepas. Tiga nilai lama
   tidak ada di skala itu dan sengaja dinaikkan ke anak tangga terdekat:
   1,25rem → 1,5rem, 2rem → 2,25rem, 3rem → 3,5rem. Itu justru maksud skalanya.
   -------------------------------------------------------------------------- */
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* Judul yang membuka babak baru di tengah halaman panjang. */
.section-break {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-2xs);
}

/* Diletakkan setelah .section-break agar bisa menimpa margin bawahnya. */
.mb-2xs { margin-bottom: var(--space-2xs); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ---- Perataan ---- */
.text-center { text-align: center; }
.center-block { margin-inline: auto; }

/* ---- Teks pendukung -------------------------------------------------------
   Dua peran yang berbeda dan sering tertukar:
   .note      catatan kaki di bawah tabel atau formulir, paling redup
   .note-lead paragraf pengantar di bawah judul, masih terbaca sebagai isi
   -------------------------------------------------------------------------- */
.text-muted { color: var(--text-muted); }

.note {
  font-size: var(--text-sm);
  color: var(--text-faint);
}

.note-lead {
  font-size: var(--text-note);
  color: var(--text-muted);
}