/* home.light.css — override berbasis CSS variable/komponen */
html[data-theme='light']{
  --bg:#f8fafc; --card:#ffffff; --txt:#0f172a; --muted:#334155; --brand:#2563eb;
}
html[data-theme='light'] body{ background:var(--bg); color:var(--txt); }

/* Hero + card + box */
html[data-theme='light'] .s-hero{ background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%); }
html[data-theme='light'] .s-hero__lead{ color:#475569; }
html[data-theme='light'] .s-hero__stats .stat{ background:#ffffff;border-color:#e5e7eb;color:#0f172a }

html[data-theme='light'] .card,
html[data-theme='light'] .box,
html[data-theme='light'] .room,
html[data-theme='light'] .feat{
  background:#ffffff; border-color:#e5e7eb; color:#0f172a;
}

/* Button ghost jadi kontras */
html[data-theme='light'] .btn--ghost{ color:#0f172a; border-color:#cbd5e1; }
html[data-theme='light'] .btn--ghost:hover{ background:#0f172a; color:#fff; }

/* Footer dibiarkan gelap biar kuat */
html[data-theme='light'] .site-footer{ background:#0f172a; color:#cbd5e1; }
/* === LIGHT MODE – readability fix for hero === */

/* Paksa warna teks di kolom hero (judul + paragraph + chips) */
html[data-theme='light'] .s-hero__col--text,
html[data-theme='light'] .s-hero__col--text * {
  color: #0f172a; /* slate-900 */
}

html[data-theme='light'] .s-hero__title {
  color: #0b1324;              /* lebih pekat untuk heading */
  text-shadow: none;           /* pastikan tidak ada shadow abu */
}

html[data-theme='light'] .s-hero__lead {
  color: #334155;              /* slate-700 */
}

/* Stats/chips di hero */
html[data-theme='light'] .s-hero__stats .stat{
  background: #ffffff;
  border-color: #e5e7eb;       /* slate-200 */
  color: #0f172a;
}

/* Tombol */
html[data-theme='light'] .btn--primary{
  background: #2563eb;         /* brand */
  border-color: #2563eb;
  color: #fff;
}
html[data-theme='light'] .btn--primary:hover{ background:#1d4ed8; }

html[data-theme='light'] .btn--ghost{
  background:#fff;
  border:1px solid #cbd5e1;    /* slate-300 */
  color:#0f172a;
}
html[data-theme='light'] .btn--ghost:hover{
  background:#0f172a;
  color:#fff;
}

/* (opsional) tambahkan sedikit “wash” putih di sisi kiri hero agar teks selalu kontras */
html[data-theme='light'] .s-hero--flat .s-hero__wrap{
  background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%);
  border-radius: 14px;
  padding: 32px 16px; /* kalau layout jadi lompat, bebas dihapus */
}
@media (max-width: 900px){
  html[data-theme='light'] .s-hero--flat .s-hero__wrap{
    background: transparent;   /* mobile: balik transparan */
    padding: 40px 16px;
  }
}