/* Tema tampilan. Dipilih lewat atribut data-theme di <html> (diatur theme.js). Tanpa JS = tema Terang. */

:root, :root[data-theme="terang"] {
  color-scheme: light;
  --bg: #f6f5f1; --panel: #ffffff; --card: #ffffff; --text: #0f172a; --muted: #64748b; --border: #e2e8f0;
  --accent: #059669; --accent-hover: #047857; --accent-soft: #ecfdf5; --danger: #dc2626;
  --user-bubble: #0f172a; --user-text: #f8fafc; --bot-bubble: #f1f5f9; --code: #f1f5f9;
  --warn-bg: #fffbeb; --warn-text: #92400e;
  --logo-grad: linear-gradient(135deg, #059669, #84cc16, #facc15); --logo-text: #0b0f17;
}

/* ---------- Gelap ---------- */
:root[data-theme="dongker"] {
  color-scheme: dark;
  --bg: #0a1229; --panel: #101c3d; --card: #101c3d; --text: #e6ecff; --muted: #9aa8cf; --border: #1d2c57;
  --accent: #3b82f6; --accent-hover: #60a5fa; --accent-soft: #14275c; --danger: #f87171;
  --user-bubble: #2563eb; --user-text: #fff; --bot-bubble: #16244b; --code: #0a1330;
  --warn-bg: #3a2a05; --warn-text: #fcd34d;
  --logo-grad: linear-gradient(135deg, #1d4ed8, #3b82f6, #38bdf8); --logo-text: #fff;
}
:root[data-theme="senja"] {
  color-scheme: dark;
  --bg: #150e29; --panel: #1f1640; --card: #1f1640; --text: #efe9ff; --muted: #b3a6d9; --border: #33275e;
  --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-soft: #2c2057; --danger: #f87171;
  --user-bubble: #7c3aed; --user-text: #fff; --bot-bubble: #281d4f; --code: #110a22;
  --warn-bg: #3a2a05; --warn-text: #fcd34d;
  --logo-grad: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b); --logo-text: #fff;
}
:root[data-theme="hutan"] {
  color-scheme: dark;
  --bg: #08160f; --panel: #0f2418; --card: #0f2418; --text: #e4f5ea; --muted: #8fb5a0; --border: #1b3a29;
  --accent: #34d399; --accent-hover: #6ee7b7; --accent-soft: #0f3324; --danger: #f87171;
  --user-bubble: #059669; --user-text: #fff; --bot-bubble: #143022; --code: #07120c;
  --warn-bg: #3a2a05; --warn-text: #fcd34d;
  --logo-grad: linear-gradient(135deg, #047857, #34d399, #bef264); --logo-text: #06140d;
}

/* ---------- Warna-warni (terang) ---------- */
:root[data-theme="samudra"] {
  color-scheme: light;
  --bg: #eaf4ff; --panel: #ffffff; --card: #ffffff; --text: #0c2340; --muted: #5b7396; --border: #cfe2f7;
  --accent: #0284c7; --accent-hover: #0369a1; --accent-soft: #e0f2fe; --danger: #dc2626;
  --user-bubble: #0284c7; --user-text: #fff; --bot-bubble: #eef5fd; --code: #eef5fd;
  --warn-bg: #fffbeb; --warn-text: #92400e;
  --logo-grad: linear-gradient(135deg, #0369a1, #0ea5e9, #67e8f9); --logo-text: #06243d;
}
:root[data-theme="ungu"] {
  color-scheme: light;
  --bg: #f4f0ff; --panel: #ffffff; --card: #ffffff; --text: #231541; --muted: #7a6a9f; --border: #e3d9fb;
  --accent: #7c3aed; --accent-hover: #6d28d9; --accent-soft: #ede9fe; --danger: #dc2626;
  --user-bubble: #7c3aed; --user-text: #fff; --bot-bubble: #f3effd; --code: #f3effd;
  --warn-bg: #fffbeb; --warn-text: #92400e;
  --logo-grad: linear-gradient(135deg, #6d28d9, #a855f7, #f0abfc); --logo-text: #fff;
}
:root[data-theme="mawar"] {
  color-scheme: light;
  --bg: #fff0f5; --panel: #ffffff; --card: #ffffff; --text: #3b0d22; --muted: #9a6079; --border: #fbd5e3;
  --accent: #db2777; --accent-hover: #be185d; --accent-soft: #fce7f3; --danger: #dc2626;
  --user-bubble: #db2777; --user-text: #fff; --bot-bubble: #fdf0f5; --code: #fdf0f5;
  --warn-bg: #fffbeb; --warn-text: #92400e;
  --logo-grad: linear-gradient(135deg, #be185d, #f472b6, #fda4af); --logo-text: #fff;
}
:root[data-theme="jingga"] {
  color-scheme: light;
  --bg: #fff6ec; --panel: #ffffff; --card: #ffffff; --text: #3a1d06; --muted: #946a43; --border: #fde0c2;
  --accent: #ea580c; --accent-hover: #c2410c; --accent-soft: #ffedd5; --danger: #dc2626;
  --user-bubble: #ea580c; --user-text: #fff; --bot-bubble: #fff3e6; --code: #fff3e6;
  --warn-bg: #fffbeb; --warn-text: #92400e;
  --logo-grad: linear-gradient(135deg, #c2410c, #f97316, #fde047); --logo-text: #2a1204;
}

/* Pemilih tema di topbar */
.theme-picker { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.theme-picker select {
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  border-radius: 10px; padding: 5px 8px; cursor: pointer;
}