/*
 * Colour themes (VS Code style). theme.js sets <html data-theme="..." data-mode="light|dark">.
 * Each theme overrides the design tokens from style.css plus syntax (--tk-*) and terminal colours.
 */

/* ---------- defaults: Cloud Light / Cloud Dark (One Light / One Dark syntax) ---------- */
:root {
  color-scheme: light;
  --tk-keyword: #a626a4; --tk-function: #4078f2; --tk-variable: var(--text); --tk-type: #0184bc;
  --tk-string: #50a14f; --tk-number: #986801; --tk-comment: #8b95a8; --tk-tag: #e45649;
  --tk-attribute: #986801; --tk-property: #4078f2; --tk-constant: #0184bc; --tk-punct: #383a42;
  --term-bg: #ffffff; --term-fg: #2b3245;
}
:root[data-mode="dark"] {
  color-scheme: dark;
  --tk-keyword: #c678dd; --tk-function: #61afef; --tk-variable: #e6e9f0; --tk-type: #56b6c2;
  --tk-string: #98c379; --tk-number: #d19a66; --tk-comment: #7f8ba3; --tk-tag: #e06c75;
  --tk-attribute: #d19a66; --tk-property: #61afef; --tk-constant: #56b6c2; --tk-punct: #abb2bf;
  --term-bg: #0f1420; --term-fg: #e6e9f0;
}

/* VS Code Light+ / Dark+ syntax, shared by the "Modern" and "+" themes */
:root[data-theme="light-modern"], :root[data-theme="light-plus"] {
  --tk-keyword: #0000ff; --tk-function: #795e26; --tk-variable: #001080; --tk-type: #267f99;
  --tk-string: #a31515; --tk-number: #098658; --tk-comment: #008000; --tk-tag: #800000;
  --tk-attribute: #e50000; --tk-property: #001080; --tk-constant: #0070c1; --tk-punct: #3b3b3b;
}
:root[data-theme="dark-modern"], :root[data-theme="dark-plus"], :root[data-theme="hc-dark"] {
  --tk-keyword: #569cd6; --tk-function: #dcdcaa; --tk-variable: #9cdcfe; --tk-type: #4ec9b0;
  --tk-string: #ce9178; --tk-number: #b5cea8; --tk-comment: #6a9955; --tk-tag: #569cd6;
  --tk-attribute: #9cdcfe; --tk-property: #9cdcfe; --tk-constant: #4fc1ff; --tk-punct: #d4d4d4;
}

/* ---------- Light Modern ---------- */
:root[data-theme="light-modern"] {
  --bg: #f8f8f8; --surface: #ffffff; --surface-2: #f8f8f8; --border: #e5e5e5; --text: #3b3b3b; --muted: #6e7681;
  --accent: #005fb8; --accent-soft: #e5f0fb; --accent-text: #ffffff; --ok: #2e7d32; --warn: #bf8803; --danger: #e51400;
  --row-hover: #f2f2f2; --row-sel: #e4eefb; --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .04);
  --c-left: #005fb8; --c-right: #c2410c; --c-local: #2e7d32; --term-bg: #ffffff; --term-fg: #3b3b3b;
}
/* ---------- Light+ (classic VS Code light) ---------- */
:root[data-theme="light-plus"] {
  --bg: #f3f3f3; --surface: #ffffff; --surface-2: #f3f3f3; --border: #e4e4e4; --text: #333333; --muted: #717171;
  --accent: #007acc; --accent-soft: #e1effa; --accent-text: #ffffff; --ok: #388a34; --warn: #bf8803; --danger: #e51400;
  --row-hover: #e8e8e8; --row-sel: #cce4f7; --shadow: 0 1px 3px rgb(0 0 0 / .08);
  --c-left: #007acc; --c-right: #c75b12; --c-local: #388a34; --term-bg: #ffffff; --term-fg: #333333;
}
/* ---------- Dark Modern ---------- */
:root[data-theme="dark-modern"] {
  --bg: #181818; --surface: #1f1f1f; --surface-2: #252526; --border: #2b2b2b; --text: #cccccc; --muted: #9d9d9d;
  --accent: #0078d4; --accent-soft: #0e2c46; --accent-text: #ffffff; --ok: #2ea043; --warn: #cca700; --danger: #f85149;
  --row-hover: #2a2d2e; --row-sel: #04395e; --shadow: 0 1px 2px rgb(0 0 0 / .5);
  --c-left: #3794ff; --c-right: #f0883e; --c-local: #3fb950; --term-bg: #181818; --term-fg: #cccccc;
}
/* ---------- Dark+ (classic VS Code dark) ---------- */
:root[data-theme="dark-plus"] {
  --bg: #1e1e1e; --surface: #252526; --surface-2: #2d2d2d; --border: #3c3c3c; --text: #d4d4d4; --muted: #969696;
  --accent: #007acc; --accent-soft: #0c3352; --accent-text: #ffffff; --ok: #89d185; --warn: #cca700; --danger: #f48771;
  --row-hover: #2a2d2e; --row-sel: #094771; --shadow: 0 1px 2px rgb(0 0 0 / .5);
  --c-left: #3794ff; --c-right: #ce9178; --c-local: #89d185; --term-bg: #1e1e1e; --term-fg: #d4d4d4;
}
/* ---------- Monokai ---------- */
:root[data-theme="monokai"] {
  --bg: #1e1f1c; --surface: #272822; --surface-2: #2f302a; --border: #414339; --text: #f8f8f2; --muted: #a59f85;
  --accent: #a6e22e; --accent-soft: #3b4423; --accent-text: #272822; --ok: #a6e22e; --warn: #e6db74; --danger: #f92672;
  --row-hover: #3e3d32; --row-sel: #49483e; --shadow: 0 1px 2px rgb(0 0 0 / .5);
  --c-left: #66d9ef; --c-right: #fd971f; --c-local: #a6e22e; --term-bg: #272822; --term-fg: #f8f8f2;
  --tk-keyword: #f92672; --tk-function: #a6e22e; --tk-variable: #f8f8f2; --tk-type: #66d9ef;
  --tk-string: #e6db74; --tk-number: #ae81ff; --tk-comment: #88846f; --tk-tag: #f92672;
  --tk-attribute: #a6e22e; --tk-property: #66d9ef; --tk-constant: #ae81ff; --tk-punct: #f8f8f2;
}
/* ---------- Dracula ---------- */
:root[data-theme="dracula"] {
  --bg: #21222c; --surface: #282a36; --surface-2: #2f3241; --border: #44475a; --text: #f8f8f2; --muted: #a3a8c7;
  --accent: #bd93f9; --accent-soft: #3d3656; --accent-text: #282a36; --ok: #50fa7b; --warn: #f1fa8c; --danger: #ff5555;
  --row-hover: #343746; --row-sel: #44475a; --shadow: 0 1px 2px rgb(0 0 0 / .5);
  --c-left: #bd93f9; --c-right: #ffb86c; --c-local: #50fa7b; --term-bg: #282a36; --term-fg: #f8f8f2;
  --tk-keyword: #ff79c6; --tk-function: #50fa7b; --tk-variable: #f8f8f2; --tk-type: #8be9fd;
  --tk-string: #f1fa8c; --tk-number: #bd93f9; --tk-comment: #6272a4; --tk-tag: #ff79c6;
  --tk-attribute: #50fa7b; --tk-property: #8be9fd; --tk-constant: #bd93f9; --tk-punct: #f8f8f2;
}
/* ---------- Solarized Dark / Light ---------- */
:root[data-theme="solarized-dark"] {
  --bg: #00212b; --surface: #002b36; --surface-2: #073642; --border: #0f4a57; --text: #93a1a1; --muted: #6c8288;
  --accent: #268bd2; --accent-soft: #0b3c55; --accent-text: #fdf6e3; --ok: #859900; --warn: #b58900; --danger: #dc322f;
  --row-hover: #073642; --row-sel: #0d4a5b; --shadow: 0 1px 2px rgb(0 0 0 / .45);
  --c-left: #268bd2; --c-right: #cb4b16; --c-local: #859900; --term-bg: #002b36; --term-fg: #93a1a1;
  --tk-keyword: #859900; --tk-function: #268bd2; --tk-variable: #93a1a1; --tk-type: #b58900;
  --tk-string: #2aa198; --tk-number: #d33682; --tk-comment: #586e75; --tk-tag: #268bd2;
  --tk-attribute: #cb4b16; --tk-property: #268bd2; --tk-constant: #cb4b16; --tk-punct: #93a1a1;
}
:root[data-theme="solarized-light"] {
  --bg: #eee8d5; --surface: #fdf6e3; --surface-2: #f5efdc; --border: #ddd6c1; --text: #586e75; --muted: #839496;
  --accent: #268bd2; --accent-soft: #e2e9e9; --accent-text: #fdf6e3; --ok: #859900; --warn: #b58900; --danger: #dc322f;
  --row-hover: #f2ecd9; --row-sel: #e4dcc4; --shadow: 0 1px 2px rgb(88 110 117 / .12);
  --c-left: #268bd2; --c-right: #cb4b16; --c-local: #859900; --term-bg: #fdf6e3; --term-fg: #586e75;
  --tk-keyword: #859900; --tk-function: #268bd2; --tk-variable: #586e75; --tk-type: #b58900;
  --tk-string: #2aa198; --tk-number: #d33682; --tk-comment: #93a1a1; --tk-tag: #268bd2;
  --tk-attribute: #cb4b16; --tk-property: #268bd2; --tk-constant: #cb4b16; --tk-punct: #657b83;
}
/* ---------- High contrast ---------- */
:root[data-theme="hc-dark"] {
  --bg: #000000; --surface: #000000; --surface-2: #0b0b0b; --border: #6fc3df; --text: #ffffff; --muted: #d6d6d6;
  --accent: #6fc3df; --accent-soft: #08303b; --accent-text: #000000; --ok: #89d185; --warn: #ffd700; --danger: #f48771;
  --row-hover: #1a1a1a; --row-sel: #0f3a4b; --shadow: none;
  --c-left: #3794ff; --c-right: #f38518; --c-local: #89d185; --term-bg: #000000; --term-fg: #ffffff;
  --tk-comment: #7ca668; --tk-punct: #ffffff;
}
:root[data-theme="hc-light"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f2; --border: #0f4a85; --text: #000000; --muted: #292929;
  --accent: #0f4a85; --accent-soft: #dce8f5; --accent-text: #ffffff; --ok: #374e06; --warn: #895503; --danger: #b5200d;
  --row-hover: #e5ebf1; --row-sel: #cce0f5; --shadow: none;
  --c-left: #0f4a85; --c-right: #8f3900; --c-local: #374e06; --term-bg: #ffffff; --term-fg: #000000;
  --tk-keyword: #0f4a85; --tk-function: #5e2cbc; --tk-variable: #001080; --tk-type: #185e73;
  --tk-string: #a31515; --tk-number: #096d48; --tk-comment: #515151; --tk-tag: #0f4a85;
  --tk-attribute: #264f78; --tk-property: #001080; --tk-constant: #0f4a85; --tk-punct: #000000;
}
:root[data-theme^="hc-"] .card, :root[data-theme^="hc-"] .btn, :root[data-theme^="hc-"] .icon-btn,
:root[data-theme^="hc-"] .field, :root[data-theme^="hc-"] .pane { border-width: 1px; border-color: var(--border); }
:root[data-theme^="hc-"] :focus-visible { outline: 2px solid #f38518; }

/* Smooth colour change when switching themes (not on first paint). */
:root.theme-anim, :root.theme-anim *, :root.theme-anim *::before, :root.theme-anim *::after {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease, fill .25s ease !important;
}

/* ---------- theme picker (VS Code quick pick) ---------- */
#theme-btn { width: 32px; height: 32px; border-radius: 50%; color: var(--accent); }
.qp-backdrop { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / .18); }
.qp {
  position: fixed; z-index: 91; top: 64px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 24px));
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 44px rgb(0 0 0 / .35); overflow: hidden; animation: pop .14s ease-out;
}
.qp input {
  width: calc(100% - 16px); margin: 8px; height: 32px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--accent); background: var(--surface-2); color: var(--text); outline: none; font: inherit;
}
.qp-list { max-height: min(460px, 70vh); overflow: auto; padding: 0 0 6px; }
.qp-group { padding: 8px 14px 4px; font-size: 11px; text-transform: lowercase; color: var(--muted); border-top: 1px solid var(--border); }
.qp-group:first-child { border-top: 0; }
.qp-item { display: flex; align-items: center; gap: 10px; padding: 6px 14px; cursor: pointer; font-size: 13px; }
.qp-item.active { background: var(--accent); color: var(--accent-text); }
.qp-item:not(.active):hover { background: var(--row-hover); }
.qp-sw { display: inline-flex; border-radius: 5px; overflow: hidden; border: 1px solid rgb(128 128 128 / .35); flex: none; }
.qp-sw i { width: 12px; height: 16px; }
.qp-name { flex: 1; }
.qp-tag { font-size: 11px; opacity: .75; }
.qp-hint { padding: 6px 14px 8px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); }