/* AutoContent — Elegant theme: Light (B&W) + Dark mode.
   Dimuat SETELAH <style> tiap halaman. Mode diatur lewat
   <html data-theme="light|dark"> oleh theme-toggle.js */

/* ── LIGHT (default, hitam-putih elegan) ── */
:root {
  --on-accent: #ffffff;
  --bg: #f5f5f4; --panel: #ffffff; --panel-2: #fafafa;
  --ink: #0a0a0a; --ink-2: #404040; --muted: #a1a1aa;
  --line: #ececec; --line-2: #e0e0e0;
  --navy: #101012; --navy-2: #1a1a1d;
  --accent: #d4202f; --accent-deep: #a4121f; --accent-soft: #fdeaec; --accent-ink: #b81c2b;
  --orange: #52525b; --orange-soft: #f1f1f2;
  --blue: #3f3f46;   --blue-soft: #f1f1f2;
  --green: #d4202f;  --green-soft: #fdeaec;
  --teal: #3f3f46;   --teal-soft: #f1f1f2;
  --gold: #52525b;   --gold-soft: #f1f1f2;
  --sky: #3f3f46; --purple: #3f3f46;
  --wa: #d4202f;     --wa-soft: #fdeaec; --n8n: #d4202f;
}

/* ── DARK ── */
:root[data-theme="dark"] {
  --on-accent: #ffffff;
  --bg: #1a1a1a; --panel: #2b2b2b; --panel-2: #333338;
  --ink: #e6e6e6; --ink-2: #b0b0b0; --muted: #808085;
  --line: #3a3a3d; --line-2: #45454a;
  --navy: #0e0e0e; --navy-2: #1a1a1a;
  --accent: #e2362d; --accent-deep: #f04438; --accent-soft: #3a2526; --accent-ink: #f87171;
  --orange: #a1a1aa; --orange-soft: #232327;
  --blue: #a1a1aa;   --blue-soft: #232327;
  --green: #e2362d;  --green-soft: #3a2526;
  --teal: #a1a1aa;   --teal-soft: #232327;
  --gold: #a1a1aa;   --gold-soft: #232327;
  --sky: #a1a1aa; --purple: #a1a1aa;
  --wa: #e2362d;     --wa-soft: #3a2526; --n8n: #e2362d;
}
:root[data-theme="dark"] body { background: var(--bg); }

/* Teks di atas elemen ber-aksen → otomatis kontras (putih di light, hitam di dark) */
.btn-primary, .btn-green, .nav-item.active, .send-btn, .submit, .add-btn,
.pg-add, .qbtn.primary, .mini-btn.connect, .cm-go, .comp-go, .btn-dark {
  color: var(--on-accent) !important;
}
.nav-item.active svg { opacity: 1 !important; }

/* Logo / avatar / bubble bot → solid aksen */
.brand-mark, .avatar, .bs-mark, .logo-mark, .msg-ava.bot, .ai-logo,
.acct-ava, .num-ava { background: var(--accent) !important; color: var(--on-accent) !important; }

/* Badge & pill → aksen + teks kontras */
.nav-badge, .wa-pill, .n8n-pill, .chip, .ai-active-pill,
.qcard-badge, .det-badge { background: var(--accent) !important; color: var(--on-accent) !important; }
.nav-badge.muted { background: var(--line-2) !important; color: var(--ink) !important; }
.nav-item.active .nav-badge { background: rgba(127,127,127,.25) !important; color: var(--on-accent) !important; }

/* Eyebrow / dots */
.eyebrow { background: rgba(127,127,127,.12) !important; border-color: rgba(127,127,127,.28) !important; color: var(--ink) !important; }
.eyebrow .pulse, .engine-pill .dot, .sched-status .dot, .num-meta .dot { background: var(--accent) !important; box-shadow: none !important; }

/* Ikon platform & dekoratif → grayscale elegan */
.pi-linkedin, .pi-threads, .pi-facebook, .pi-reddit, .pi-whatsapp,
.mini-plat, .ni-purple, .ni-blue, .ni-green, .ni-orange, .ni-linkedin, .ni-threads,
.ai-claude, .ai-gemini, .ai-openai, .ai-grok,
.qcard-img, .det-hero, .qimg-1, .qimg-2, .qimg-3,
.t1, .t2, .t3, .t4 { filter: grayscale(1) brightness(.62) contrast(.95) !important; }
:root[data-theme="dark"] .pi-linkedin, :root[data-theme="dark"] .pi-threads,
:root[data-theme="dark"] .pi-facebook, :root[data-theme="dark"] .pi-reddit,
:root[data-theme="dark"] .pi-whatsapp, :root[data-theme="dark"] .mini-plat,
:root[data-theme="dark"] .ni-purple, :root[data-theme="dark"] .ni-blue,
:root[data-theme="dark"] .ni-green, :root[data-theme="dark"] .ni-orange,
:root[data-theme="dark"] .ni-linkedin, :root[data-theme="dark"] .ni-threads,
:root[data-theme="dark"] .ai-claude, :root[data-theme="dark"] .ai-gemini,
:root[data-theme="dark"] .ai-openai, :root[data-theme="dark"] .ai-grok,
:root[data-theme="dark"] .qcard-img, :root[data-theme="dark"] .det-hero,
:root[data-theme="dark"] .t1, :root[data-theme="dark"] .t2,
:root[data-theme="dark"] .t3, :root[data-theme="dark"] .t4 {
  filter: grayscale(1) brightness(1.12) contrast(.9) !important;
}

/* Gradien hero / cta / sidebar → solid gelap (pakai var) */
.hero, .steps-block, .brandside, .side { background: var(--navy) !important; }
.cta-box { background: linear-gradient(135deg, #27272a, #09090b) !important; }
.cta-box h2, .cta-box p { color: #fff !important; }
.cta-box .hero-trust { color: rgba(255,255,255,.6) !important; }
.cta-box .hero-trust svg { color: #fff !important; }

/* Gradient teks judul → solid kontras */
.bs-head em, .bs-head span, .hero h1 span { -webkit-text-fill-color: #fff !important; background: none !important; color: #fff !important; }

/* Switch aktif */
.switch:not(.off), .toggle-big:not(.off) { background: var(--accent) !important; }

/* Stat / feature icon glyph & trend */
.si-green, .si-blue, .si-orange, .si-navy, .si-clay, .si-gold, .si-teal,
.fi-green, .fi-orange, .fi-blue, .fi-navy { color: var(--ink) !important; }
.trend-up { background: var(--accent-soft) !important; color: var(--ink) !important; }

/* Preview bubble WA tetap kebaca di dark */
:root[data-theme="dark"] .wa-bubble { color: #111b21; }
