/* ==========================================================
   base.css
   Struktur & layout. TIDAK ada warna hardcode di sini —
   semua warna dipanggil lewat var(--nama-variable) yang
   nilainya didefinisikan per file theme-*.css
   Di-load paling akhir, setelah assets/css/*, supaya
   warna bawaan template ikut tema $version.
   ========================================================== */

/* sambungkan variabel bawaan template ke variabel tema */
:root {
  --brand-50: var(--bg-surface);
  --brand-100: var(--badge-bg);
  --brand-500: var(--accent);
  --brand-600: var(--accent-hover);
  --pd-accent: var(--accent);
  --mm2-accent: var(--accent);
  --mm2-accent-hover: var(--accent-hover);
  --ft-orange: var(--accent);
  --ft-orange-dark: var(--accent-hover);
}

body {
  background-color: var(--bg-body);
  color: var(--text-primary);
}

.btn-primary {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
}

/* ========== COMIC STYLE ========== */
.comic-title {
  background: var(--badge-bg);
  color: var(--badge-text);
}

.comic-title::after {
  color: var(--accent);
}

.description-section,
.faq-section,
.faq-item,
.faq-answer,
.comic-popup {
  background: var(--bg-surface);
}

.description-content,
.faq-answer p,
.comic-popup-content p {
  color: var(--text-primary);
}

.description-content strong {
  background: var(--accent);
  color: var(--text-on-accent);
}

.faq-section::before {
  color: var(--accent);
}

.faq-item:hover {
  background: var(--gold);
}

.faq-question {
  background: var(--accent);
  color: var(--text-on-accent);
}

.comic-popup-header {
  background: var(--badge-bg);
  color: var(--badge-text);
}

.comic-popup-footer {
  background: var(--accent);
}

.comic-btn-daftar {
  background: var(--gold);
  color: var(--text-on-accent);
}

.comic-btn-daftar:hover {
  background: var(--gold-hover);
}

.comic-close-btn {
  color: var(--accent);
  border-color: var(--accent);
}