/* Toopix design tokens. Default: follow the VS Code theme. With body.brand-toopix:
   Toopix navy + teal #00ACA2 (from the official Toopix logo). High-contrast themes always
   keep the VS Code colours for accessibility. */
:root {
  --tp-bg: var(--vscode-sideBar-background, var(--vscode-editor-background));
  --tp-surface: var(--vscode-editorWidget-background, var(--vscode-editor-background));
  --tp-surface-2: var(--vscode-input-background);
  --tp-border: var(--vscode-panel-border, var(--vscode-widget-border, rgba(128,128,128,.35)));
  --tp-text: var(--vscode-foreground);
  --tp-muted: var(--vscode-descriptionForeground);
  --tp-accent: var(--vscode-textLink-foreground);
  --tp-accent-text: var(--vscode-button-foreground);
  --tp-button: var(--vscode-button-background);
  --tp-button-hover: var(--vscode-button-hoverBackground);
  --tp-ok: var(--vscode-testing-iconPassed, #3fb950);
  --tp-bad: var(--vscode-testing-iconFailed, #f85149);
  --tp-warn: var(--vscode-editorWarning-foreground, #cca700);
  --tp-code: var(--vscode-textCodeBlock-background);
  --tp-font: var(--vscode-font-family);
  --tp-mono: var(--vscode-editor-font-family);
  --tp-radius: 8px;
}

body.brand-toopix:not(.vscode-high-contrast):not(.vscode-high-contrast-light) {
  --tp-bg: #0c111c;
  --tp-surface: #162131;
  --tp-surface-2: #1c2b3d;
  --tp-border: #334456;
  --tp-text: #f0f5fa;
  --tp-muted: #afbfce;
  --tp-accent: #00ACA2;
  --tp-accent-text: #0c111c;
  --tp-button: #00ACA2;
  --tp-button-hover: #1FC4B9;
  --tp-ok: #2BC9B4;
  --tp-bad: #ff7b72;
  --tp-warn: #f2cc60;
  --tp-code: #101826;
}

body.brand-toopix.vscode-light:not(.vscode-high-contrast-light) {
  --tp-bg: #f6f9fc;
  --tp-surface: #ffffff;
  --tp-surface-2: #eef3f8;
  --tp-border: #d3dde7;
  --tp-text: #0c111c;
  --tp-muted: #4b5d70;
  --tp-accent: #00807A;
  --tp-accent-text: #ffffff;
  --tp-button: #00807A;
  --tp-button-hover: #006B66;
  --tp-ok: #00807A;
  --tp-bad: #c62828;
  --tp-warn: #9a6700;
  --tp-code: #eef3f8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  color: var(--tp-text);
  background: var(--tp-bg);
  font-family: var(--tp-font);
  font-size: var(--vscode-font-size, 13px);
  line-height: 1.45;
}

button {
  font: inherit;
  color: var(--tp-accent-text);
  background: var(--tp-button);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font-weight: 600;
}
button:hover:not(:disabled) { background: var(--tp-button-hover); }
button:disabled { opacity: .5; cursor: default; }
button.secondary { color: var(--tp-text); background: transparent; border-color: var(--tp-border); font-weight: 500; }
button.secondary:hover:not(:disabled) { background: var(--tp-surface-2); }
button.icon { background: transparent; color: var(--tp-muted); padding: 2px 7px; border: none; font-weight: 500; }
button.icon:hover { background: var(--tp-surface-2); color: var(--tp-text); }
button.link { background: none; border: none; padding: 0; color: var(--tp-accent); text-decoration: underline; font-weight: 500; }
button.danger { background: transparent; color: var(--tp-bad); border-color: var(--tp-bad); font-weight: 500; }

input, textarea, select {
  font: inherit;
  color: var(--tp-text);
  background: var(--tp-surface-2);
  border: 1px solid var(--tp-border);
  border-radius: 6px;
  padding: 5px 8px;
}
input:focus, textarea:focus, select:focus { border-color: var(--tp-accent); outline: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid var(--vscode-focusBorder, var(--tp-accent));
  outline-offset: 1px;
}
.muted { color: var(--tp-muted); font-size: .92em; }
.eyebrow { font-size: .72em; letter-spacing: .12em; font-weight: 700; color: var(--tp-muted); }
.accent-bar { width: 26px; height: 4px; border-radius: 2px; background: var(--tp-accent); }
.card { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); padding: 8px 10px; }
.chip { font-family: var(--tp-mono); font-size: .85em; padding: 0 6px; border-radius: 4px; background: var(--tp-surface-2); border: 1px solid var(--tp-border); overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: .78em; font-weight: 700; padding: 0 8px; border-radius: 10px; border: 1px solid currentColor; }
.badge.ok { color: var(--tp-ok); } .badge.bad { color: var(--tp-bad); } .badge.blocked { color: var(--tp-warn); } .badge.draft { color: var(--tp-accent); }
.warn-text { color: var(--tp-warn); }
.logo { width: 26px; height: 26px; border-radius: 6px; }
@media (forced-colors: active) { .chip, .badge, .card { border: 1px solid CanvasText; } }