/* ==========================================================================
   TEMA TERANG (default). Tema gelap = gaya dasar di style.css; file ini hanya menimpa saat
   <html data-theme="light">.

   Cara kerja:
   1. Token warna di bawah membalik semua permukaan yang memakai var(--...).
   2. Aturan di bagian 2 membalik warna yang ditulis langsung di style.css.
   3. Class warna Tailwind (text-slate-400, bg-white/5, ...) dibalik oleh theme-light.generated.css
      (dihasilkan otomatis oleh frontend/theme-light.mjs; jangan diedit tangan).
   Panel terminal & code block sengaja tetap gelap di kedua tema (class .dark-surface / .code-block-wrapper).
   ========================================================================== */

html[data-theme="light"] {
  color-scheme: light;

  --bg-app: #f4f6fb;
  --bg-sidebar: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-surface-hover: #eef1f8;
  --bg-input: #ffffff;
  --bg-drawer: #0f172a; /* panel terminal tetap gelap */

  --border-subtle: rgba(15, 23, 42, 0.07);
  --border-default: rgba(15, 23, 42, 0.13);
  --border-glow: rgba(99, 102, 241, 0.5);

  --text-heading: #0f172a;
  --text-main: #334155;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --user-bubble-bg: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  --user-bubble-border: rgba(99, 102, 241, 0.3);
  --user-bubble-text: #1e1b4b;

  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 14px -2px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.2);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. WARNA YANG DITULIS LANGSUNG DI style.css
   -------------------------------------------------------------------------- */
html[data-theme="light"] ::selection {
  background: rgba(99, 102, 241, 0.25);
  color: #1e1b4b;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
}

html[data-theme="light"] #persona-select {
  color: var(--text-heading) !important;
}
html[data-theme="light"] select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}
html[data-theme="light"] select option:checked,
html[data-theme="light"] select option:hover {
  background-color: #eef2ff !important;
  color: #4338ca !important;
}

html[data-theme="light"] .antigravity-action-line .action-cmd { color: #0369a1; }

html[data-theme="light"] .stepper-item.active,
html[data-theme="light"] .stepper-icon.current { color: #0369a1; }
html[data-theme="light"] .stepper-item.completed,
html[data-theme="light"] .stepper-icon.done { color: #047857; }
html[data-theme="light"] .activity-orb { background: #0284c7; }

html[data-theme="light"] .thinking-header { color: #7e22ce; }

html[data-theme="light"] .prose-custom h4,
html[data-theme="light"] .prose-custom h5,
html[data-theme="light"] .prose-custom h6 { color: #334155; }
html[data-theme="light"] .prose-custom strong { color: #0f172a; }
html[data-theme="light"] .prose-custom em { color: #475569; }
html[data-theme="light"] .prose-custom a { color: #0369a1; }
html[data-theme="light"] .prose-custom a:hover { color: #0c4a6e; }

html[data-theme="light"] .table-wrapper,
html[data-theme="light"] .prose-custom table { border-color: rgba(15, 23, 42, 0.14); }
html[data-theme="light"] .prose-custom thead { background: rgba(15, 23, 42, 0.05); }
html[data-theme="light"] .prose-custom th {
  border-bottom-color: rgba(15, 23, 42, 0.14);
  border-right-color: rgba(15, 23, 42, 0.07);
}
html[data-theme="light"] .prose-custom td {
  border-bottom-color: rgba(15, 23, 42, 0.07);
  border-right-color: rgba(15, 23, 42, 0.05);
}
html[data-theme="light"] .prose-custom tbody tr:nth-child(even) { background: rgba(15, 23, 42, 0.025); }
html[data-theme="light"] .prose-custom tbody tr:hover { background: rgba(99, 102, 241, 0.07); }

html[data-theme="light"] .prose-custom code:not(pre code) {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.22);
  color: #4338ca;
}

/* Header code block tetap gelap (menyatu dengan isi code block yang gelap) */
html[data-theme="light"] .code-header {
  background: #1e293b;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
html[data-theme="light"] .code-header button { color: #cbd5e1; }
html[data-theme="light"] .code-header button:hover { color: #ffffff; }

html[data-theme="light"] .modal-overlay { background-color: rgba(15, 23, 42, 0.45); }
html[data-theme="light"] #sidebar-backdrop { background: rgba(15, 23, 42, 0.4); }

html[data-theme="light"] .attachment-chip img { border-color: rgba(15, 23, 42, 0.14); }

/* Permukaan yang harus tetap gelap: panel terminal/log, logo, dan panel kode artifact */
html[data-theme="light"] .dark-surface {
  background-color: #0f172a;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Banner Mode Code (gradasi gelap -> terang) dan kartu-kartu dengan latar slate gelap */
html[data-theme="light"] .bg-gradient-to-r.from-indigo-950\/70 {
  background-image: none;
  background-color: #eef2ff;
}