/* src/styles/themes.css */

/* =========================================================
   0) Semantic layer + component aliases (GLOBAL, once)
   ========================================================= */

/* Defaults (in case a variable is missing in a theme) */
:root {
  /* =========================================================
     Compatibility + missing semantic roles (GLOBAL, once)
     ========================================================= */

     /* Canvas / Plot Map */
--canvas-bg: var(--editor-bg);
--canvas-fg: var(--fg);

--canvas-grid-dot: color-mix(in srgb, var(--fg) 10%, transparent);
--canvas-grid-opacity: 0.6;

--canvas-node-bg: var(--surface-2);
--canvas-node-border: var(--border-2);
--canvas-node-fg: var(--fg);
--canvas-node-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);

--canvas-node-head-bg: var(--surface-1);
--canvas-node-head-border: var(--border);

--canvas-node-title-fg: var(--fg);
--canvas-node-body-fg: var(--fg-muted);

--canvas-badge-bg: var(--surface-3);
--canvas-badge-border: var(--border);
--canvas-badge-fg: var(--fg-muted);

--canvas-icon-btn-fg: var(--fg-dim);
--canvas-icon-btn-hover-fg: var(--fg);

--canvas-resize-fg: var(--fg-dim);

--canvas-toolbar-bg: color-mix(in srgb, var(--surface-2) 88%, transparent);
--canvas-toolbar-border: var(--border-2);

--canvas-btn-bg: var(--surface-2);
--canvas-btn-border: var(--border-2);
--canvas-btn-fg: var(--fg);
--canvas-btn-hover-bg: var(--surface-hover);
--canvas-btn-hover-border: var(--border-2);

--canvas-zoom-fg: var(--fg-muted);

--canvas-node-scene: var(--sdp-graph-node-scene, #8ab4f8);
--canvas-node-plot: var(--sdp-graph-node-thread, #c58af9);
     /* Pane surface (used by wrappers like SpecialTabWrapper) */
  --plot-btn-hover-border: var(--titlebar-search-border, var(--border-2));
  --plot-drop-hint-bg: rgba(0, 122, 204, 0.10);
  --plot-drop-hint-border: rgba(0, 122, 204, 0.65);
  --sidebar-indicator: var(--accent, #007acc);
  --pane-bg: var(--editor-bg);
  --pane-border: var(--border);
  /* Sidebar */
  --sidebar-border: var(--border, #2b2b2b);

  /* Panes / splitters */
  --pane-splitter: var(--border, #2b2b2b);
  --pane-splitter-hover: var(--accent, #007acc);

  /* ---- StatusBar tokens (used by StatusBar.vue) ---- */
  --sb-bg: var(--statusbar-bg, var(--surface-0, var(--wb-bg, #181818)));
  --sb-border: var(--border, #2b2b2b);
  --sb-fg: var(--fg, #cccccc);
  --sb-fg-muted: var(--fg-muted, #9d9d9d);
  --sb-hover: var(--statusbar-hover, var(--surface-hover, rgba(255, 255, 255, 0.06)));

  /* ---- Pills (wordcount %, etc) ---- */
  --pill-bg: var(--statusbar-pill-bg, var(--surface-2, #252526));
  --pill-border: var(--border, #2b2b2b);
  --pill-fg: var(--fg-muted, #9d9d9d);

  /* ---- Popovers / menus (used by Welcome theme picker + SB menus) ---- */
  --popover-bg: var(--surface-2, #252526);
  --popover-border: var(--divider-2, var(--border-2, #3a3a3a));
  --popover-fg: var(--fg, #cccccc);

  --popover-item-hover: var(--surface-hover, rgba(255, 255, 255, 0.06));
  --popover-sep: var(--divider-2, var(--divider, #2a2a2a));

  --popover-input-bg: var(--input-bg, #1a1a1a);
  --popover-input-border: var(--divider-2, var(--border-2, #3a3a3a));
  --popover-input-focus: var(--accent, #007acc);

  /* ---- Word goal progress background (StatusBar words gradient) ---- */
  /* fallback safe; each theme can override with its own nice rgba */
  --goal-progress: rgba(0, 122, 204, 0.25);

  /* ---- Links used in popovers ---- */
  --link-fg: var(--fg-muted, #9d9d9d);
  --link-hover: var(--fg-invert, #ffffff);

  /* Hover/pressed surface roles used by multiple components */
  --surface-hover: var(--list-hover, color-mix(in srgb, var(--fg, #ccc) 6%, transparent));
  --surface-pressed: var(--active-bg, color-mix(in srgb, var(--fg, #ccc) 10%, transparent));

  /* Text aliases (some components use --text / --text-muted / --text-strong) */
  --text-primary: var(--fg, #cccccc);
  --text-secondary: var(--fg-muted, #9d9d9d);
  --text-dim: var(--fg-dim, #888888);
  --text-invert: var(--fg-invert, #ffffff);

  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-strong: var(--text-primary);

  --border-strong: var(--border, #2b2b2b);
  --border-stronger: var(--border-2, #3a3a3a);

  /* Semantic colors (ProblemsTab uses these) */
  --semantic-error: var(--danger, #f14c4c);
  --semantic-warning: var(--warn, #fbbf24);
  --semantic-info: var(--accent, #007acc);
  --semantic-success: var(--success, #22c55e);

  /* -------- Semantic roles (derived from foundation tokens) -------- */
  /* Keep panels as "surface-1" (depth) */
  --panel-bg: var(--surface-1, var(--editor-bg, #1e1e1e));
  --panel-border: var(--border, #2b2b2b);

  --menu-bg: var(--surface-2, #252526);
  --menu-border: var(--border-2, #3a3a3a);
  --menu-hover-bg: var(--list-hover, #37373d);
  --menu-title-fg: var(--fg-muted, #9d9d9d);

  --focus-accent: var(--accent, #007acc);

  --empty-bg: var(--editor-bg, #1e1e1e);
  --empty-fg: var(--fg-muted, #9d9d9d);

  /* =========================================================
     IMPORTANT (Solution B)
     - EditorWrapper must match editor/active tab background exactly.
     ========================================================= */
  --ew-bg: var(--editor-bg, #1e1e1e);

  /* Tabbar: active tab must NOT change color on hover */
  --tab-bg-active-hover: var(--tab-bg-active, var(--editor-bg, #1e1e1e));

  /* -------- Component aliases (keep Vue unchanged) -------- */

  /* EditorWrapper */
  --ew-toolbar-fg: var(--text-primary);
  --ew-toolbar-fg-muted: var(--text-secondary);
  --ew-toolbar-fg-dim: var(--text-dim);

  --ew-menu-bg: var(--menu-bg);
  --ew-menu-border: var(--menu-border);
  --ew-menu-hover: var(--menu-hover-bg);
  --ew-menu-title: var(--menu-title-fg);

  --ew-empty-bg: var(--empty-bg);
  --ew-empty-fg: var(--empty-fg);

  /* Segmented control (Editor | Structure) */
  --ew-seg-bg: var(--surface-0, var(--wb-bg, #181818));
  --ew-seg-border: var(--border-2, #3a3a3a);
  --ew-seg-sep: var(--divider-2, #3c3c3c);
  --ew-seg-fg: var(--text-secondary);
  --ew-seg-hover-bg: var(--active-bg, #2a2a2a);
  --ew-seg-hover-fg: var(--text-invert);
  /* Solution B: active segment should sit on editor bg, not surface-1 */
  --ew-seg-active-bg: var(--ew-bg);
  --ew-seg-active-fg: var(--text-invert);

  /* EditorShell */
  /* If your toolbar must match editor exactly, switch to var(--ew-bg).
     Keeping panel-bg preserves "depth" for toolbars in some layouts. */
  --esh-toolbar-bg: var(--tab-bg-active, var(--editor-bg));
  --esh-toolbar-fg: var(--text-primary);
  --esh-toolbar-border: var(--panel-border);

  --esh-splitter: var(--panel-border);
  --esh-splitter-hover: var(--focus-accent);

  /* =========================================================
     Welcome screen tokens (GLOBAL defaults)
     so every theme has hover/colors even if it doesn't override
     ========================================================= */
  --welcome-fg: var(--fg, #cccccc);
  --welcome-fg-muted: var(--fg-muted, #9d9d9d);
  --welcome-fg-dim: var(--fg-dim, #888888);
  --welcome-fg-subtle: var(--fg-subtle, #666666);

  --welcome-title: var(--fg, #cccccc);
  --welcome-tagline: var(--fg-dim, #888888);
  --welcome-section: var(--fg-muted, #9d9d9d);

  /* robust hover fallback (works even if list-hover is missing/too subtle) */
  --welcome-link-hover: var(--list-hover, color-mix(in srgb, var(--fg, #ccc) 8%, transparent));

  --welcome-card-bg: var(--surface-1, var(--editor-bg, #1e1e1e));
  --welcome-card-hover: var(--list-hover, color-mix(in srgb, var(--fg, #ccc) 6%, transparent));
  --welcome-card-border: var(--border, #2b2b2b);

  --welcome-time: var(--fg-subtle, #666666);
  --welcome-time-hover: var(--fg-dim, #888888);

  --welcome-refresh: var(--fg-dim, #888888);
  --welcome-refresh-hover: var(--fg, #cccccc);

  --welcome-empty: var(--fg-subtle, #666666);

  --welcome-avatar-bg: var(--surface-2, #252526);
  --welcome-avatar-fg: var(--fg, #cccccc);

  /* =========================================================
     MachinesView (subtabs) tokens — GLOBAL defaults
     Ensures tabs look OK in every theme.
     ========================================================= */
  --mv-bg: var(--editor-bg, #1e1e1e);
  --mv-fg: var(--fg, #cccccc);
  --mv-muted: var(--fg-muted, #9d9d9d);

  --mv-bar-bg: var(--surface-1, var(--editor-bg, #1e1e1e));
  --mv-bar-border: var(--border, #2b2b2b);

  --mv-tab-idle-bg: var(--mv-bar-bg);
  --mv-tab-idle-fg: var(--mv-muted);
  --mv-tab-hover-bg: var(--surface-2, #252526);
  --mv-tab-hover-fg: var(--fg, #cccccc);

  --mv-tab-active-bg: var(--surface-2, #252526);
  --mv-tab-active-fg: var(--fg, #cccccc); /* IMPORTANT: not fg-invert */
  --mv-tab-active-underline: var(--accent, #007acc);

  --mv-tab-sep: var(--divider, #2a2a2a);

  /* sizing */
  --mv-bar-h: 33px;
  --mv-tab-pad-x: 16px;
  --mv-tab-min-w: 45px;

  /* “expanding active tab” */
  --mv-tab-active-grow: 3;
  --mv-tab-idle-grow: 1;

  /* =========================================================
     Settings page (semantic tokens)
     - default values (theme may override)
     ========================================================= */
  --settings-bg: var(--editor-bg);

  --settings-topbar-bg: var(--surface-1);
  --settings-topbar-border: var(--divider);

  --settings-sidebar-bg: var(--surface-1);
  --settings-sidebar-border: var(--divider);

  --settings-title: var(--text-primary);
  --settings-section: var(--text-secondary);
  --settings-muted: var(--text-secondary);

  --settings-search-bg: var(--surface-2);
  --settings-search-border: var(--border-2);
  --settings-search-fg: var(--text-primary);
  --settings-search-placeholder: var(--text-dim);
  --settings-search-icon: var(--text-dim);
  --settings-search-focus: var(--accent);

  --settings-scope-active-bg: var(--active-bg);
  --settings-scope-active-border: var(--border-2);
  --settings-scope-active-fg: var(--text-invert);

  --settings-scope-idle-bg: transparent;
  --settings-scope-idle-border: var(--divider);
  --settings-scope-idle-fg: var(--text-secondary);
  --settings-scope-idle-hover-bg: var(--active-bg);

  --settings-hint: var(--text-secondary);
  --settings-count: var(--text-secondary);

  --settings-cat-active-bg: var(--active-bg);
  --settings-cat-active-fg: var(--text-invert);
  --settings-cat-idle-fg: var(--text-secondary);
  --settings-cat-idle-hover-bg: var(--active-bg);

  --settings-row-bg: var(--surface-3);
  --settings-row-border: var(--divider);

  --settings-row-title: var(--text-primary);
  --settings-row-id: var(--text-secondary);
  --settings-row-desc: var(--text-secondary);

  --settings-field-bg: var(--surface-2);
  --settings-field-border: var(--border-2);
  --settings-field-fg: var(--text-primary);
  --settings-field-focus: var(--accent);

  --settings-toggle-on-bg: var(--accent-2);
  --settings-toggle-on-border: var(--accent-2);
  --settings-toggle-off-bg: var(--active-bg);
  --settings-toggle-off-border: var(--border-2);
  --settings-toggle-knob: #ffffff;

  --settings-primary-bg: var(--accent-2);
  --settings-primary-hover: var(--accent-hover);
  --settings-primary-fg: var(--text-invert);

  --settings-reset-fg: var(--text-secondary);
  --settings-reset-border: var(--divider);
  --settings-reset-hover-bg: var(--active-bg);

  /* =========================================================
     New Project page (semantic tokens)
     ========================================================= */
  --np-bg: var(--editor-bg);
  --np-fg: var(--fg);
  --np-title-fg: var(--fg-invert);
  --np-heading-fg: var(--fg-muted);
  --np-muted-fg: var(--fg-muted);
  --np-dim-fg: var(--fg-dim);

  --np-input-bg: var(--input-bg-2);
  --np-input-border: var(--border-2);
  --np-input-fg: var(--fg);
  --np-input-placeholder: var(--fg-dim);
  --np-focus: var(--accent);

  --np-card-bg: var(--surface-2);
  --np-card-hover-bg: var(--list-hover);
  --np-card-border: var(--border-2);

  --np-pill-bg: var(--surface-1);
  --np-pill-border: var(--border-2);
  --np-pill-fg: var(--fg-muted);

  --np-filter-idle-bg: var(--surface-1);
  --np-filter-idle-border: var(--border-2);
  --np-filter-idle-fg: var(--fg-muted);
  --np-filter-idle-hover-border: var(--fg-subtle);

  --np-filter-active-bg: var(--accent);
  --np-filter-active-border: var(--accent);
  --np-filter-active-fg: var(--fg-invert);

  --np-primary-bg: var(--accent);
  --np-primary-hover-bg: var(--accent-hover);
  --np-primary-fg: var(--fg-invert);

  --np-secondary-btn-bg: var(--active-bg);
  --np-secondary-btn-border: var(--border-2);
  --np-secondary-btn-fg: var(--fg);
  --np-secondary-btn-hover-bg: var(--list-hover);

  --np-modal-overlay: rgba(0, 0, 0, 0.75);
  --np-modal-bg: var(--surface-1);
  --np-modal-border: var(--border-2);

  --np-warn-fg: #fbbf24;
  --np-error-fg: #f87171;

  --np-danger-bg: #dc2626;
  --np-danger-border: #b91c1c;
  --np-danger-hover-bg: #b91c1c;

  --np-scrollbar-thumb: var(--scrollbar-thumb);
  --np-scrollbar-thumb-hover: var(--scrollbar-thumb-hover);
  --np-scrollbar-track: var(--editor-bg);

  --np-control-accent: var(--accent);

  --np-back-fg: var(--fg-muted);
  --np-back-hover-fg: var(--fg);
  --np-back-focus: var(--accent);

  /* =========================================================
     New Component page (semantic tokens)
     ========================================================= */
  --nc-bg: var(--editor-bg);
  --nc-fg: var(--fg);

  --nc-heading-fg: var(--fg-muted);
  --nc-muted-fg: var(--fg-muted);
  --nc-dim-fg: var(--fg-dim);

  --nc-input-bg: var(--input-bg-2);
  --nc-input-border: var(--border-2);
  --nc-input-fg: var(--fg);
  --nc-input-placeholder: var(--fg-dim);
  --nc-focus: var(--accent);

  --nc-card-bg: var(--surface-2);
  --nc-card-hover-bg: var(--list-hover);
  --nc-card-border: var(--border-2);

  --nc-pill-bg: var(--surface-1);
  --nc-pill-border: var(--border-2);
  --nc-pill-fg: var(--fg-muted);

  --nc-filter-active-bg: var(--accent);
  --nc-filter-active-border: var(--accent);
  --nc-filter-active-fg: var(--fg-invert);

  --nc-filter-idle-bg: var(--surface-1);
  --nc-filter-idle-border: var(--border-2);
  --nc-filter-idle-fg: var(--fg-muted);
  --nc-filter-idle-hover-border: var(--fg-subtle);

  --nc-primary-bg: var(--accent);
  --nc-primary-hover-bg: var(--accent-hover);
  --nc-primary-fg: var(--fg-invert);

  --nc-panel-bg: var(--surface-2);
  --nc-panel-border: var(--border-2);

  --nc-back-fg: var(--fg-muted);
  --nc-back-hover-fg: var(--fg);
  --nc-back-focus: var(--accent);

  --nc-error-fg: #f87171;

  /* Monaco overlays / decorations */
  --monaco-search-hit-bg: rgba(234, 179, 8, 0.25);
  --monaco-search-hit-line-bg: rgba(4, 57, 94, 0.18);

  --monaco-placeholder-fg: var(--fg);
  --monaco-link-fg: #58a6ff;
  --monaco-link-broken-fg: rgba(255, 160, 160, 1);

  --monaco-hover-bg: var(--surface-1);
  --monaco-hover-border: rgba(255, 255, 255, 0.10);
  --monaco-hover-title-fg: var(--fg);
  --monaco-hover-body-fg: var(--fg);

  --monaco-hover-shadow: 0 10px 35px rgba(0, 0, 0, 0.55);
  --monaco-minimap-shadow: rgba(0, 0, 0, 0.35);

  /* Tree (Explorer) */
  --tree-row-fg: var(--fg);
  --tree-row-fg-muted: var(--fg-muted);
  --tree-row-fg-dim: var(--fg-dim);
  --tree-row-fg-invert: var(--fg-invert);

  --tree-icon-fg: var(--fg-muted);
  --tree-icon-fg-strong: var(--fg);

  --tree-row-hover-bg: var(--list-hover);
  --tree-row-focus-bg: var(--list-hover);
  --tree-row-selected-bg: var(--selection-bg);
  --tree-row-selected-border: var(--accent);
  --tree-row-drop-border: var(--accent);

  --tree-menu-bg: var(--surface-3);
  --tree-menu-border: var(--border-2);
  --tree-menu-hover-bg: var(--active-bg);
  --tree-menu-fg: var(--fg);
  --tree-menu-fg-muted: var(--fg-muted);
  --tree-menu-danger-fg: var(--danger-fg, #ffb4b4);
  --tree-menu-danger-icon: var(--danger, #f14c4c);

  --tree-input-fg: var(--fg-invert);
  --tree-input-border: var(--border-2);
  --tree-input-focus-ring: var(--focus-ring);

  --tree-divider: var(--divider);

  /* Git decorations */
  --git-modified: #e2c08d;
  --git-added: #73c991;
  --git-deleted: #f14c4c;
  --git-renamed: #c586c0;

  --git-staged-opacity: 0.70;
  --git-unstaged-opacity: 0.55;

  /* =========================================================
     SearchPanel (component aliases)
     ========================================================= */
  --sp-bg: var(--surface-2);
  --sp-border: var(--border-2);

  --sp-divider: var(--divider-2);

  --sp-empty-fg: var(--fg-muted);

  --sp-row-fg: var(--fg);
  --sp-row-title-fg: var(--fg-invert);
  --sp-row-meta-fg: var(--fg-dim);

  --sp-row-hover-bg: color-mix(in srgb, var(--list-hover) 55%, transparent);
  --sp-row-hover-fg: var(--fg);

  --sp-row-active-bg: var(--selection-bg);
  --sp-row-active-fg: var(--fg-invert);

  --sp-icon-fg: var(--fg-muted);

  --sp-command-fg: var(--accent);
  --sp-command-icon: var(--accent);

  --sp-hit-bg: var(--monaco-search-hit-bg);
  --sp-hit-fg: var(--fg-invert);

  --sp-scrollbar-thumb: var(--scrollbar-thumb);
  --sp-scrollbar-thumb-hover: var(--scrollbar-thumb-hover);
  --sp-scrollbar-track: var(--surface-2);

  /* =========================================================
     SidePanel (component aliases)
     ========================================================= */
  --sdp-bg: var(--editor-bg);
  --sdp-fg: var(--fg);
  --sdp-muted: var(--fg-dim);
  --sdp-title: var(--fg-invert);

  --sdp-border: var(--border-2);
  --sdp-graph-divider: var(--divider);

  --sdp-tab-active-bg: var(--surface-2);
  --sdp-tab-active-fg: var(--fg);
  --sdp-tab-idle-fg: var(--fg-muted);
  --sdp-tab-hover-bg: var(--surface-2);

  --sdp-section-title: var(--fg);
  --sdp-section-hover-bg: var(--surface-2);

  --sdp-icon-muted: var(--fg-muted);
  --sdp-icon-strong: var(--fg-invert);
  --sdp-icon: var(--fg-muted);

  --sdp-input-bg: var(--input-bg);
  --sdp-input-fg: var(--fg);
  --sdp-input-border: var(--border-2);
  --sdp-input-placeholder: var(--fg-dim);
  --sdp-focus: var(--accent);

  --sdp-accent: var(--accent);
  --sdp-danger: var(--danger, #f14c4c);
  --sdp-error-fg: var(--danger-fg, #ffb4b4);

  --sdp-card-bg: var(--surface-2);
  --sdp-card-hover-bg: var(--list-hover);
  --sdp-card-border: var(--border-2);

  --sdp-attached-bg: var(--surface-3);
  --sdp-attached-hover-bg: var(--list-hover);

  --sdp-pill-bg: var(--surface-1);
  --sdp-pill-border: var(--border-2);
  --sdp-pill-fg: var(--fg-muted);

  --sdp-chip-bg: var(--surface-1);
  --sdp-chip-border: var(--border-2);
  --sdp-chip-fg: var(--fg);

  --sdp-thread-bg: var(--surface-1);
  --sdp-thread-border: var(--border-2);
  --sdp-thread-fg: var(--fg-muted);

  --sdp-dropdown-bg: var(--surface-2);
  --sdp-dropdown-border: var(--border-2);
  --sdp-dropdown-hover-bg: var(--active-bg);

  --sdp-graph-card-bg: var(--surface-3);

  /* Graph panel buttons default to theme via --sdp-tool* tokens; themes can override if desired */
  --sdp-tool-bg: rgba(255, 255, 255, 0.04);
  --sdp-tool-border: rgba(255, 255, 255, 0.08);
  --sdp-tool-fg: rgba(232, 234, 237, 0.90);
  --sdp-tool-hover-bg: rgba(255, 255, 255, 0.08);
  --sdp-tool-hover-border: rgba(255, 255, 255, 0.14);

  --sdp-mini-bg: rgba(255, 255, 255, 0.04);
  --sdp-mini-border: rgba(255, 255, 255, 0.08);
  --sdp-mini-fg: rgba(232, 234, 237, 0.88);
  --sdp-mini-hover-bg: rgba(255, 255, 255, 0.08);
  --sdp-mini-hover-border: rgba(255, 255, 255, 0.14);

  --sdp-swatch-border: rgba(255, 255, 255, 0.14);

  --sdp-pill2-bg: rgba(255, 255, 255, 0.06);
  --sdp-pill2-border: rgba(255, 255, 255, 0.08);
  --sdp-pill2-fg: rgba(232, 234, 237, 0.75);

  --sdp-pill2-subtle-bg: rgba(255, 255, 255, 0.04);
  --sdp-pill2-subtle-border: rgba(255, 255, 255, 0.06);
  --sdp-pill2-subtle-fg: rgba(232, 234, 237, 0.65);

  --sdp-collapse-fg: rgba(232, 234, 237, 0.85);
  --sdp-collapse-hover-bg: rgba(255, 255, 255, 0.05);

  --sdp-scrollbar-thumb: var(--scrollbar-thumb);
  --sdp-scrollbar-thumb-hover: var(--scrollbar-thumb-hover);
  --sdp-scrollbar-track: var(--editor-bg);

  /* Graph color defaults (themes can override for flavor) */
  --sdp-graph-node-scene: #8ab4f8;
  --sdp-graph-node-character: #f28b82;
  --sdp-graph-node-location: #34a853;
  --sdp-graph-node-beat: #fdd663;
  --sdp-graph-node-thread: #c58af9;
  --sdp-graph-node-doc: #81c995;
  --sdp-graph-node-folder: #9aa0a6;
  --sdp-graph-node-tag: #9aa0a6;
  --sdp-graph-node-default: #9aa0a6;

  --sdp-graph-edge-has-character: #f28b82;
  --sdp-graph-edge-has-location: #34a853;
  --sdp-graph-edge-has-plot-point: #fdd663;
  --sdp-graph-edge-links-to: #9aa0a6;
  --sdp-graph-edge-default: #5f6368;

  /* =========================================================
     SceneOutlineList (semantic tokens)
     ========================================================= */
  --sol-bg: var(--surface-0);
  --sol-row-hover-bg: var(--surface-3);
  --sol-row-focus-bg: var(--surface-2);

  --sol-bullet-fg: var(--fg-subtle);

  --sol-input-fg: var(--fg);
  --sol-input-border: transparent;
  --sol-input-border-focus: var(--border-2);
  --sol-focus-ring: var(--focus-ring);

  --sol-empty-fg: var(--fg-dim);

  /* =========================================================
     MediaPlayer (semantic tokens)
     ========================================================= */
  --mp-bg: var(--editor-bg);

  --mp-overlay-chip-bg: rgba(0, 0, 0, 0.45);
  --mp-overlay-chip-border: rgba(255, 255, 255, 0.12);
  --mp-overlay-chip-fg: rgba(229, 231, 235, 0.92);

  --mp-error-title-fg: rgba(254, 202, 202, 0.95);
  --mp-error-msg-fg: rgba(254, 202, 202, 0.75);

  --mp-btn-bg: rgba(255, 255, 255, 0.08);
  --mp-btn-border: rgba(255, 255, 255, 0.14);
  --mp-btn-fg: rgba(229, 231, 235, 0.92);
  --mp-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --mp-btn-hover-border: rgba(255, 255, 255, 0.18);

  --mp-focus-ring: var(--focus-ring);

  /* =========================================================
     Character / Location editor (shared tokens)
     ========================================================= */
  --cl-bg: var(--editor-bg);
  --cl-fg: var(--fg);
  --cl-muted: var(--fg-muted);
  --cl-danger: var(--danger, #f14c4c);

  --cl-scroll-track: var(--surface-2);
  --cl-scroll-thumb: var(--scrollbar-thumb, #444);
  --cl-scroll-thumb-hover: var(--scrollbar-thumb-hover, #666);

  --cl-tabs-bg: var(--surface-1);
  --cl-tabs-border: var(--border);
  --cl-tabs-sep: var(--border);

  --cl-tab-fg: var(--text-muted);
  --cl-tab-hover-bg: var(--surface-hover);
  --cl-tab-hover-fg: var(--fg);
  --cl-tab-active-bg: var(--surface-2);
  --cl-tab-active-fg: var(--fg); /* not invert */
  --cl-accent: var(--focus-ring);

  --cl-panel-bg: var(--surface-1);
  --cl-panel-border: var(--border);
  --cl-panel-head-bg: var(--surface-1);
  --cl-panel-title: var(--fg); /* not invert */

  --cl-btn-bg: var(--surface-2);
  --cl-btn-border: var(--border-strong);
  --cl-btn-fg: var(--text);
  --cl-btn-hover-bg: var(--surface-hover);
  --cl-btn-hover-border: var(--border-stronger);

  --cl-iconbtn-bg: var(--surface-2);
  --cl-iconbtn-border: var(--border-strong);
  --cl-iconbtn-fg: var(--text);
  --cl-iconbtn-hover-bg: var(--surface-hover);
  --cl-iconbtn-hover-border: var(--border-stronger);
  --cl-iconbtn-danger-hover-bg: rgba(232, 17, 35, 0.18);
  --cl-iconbtn-danger-hover-border: rgba(232, 17, 35, 0.3);

  --cl-label: var(--text-muted);
  --cl-input-bg: var(--surface-2);
  --cl-input-border: var(--border-strong);
  --cl-input-fg: var(--fg);
  --cl-focus: var(--focus-ring);

  --cl-card-bg: var(--surface-2);
  --cl-card-border: var(--border);
  --cl-card-hover-bg: var(--surface-hover);
  --cl-card-hover-border: var(--focus-ring);

  --cl-badge-bg: var(--surface-1);
  --cl-badge-border: var(--border-strong);
  --cl-badge-fg: var(--text-muted);

  --cl-sq-bg: var(--surface-2);
  --cl-sq-border: var(--border-strong);

  --cl-car-arrow-bg: var(--surface-2);
  --cl-car-arrow-border: var(--border-strong);
  --cl-car-arrow-fg: var(--text);
  --cl-car-arrow-hover-bg: var(--surface-hover);
  --cl-car-arrow-hover-border: var(--border-stronger);

  /* =========================================================
     ImageViewer tokens
     ========================================================= */
  --iv-bg: var(--surface-2);
  --iv-fg: var(--text);

  --iv-grid-opacity: 0.28;
  --iv-grid-line: rgba(255, 255, 255, 0.06);

  --iv-vignette-accent: rgba(0, 122, 204, 0.10);
  --iv-vignette-soft1: rgba(255, 255, 255, 0.06);
  --iv-vignette-soft2: rgba(255, 255, 255, 0.05);
  --iv-vignette-dark: rgba(0, 0, 0, 0.50);

  --iv-panel-bg: rgba(0, 0, 0, 0.42);
  --iv-panel-border: rgba(255, 255, 255, 0.12);
  --iv-panel-radius: 12px;
  --iv-panel-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  --iv-panel-blur: blur(10px);

  --iv-dot: rgba(255, 255, 255, 0.22);

  --iv-kbd-bg: rgba(255, 255, 255, 0.08);
  --iv-kbd-border: rgba(255, 255, 255, 0.10);
  --iv-kbd-fg: rgba(229, 231, 235, 0.92);

  --iv-iconwrap-bg: rgba(255, 255, 255, 0.06);
  --iv-iconwrap-border: rgba(255, 255, 255, 0.10);
  --iv-iconwrap-danger-bg: rgba(239, 68, 68, 0.12);
  --iv-iconwrap-danger-border: rgba(239, 68, 68, 0.25);

  --iv-sep: rgba(255, 255, 255, 0.12);

  --iv-iconbtn-bg: rgba(255, 255, 255, 0.02);
  --iv-iconbtn-border: transparent;
  --iv-iconbtn-fg: rgba(229, 231, 235, 0.92);
  --iv-iconbtn-hover-bg: rgba(255, 255, 255, 0.07);
  --iv-iconbtn-hover-border: rgba(255, 255, 255, 0.12);

  --iv-btn-bg: rgba(255, 255, 255, 0.06);
  --iv-btn-border: rgba(255, 255, 255, 0.12);
  --iv-btn-fg: rgba(229, 231, 235, 0.95);
  --iv-btn-hover-bg: rgba(255, 255, 255, 0.10);
  --iv-btn-hover-border: rgba(255, 255, 255, 0.18);

  --iv-primary-bg: rgba(0, 122, 204, 0.18);
  --iv-primary-border: rgba(0, 122, 204, 0.28);
  --iv-primary-hover-bg: rgba(0, 122, 204, 0.24);
  --iv-primary-hover-border: rgba(0, 122, 204, 0.34);

  --iv-img-shadow: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.35));
  --iv-img-shadow-active: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.28));

  --iv-minimap-border: rgba(255, 255, 255, 0.14);
  --iv-minimap-shadow: 0 14px 34px rgba(0, 0, 0, 0.40);
  --iv-minimap-bg: rgba(0, 0, 0, 0.38);
  --iv-minimap-header-bg: rgba(255, 255, 255, 0.03);
  --iv-minimap-header-border: rgba(255, 255, 255, 0.10);
  --iv-minimap-veil: rgba(0, 0, 0, 0.26);

  --iv-minimap-rect-border: rgba(0, 122, 204, 0.95);
  --iv-minimap-rect-bg: rgba(0, 122, 204, 0.14);
  --iv-minimap-rect-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 6px 18px rgba(0, 0, 0, 0.25);

  --iv-mini-btn-bg: rgba(255, 255, 255, 0.06);
  --iv-mini-btn-border: rgba(255, 255, 255, 0.10);
  --iv-mini-btn-fg: rgba(255, 255, 255, 0.88);
  --iv-mini-btn-hover-bg: rgba(255, 255, 255, 0.10);
  --iv-mini-btn-hover-border: rgba(255, 255, 255, 0.16);

  --iv-text-strong: rgba(229, 231, 235, 0.95);
  --iv-text-mid: rgba(229, 231, 235, 0.90);
  --iv-text-muted: rgba(229, 231, 235, 0.70);
  --iv-text-dimmer: rgba(229, 231, 235, 0.60);

  --iv-danger-strong: rgba(254, 202, 202, 0.95);
  --iv-danger-muted: rgba(254, 202, 202, 0.75);

  /* =========================================================
     BottomPanel tokens
     ========================================================= */
  --bp-bg: var(--surface-0);
  --bp-fg: var(--text);
  --bp-muted: var(--text-muted);
  --bp-border: var(--border);

  --bp-tab-hover-fg: var(--text-strong);
  --bp-tab-active-fg: var(--text-strong);
  --bp-tab-active-underline: var(--accent);

  --bp-badge-active-bg: color-mix(in srgb, var(--accent) 60%, #000);
  --bp-badge-active-fg: #fff;
  --bp-badge-idle-bg: var(--surface-3);
  --bp-badge-idle-fg: var(--text-muted);

  --bp-btn-hover-bg: var(--surface-3);
  --bp-btn-fg: var(--text-muted);
  --bp-btn-hover-fg: var(--text-strong);

  --bp-toolbar-h: 33px;
  --bp-tab-pad-x: 16px;

  /* =========================================================
     ProblemsTab tokens — THEME DRIVEN
     ========================================================= */
  --pt-row-hover-bg: var(--surface-hover);

  --pt-msg-fg: var(--fg);
  --pt-meta-fg: var(--fg-muted);
  --pt-empty-fg: var(--fg-muted);

  --pt-focus: var(--focus-ring);

  --pt-error: var(--semantic-error);
  --pt-warn: var(--semantic-warning);
  --pt-info: var(--semantic-info);

  /* Graph View */
  --pgv-bg: var(--editor-bg);
  --pgv-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  --pgv-empty-title: rgba(232, 234, 237, 0.92);
  --pgv-empty-sub: rgba(232, 234, 237, 0.65);

  --pgv-toolbar-bg: rgba(0, 0, 0, 0.38);
  --pgv-toolbar-border: rgba(255, 255, 255, 0.10);
  --pgv-toolbar-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  --pgv-toolbar-blur: blur(10px);

  --pgv-tool-bg: rgba(255, 255, 255, 0.04);
  --pgv-tool-border: rgba(255, 255, 255, 0.10);
  --pgv-tool-fg: rgba(232, 234, 237, 0.90);
  --pgv-tool-hover-bg: rgba(255, 255, 255, 0.08);
  --pgv-tool-hover-border: rgba(255, 255, 255, 0.16);

  --pgv-focus: var(--focus-ring);
  --pgv-sigma-label: rgba(232, 234, 237, 0.92);
  --pgv-sigma-label-stroke: rgba(0, 0, 0, 0.65);
   --pgv-sigma-label-stroke-size: 4;

  --pgv-sigma-edge: var(--sdp-graph-edge-default, #5f6368);

  /* =========================================================
     Git view tokens (UI only — git decorations stay hardcoded)
     ========================================================= */
  --git-bg: var(--editor-bg);
  --git-fg: var(--fg);
  --git-muted: var(--fg-muted);
  --git-dim: var(--fg-dim);

  --git-border: var(--divider);

  --git-header-h: 33px;

  --git-header-hover-bg: var(--surface-2);
  --git-section-hover-bg: var(--surface-2);

  --git-input-bg: var(--input-bg-2);
  --git-input-border: var(--border-2);
  --git-input-fg: var(--fg);
  --git-input-focus: var(--accent);

  --git-primary-bg: var(--accent-2);
  --git-primary-hover-bg: var(--accent-hover);
  --git-primary-fg: var(--fg-invert);

  --git-badge-bg: rgba(255, 255, 255, 0.08);
  --git-badge-border: rgba(255, 255, 255, 0.08);
  --git-badge-fg: rgba(229, 231, 235, 0.95);

  --git-row-hover-bg: color-mix(in srgb, var(--list-hover) 55%, transparent);

  --git-iconbtn-fg: var(--fg-muted);
  --git-iconbtn-hover-bg: color-mix(in srgb, var(--active-bg) 65%, transparent);
  --git-iconbtn-hover-fg: var(--fg-invert);

  --git-os-thumb: var(--scrollbar-thumb, #787878);
  --git-os-thumb-hover: var(--scrollbar-thumb-hover, #969696);
  --git-os-opacity: 0.6;

  /* =========================================================
     World Section
     ========================================================= */
  --ws-border: var(--tree-divider);
  --ws-hover-bg: var(--sdp-section-hover-bg);
  --ws-title-fg: var(--text-secondary);
  --ws-icon: var(--sdp-icon-muted);
  --ws-action-hover-bg: var(--active-bg);
  --ws-action-hover-border: var(--border-2);
  --ws-focus: var(--focus-ring);

  /* =========================================================
     Reading Mode (semantic tokens)
     ========================================================= */
  --rm-bg: var(--editor-bg);
  --rm-fg: var(--fg);
  --rm-heading: var(--fg);
  --rm-muted: var(--fg-muted);
  --rm-divider: var(--divider);

  --rm-quote-border: var(--border-2);

  --rm-code-bg: var(--surface-2);
  --rm-code-border: var(--border);

  --rm-pre-bg: var(--surface-1);
  --rm-pre-border: var(--border);

  --rm-link: var(--monaco-link-fg, var(--accent));
  --rm-link-hover: var(--accent-hover);

  /* =========================================================
     TagMenu tokens (theme-safe)
     ========================================================= */
  --tagmenu-bg: var(--surface-3, #252526);
  --tagmenu-border: var(--border-2, #3c3c3c);
  --tagmenu-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);

  --tagmenu-fg: var(--fg, #d4d4d4);
  --tagmenu-muted: var(--fg-dim, #9da3ad);
  --tagmenu-label: var(--tree-icon-fg, #9da3ad);

  --tagmenu-input-bg: var(--input-bg-2, #1e1e1e);
  --tagmenu-input-border: var(--border-2, #3c3c3c);
  --tagmenu-input-fg: var(--fg, #d4d4d4);
  --tagmenu-input-placeholder: var(--fg-dim, #9da3ad);
  --tagmenu-focus: var(--accent, #007acc);

  --tagmenu-row-hover-bg: var(--list-hover, rgba(255, 255, 255, 0.06));

  --tagmenu-action-muted: var(--fg-dim, #9da3ad);
  --tagmenu-action-hover: var(--fg, #d4d4d4);

  --tagmenu-divider: var(--border-2, #3c3c3c);
  --tagmenu-create-fg: var(--tree-icon-fg, #9da3ad);

  --tagmenu-primary-bg: var(--accent, #007acc);
  --tagmenu-primary-hover-bg: var(--accent-hover, #005a9e);
  --tagmenu-primary-fg: var(--fg-invert, #ffffff);

  --tagmenu-check: var(--fg, #d4d4d4);
  --tagmenu-check-idle: var(--fg-dim, #9da3ad);

  --tagmenu-scroll-track: var(--surface-3, #252526);
  --tagmenu-scroll-thumb: var(--scrollbar-thumb, rgba(255, 255, 255, 0.22));
  --tagmenu-scroll-thumb-hover: var(--scrollbar-thumb-hover, rgba(255, 255, 255, 0.30));

  /* IMPORTANT: no self-reference here */
  --danger: #f14c4c;

  /* Project Dashboard */
  --pd-bg: var(--editor-bg);
  --pd-fg: var(--fg);
  --pd-muted: var(--fg-muted);
  --pd-dim: var(--fg-dim);
  --pd-strong: var(--fg-invert);

  --pd-surface-0: var(--surface-0);
  --pd-surface-1: var(--surface-1);
  --pd-surface-2: var(--surface-2);
  --pd-surface-3: var(--surface-3);

  --pd-border: var(--border);
  --pd-border-2: var(--border-2);
  --pd-divider: var(--divider);
  --pd-divider-2: var(--divider-2);

  --pd-accent: var(--accent);
  --pd-accent-2: var(--accent-2);
  --pd-accent-hover: var(--accent-hover);

  --pd-hover: var(--surface-hover);
  --pd-pressed: var(--surface-pressed);

  --pd-selection: var(--selection-bg);
  --pd-focus: var(--focus-ring);

  --pd-danger: var(--semantic-error);
  --pd-success: var(--semantic-success);
  --pd-warning: var(--semantic-warning);

  --pd-scroll-thumb: var(--scrollbar-thumb);
  --pd-scroll-thumb-hover: var(--scrollbar-thumb-hover);
  --pd-scroll-track: var(--pd-surface-2);

  /* Repo stats buttons (DashboardHeader) */
  --pd-statbtn-bg: var(--pd-surface-2);
  --pd-statbtn-border: var(--pd-border-2);
  --pd-statbtn-fg: var(--pd-fg);
  --pd-statbtn-hover-bg: var(--pd-hover);
  --pd-statbtn-hover-border: var(--pd-border-2);

  --pd-statcount-bg: var(--pd-bg);
  --pd-statcount-border: var(--pd-border-2);
  --pd-statcount-fg: var(--pd-muted);

  /* Local/Remote badges */
  --pd-badge-local-bg: var(--pd-surface-2);
  --pd-badge-local-border: var(--pd-border-2);
  --pd-badge-local-fg: var(--pd-muted);

  --pd-badge-remote-bg: color-mix(in srgb, var(--pd-accent) 12%, transparent);
  --pd-badge-remote-border: color-mix(in srgb, var(--pd-accent) 55%, transparent);
  --pd-badge-remote-fg: color-mix(in srgb, var(--pd-accent) 25%, var(--pd-strong));

  /* Story Tab */
  /* StoryTab: metrics buttons */
  --pd-mbar-btn-bg: var(--pd-surface-2);
  --pd-mbar-btn-border: var(--pd-border-2);
  --pd-mbar-btn-fg: var(--pd-fg);
  --pd-mbar-btn-hover-bg: var(--pd-hover);
  --pd-mbar-btn-hover-border: var(--pd-border-2);

  --pd-mbar-strong-fg: var(--pd-strong);
  --pd-mbar-muted-fg: var(--pd-muted);

  /* Controls row buttons */
  --pd-ctl-bg: var(--pd-bg);
  --pd-ctl-border: var(--pd-border-2);
  --pd-ctl-fg: var(--pd-fg);
  --pd-ctl-hover-bg: var(--pd-surface-2);
  --pd-ctl-hover-border: var(--pd-border-2);

  /* Search (already used elsewhere but safe) */
  --pd-search-bg: var(--pd-bg);
  --pd-search-border: var(--pd-border-2);
  --pd-search-fg: var(--pd-fg);
  --pd-search-placeholder: var(--pd-dim);

  /* Blue "Story" dropdown button */
  --pd-blue-dd-bg: color-mix(in srgb, var(--pd-accent) 22%, transparent);
  --pd-blue-dd-border: color-mix(in srgb, var(--pd-accent) 55%, transparent);
  --pd-blue-dd-fg: color-mix(in srgb, var(--pd-accent) 25%, var(--pd-strong));
  --pd-blue-dd-hover-bg: color-mix(in srgb, var(--pd-accent) 30%, transparent);
  --pd-blue-dd-hover-border: color-mix(in srgb, var(--pd-accent) 75%, transparent);

  /* Dropdown menu */
  --pd-ddmenu-bg: var(--pd-bg);
  --pd-ddmenu-border: var(--pd-border-2);
  --pd-dditem-fg: var(--pd-fg);
  --pd-dditem-hover-bg: var(--pd-surface-2);

  /* Commitline msg */
  --pd-commit-msg-fg: var(--pd-fg);

  /* Dropdown action button (Checkout) */
  --pd-ddaction-bg: var(--pd-surface-2);
  --pd-ddaction-border: var(--pd-border-2);
  --pd-ddaction-fg: var(--pd-fg);
  --pd-ddaction-hover-bg: var(--pd-hover);
  --pd-ddaction-hover-border: var(--pd-border-2);

  /* Dropdown badges */
  --pd-ddbadge-bg: color-mix(in srgb, var(--pd-accent) 22%, transparent);
  --pd-ddbadge-border: color-mix(in srgb, var(--pd-accent) 60%, transparent);
  --pd-ddbadge-fg: color-mix(in srgb, var(--pd-accent) 25%, var(--pd-strong));

  --pd-ddbadge-muted-bg: var(--pd-surface-2);
  --pd-ddbadge-muted-border: var(--pd-border-2);
  --pd-ddbadge-muted-fg: var(--pd-muted);

  /* Avatars in commit line */
  --pd-avatar-border: var(--pd-border-2);

  /* =========================
     ProjectDashboard / SettingsTab tokens
     ========================= */

  /* Layout */
  --pd-settings-gap: 12px;

  /* Side nav */
  --pd-sidenav-bg: var(--surface-2, #252526);
  --pd-sidenav-border: var(--border-2, #3a3a3a);
  --pd-sidenav-head-fg: var(--fg-invert, #ffffff);
  --pd-sidenav-head-border: var(--border-2, #3a3a3a);

  --pd-snav-item-fg: var(--fg, #d4d4d4);
  --pd-snav-item-border: var(--border-2, #3a3a3a);
  --pd-snav-item-hover-bg: var(--surface-hover, rgba(255,255,255,0.06));
  --pd-snav-item-active-bg: var(--editor-bg, #1e1e1e);
  --pd-snav-item-active-fg: var(--fg-invert, #ffffff);

  /* Panels (local to settings; if you already theme .pd-panel globally, keep these aligned) */
  --pd-settings-panel-bg: var(--surface-2, #252526);
  --pd-settings-panel-border: var(--border-2, #3a3a3a);
  --pd-settings-panel-head-border: var(--border-2, #3a3a3a);
  --pd-settings-panel-title-fg: var(--fg-invert, #ffffff);

  /* Required / separators */
  --pd-required-fg: var(--danger, #e81123);
  --pd-sep-line: var(--border-2, #3a3a3a);

  /* Fields */
  --pd-field-label-fg: var(--fg, #d4d4d4);
  --pd-muted-fg: var(--fg-muted, #9d9d9d);

  /* Inputs */
  --pd-input-bg: var(--editor-bg, #1e1e1e);
  --pd-input-border: var(--border-2, #3a3a3a);
  --pd-input-fg: var(--fg, #d4d4d4);
  --pd-input-focus: var(--accent, #007acc);

  /* Buttons (Settings-local; if you already have pd-btn tokens, you can alias to them) */
  --pd-sbtn-bg: var(--active-bg, #2a2a2a);
  --pd-sbtn-border: var(--border-2, #3a3a3a);
  --pd-sbtn-fg: rgba(229,231,235,0.95);
  --pd-sbtn-hover-bg: color-mix(in srgb, var(--active-bg, #2a2a2a) 65%, #000);
  --pd-sbtn-disabled-opacity: .6;

  --pd-sbtn-danger-border: color-mix(in srgb, var(--danger, #e81123) 50%, transparent);
  --pd-sbtn-danger-bg: color-mix(in srgb, var(--danger, #e81123) 12%, transparent);
  --pd-sbtn-danger-hover-bg: color-mix(in srgb, var(--danger, #e81123) 18%, transparent);

  --pd-sbtn-ghost-hover-bg: var(--active-bg, #2a2a2a);

  /* Remote status card */
  --pd-remote-status-bg: var(--editor-bg, #1e1e1e);
  --pd-remote-status-border: var(--border-2, #3a3a3a);

  /* Pills */
  --pd-pill-bg: var(--surface-2, #252526);
  --pd-pill-border: var(--border-2, #3a3a3a);
  --pd-pill-fg: rgba(229,231,235,0.95);

  --pd-pill-ok-border: rgba(16,185,129,.45);
  --pd-pill-ok-bg: rgba(16,185,129,.12);

  --pd-pill-warn-border: rgba(245,158,11,.45);
  --pd-pill-warn-bg: rgba(245,158,11,.12);

  /* Lists / cards */
  --pd-card-bg: var(--editor-bg, #1e1e1e);
  --pd-card-border: var(--border-2, #3a3a3a);
  --pd-card-title-fg: var(--fg-invert, #ffffff);
  --pd-card-url-fg: var(--fg, #d4d4d4);

  /* Error */
  --pd-error-fg: rgba(252,165,165,1);

  /* Danger zone */
  --pd-dangerzone-border: rgba(232,17,35,.35);
  --pd-dangerzone-head-bg: rgba(232,17,35,.10);
  --pd-dangerzone-head-border: rgba(232,17,35,.25);
  --pd-dangerzone-row-border: var(--border-2, #3a3a3a);
  --pd-dangerzone-title-fg: var(--fg-invert, #ffffff);

  /* =========================================================
   What's New page (semantic tokens)
   ========================================================= */
--wn-bg: var(--editor-bg);
--wn-fg: var(--fg);
--wn-muted: var(--fg-muted);
--wn-dim: var(--fg-dim);
--wn-strong: var(--fg-invert);

--wn-card-bg: var(--surface-1);
--wn-card-border: var(--border);
--wn-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.20);

--wn-header-border: var(--divider);

--wn-badge-bg: var(--surface-2);
--wn-badge-border: var(--border-2);
--wn-badge-fg: var(--fg);

--wn-section-border: var(--divider);
--wn-quote-bg: var(--surface-2);
--wn-quote-border: var(--border-2);

--wn-code-bg: var(--surface-2);
--wn-code-border: var(--border);
--wn-code-fg: var(--fg);

--wn-pre-bg: var(--surface-0);
--wn-pre-border: var(--border);

--wn-link: var(--accent);
--wn-link-hover: var(--accent-hover);

--wn-bullet: var(--accent);
--wn-bullet-ring: color-mix(in srgb, var(--accent) 18%, transparent);

--wn-table-head-bg: var(--surface-2);
--wn-table-border: var(--border);
--wn-table-row-border: var(--divider);

--wn-skeleton: color-mix(in srgb, var(--fg) 10%, transparent);
--wn-skeleton-soft: color-mix(in srgb, var(--fg) 6%, transparent);
  
  
}

/* =========================================================
   1) Themes — FOUNDATION + OPTIONAL CHROME ONLY
   ========================================================= */

/* (Themes section remains unchanged below)
   NOTE: you do NOT need to change any theme values for Solution B.
   Keep your theme definitions exactly as you had them.
*/

/* =========================
   Theme: Default Dark (VS Code-ish)
   ========================= */
:root[data-theme="default-dark"] {
  /* Foundation */
  --wb-bg: #181818;
  --editor-bg: #1e1e1e;

  --surface-0: var(--wb-bg);
  --surface-1: #1e1e1e;
  --surface-2: #252526;
  --surface-3: #1f1f1f;

  --input-bg: #1a1a1a;
  --input-bg-2: #252526;

  --border: #2b2b2b;
  --border-2: #3a3a3a;
  --divider: #2a2a2a;
  --divider-2: #3c3c3c;

  --fg: #cccccc;
  --fg-muted: #9d9d9d;
  --fg-dim: #888888;
  --fg-subtle: #666666;
  --fg-invert: #ffffff;

  --accent: #007acc;
  --accent-2: #0e639c;
  --accent-hover: #1177bb;

  --list-hover: #37373d;
  --active-bg: #2a2a2a;

  --selection-bg: #04395e;
  --focus-ring: rgba(66, 153, 225, 0.5);

  --danger: #e81123;
  --danger-fg: #ffb4b4;

  /* Chrome (optional) */
  --titlebar-bg: #181818;
  --titlebar-bg-blur: #1e1e1e;
  --titlebar-fg: var(--fg);
  --titlebar-fg-muted: var(--fg-muted);
  --titlebar-border: var(--border);

  --titlebar-hover: rgba(255, 255, 255, 0.10);
  --titlebar-close-hover: #e81123;

  --titlebar-search-bg: #242424;
  --titlebar-search-bg-blur: #2a2a2a;
  --titlebar-search-border: #454545;
  --titlebar-search-border-blur: #474747;
  --titlebar-search-placeholder: var(--fg-muted);

  --titlebar-project-fg: var(--fg-muted);
  --titlebar-empty-fg: #777777;

  --sidebar-bg: #181818;
  --sidebar-border: var(--border);

  --sidebar-icon: #868686;
  --sidebar-icon-active: #d7d7d7;
  --sidebar-icon-hover: #d7d7d7;

  --sidebar-indicator: var(--accent);

  --sidebar-avatar-border: var(--border-2);
  --sidebar-badge-border: var(--sidebar-bg);

  --tabbar-bg: var(--wb-bg);
  --tabbar-border: var(--border);

  --tab-bg: var(--surface-0);
  --tab-bg-hover: var(--surface-1);
  --tab-bg-active: var(--editor-bg);

  --tab-fg: #aaaaaa;
  --tab-fg-active: var(--fg-invert);
  --tab-close-fg: #666666;
  --tab-close-hover: rgba(255, 255, 255, 0.10);

  --tab-active-top: var(--accent);
  --tab-active-top-special: #4caf50;

  /* Menus (optional) */
  --menu-bg: var(--surface-2);
  --menu-border: var(--border-2);
  --menu-item-hover: var(--active-bg);
  --menu-separator: var(--border);

  /* Scrollbars */
  --scrollbar-thumb: #444;
  --scrollbar-thumb-hover: #666;

  --os-thumb: #787878;
  --os-thumb-hover: #969696;

  --tree-line-dim: #787878;
  --tree-line-bright: #969696;

  --success: #22c55e;
}

/* =========================
   Theme: One Piece (Straw Hat Dark)
   ========================= */
:root[data-theme="one-piece-dark"] {
  /* Foundation */
  --wb-bg: #0b1420;
  --editor-bg: #0f1b2a;

  --surface-0: var(--wb-bg);
  --surface-1: #132338;
  --surface-2: #162a43;
  --surface-3: #112235;

  --input-bg: #0d1a28;
  --input-bg-2: #162a43;

  --border: #223248;
  --border-2: #2b3f5c;
  --divider: #1f2e44;
  --divider-2: #2b3f5c;

  --fg: #e6edf6;
  --fg-muted: #b8c5d6;
  --fg-dim: #8fa2ba;
  --fg-subtle: #6f86a3;
  --fg-invert: #ffffff;
  --fg-on-accent: #000000;

  --accent: #f4c542;
  --accent-2: #d9a11d;
  --accent-hover: #ffd465;

  --list-hover: #1b3452;
  --active-bg: #162c46;

  --selection-bg: rgba(244, 197, 66, 0.18);
  --focus-ring: rgba(244, 197, 66, 0.45);

  --danger: #d72638;
  --danger-fg: #ffd1d6;

  /* Chrome (optional) */
  --statusbar-bg: #0b1420;
  --statusbar-hover: #142842;
  --statusbar-pill-bg: #0f2033;

  --titlebar-bg: #0b1420;
  --titlebar-bg-blur: #0f1b2a;
  --titlebar-border: var(--border);
  --titlebar-hover: rgba(244, 197, 66, 0.14);
  --titlebar-close-hover: #d72638;

  --titlebar-search-bg: #0f2033;
  --titlebar-search-bg-blur: #12263d;
  --titlebar-search-border: #2b3f5c;
  --titlebar-search-border-blur: #223248;
  --titlebar-search-placeholder: #8fa2ba;

  --sidebar-bg: #0b1420;

  --sidebar-icon: #8fa2ba;
  --sidebar-icon-active: var(--fg);
  --sidebar-icon-hover: var(--fg);

  --menu-bg: #162a43;
  --menu-border: #2b3f5c;
  --menu-item-hover: #1b3452;
  --menu-separator: #223248;

  --tabbar-bg: var(--wb-bg);
  --tabbar-border: var(--border);

  --tab-bg: var(--surface-0);
  --tab-bg-active: var(--editor-bg);
  --tab-bg-hover: var(--surface-1);

  --tab-fg: #b8c5d6;
  --tab-fg-active: var(--fg);
  --tab-close-fg: #6f86a3;
  --tab-close-hover: rgba(244, 197, 66, 0.16);

  --tab-active-top: var(--accent);
  --tab-active-top-special: #d72638;

  /* Scrollbars */
  --scrollbar-thumb: #2a3f5c;
  --scrollbar-thumb-hover: #3a567c;

  --os-thumb: #486487;
  --os-thumb-hover: #5f7fa8;

  --tree-line-dim: #3b5575;
  --tree-line-bright: #5f7fa8;

  /* Optional: make goal progress match accent */
  --goal-progress: rgba(244, 197, 66, 0.22);

  --success: #4ade80;
}

/* =========================
   Theme: Default Light (VS Code-ish)
   ========================= */
:root[data-theme="default-light"] {
  color-scheme: light;

  /* Foundation */
  --wb-bg: #f6f7f9;
  --editor-bg: #ffffff;

  --surface-0: var(--wb-bg);
  --surface-1: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #ebeef2;

  --input-bg: #ffffff;
  --input-bg-2: #f3f4f6;

  --fg: #111827;
  --fg-muted: #4b5563;
  --fg-dim: #6b7280;
  --fg-subtle: #9ca3af;
  --fg-invert: #ffffff;

  --border: #d1d5db;
  --border-2: #cbd5e1;
  --divider: #e5e7eb;
  --divider-2: #dbe1ea;

  --accent: #0b5cad;
  --accent-2: #094a8b;
  --accent-hover: #0a66c2;

  --list-hover: #eaf2ff;
  --active-bg: #dbeafe;
  --selection-bg: #c7e0ff;

  --focus-ring: rgba(11, 92, 173, 0.28);

  --danger: #dc2626;
  --danger-fg: #b91c1c;

  /* Chrome (optional) */
  --statusbar-bg: var(--surface-0);
  --statusbar-hover: rgba(17, 24, 39, 0.06);
  --statusbar-pill-bg: rgba(17, 24, 39, 0.06);

  --titlebar-bg: var(--surface-0);
  --titlebar-bg-blur: #f3f4f6;
  --titlebar-border: var(--border);
  --titlebar-hover: rgba(17, 24, 39, 0.06);
  --titlebar-close-hover: #e81123;

  --titlebar-search-bg: #ffffff;
  --titlebar-search-bg-blur: #ffffff;
  --titlebar-search-border: var(--border-2);
  --titlebar-search-border-blur: var(--border);
  --titlebar-search-placeholder: var(--fg-dim);

  --sidebar-bg: var(--surface-0);
  --sidebar-border: var(--border);

  --sidebar-icon: var(--fg-muted);
  --sidebar-icon-active: var(--fg);
  --sidebar-icon-hover: var(--fg);

  --sidebar-indicator: var(--accent);

  --tabbar-bg: var(--surface-0);
  --tabbar-border: var(--border);

  --tab-bg: var(--surface-0);
  --tab-bg-active: var(--editor-bg);
  --tab-bg-hover: #ffffff;

  --tab-fg: var(--fg-muted);
  --tab-fg-active: var(--fg);
  --tab-close-fg: var(--fg-dim);
  --tab-close-hover: rgba(17, 24, 39, 0.08);

  --tab-active-top: var(--accent);
  --tab-active-top-special: #16a34a;

  /* Scrollbars */
  --scrollbar-thumb: #c1c7d0;
  --scrollbar-thumb-hover: #aab2be;

  --os-thumb: var(--scrollbar-thumb);
  --os-thumb-hover: var(--scrollbar-thumb-hover);

  --tree-line-dim: #d1d5db;
  --tree-line-bright: #9ca3af;

  --goal-progress: rgba(11, 92, 173, 0.16);

  --success: #16a34a;

  --pgv-sigma-label: rgba(17, 24, 39, 0.92);
   --pgv-sigma-label-stroke: rgba(255, 255, 255, 0.85);
   --pgv-sigma-label-stroke-size: 4;
}

/* =========================
   Theme: Shinobi (Ink + Parchment Dark)
   ========================= */
:root[data-theme="forest-dark"] {
  /* Foundation */
  --wb-bg: #0b0f10;
  --editor-bg: #0e1416;

  --surface-0: var(--wb-bg);
  --surface-1: #121b1e;
  --surface-2: #162226;
  --surface-3: #10191c;

  --input-bg: #0d1518;
  --input-bg-2: #162226;

  --border: #223036;
  --border-2: #2b3c44;
  --divider: #1b2a30;
  --divider-2: #2b3c44;

  --fg: #e7e2d6;
  --fg-muted: #c1b9aa;
  --fg-dim: #9e9587;
  --fg-subtle: #7c756a;
  --fg-invert: #ffffff;

  --accent: #2ea86f;
  --accent-2: #1f8557;
  --accent-hover: #3acb83;

  --list-hover: #1a2a2d;
  --active-bg: #182326;

  --selection-bg: rgba(46, 168, 111, 0.20);
  --focus-ring: rgba(46, 168, 111, 0.42);

  --danger: #d13b3b;
  --danger-fg: #ffd2cf;

  /* Chrome (optional) */
  --statusbar-bg: var(--wb-bg);
  --statusbar-hover: #111a1d;
  --statusbar-pill-bg: #0f171a;

  --titlebar-bg: var(--wb-bg);
  --titlebar-bg-blur: #0e1416;
  --titlebar-border: var(--border);
  --titlebar-hover: rgba(231, 226, 214, 0.08);
  --titlebar-close-hover: #d13b3b;

  --titlebar-search-bg: #0f171a;
  --titlebar-search-bg-blur: #101a1d;
  --titlebar-search-border: #2b3c44;
  --titlebar-search-border-blur: #223036;
  --titlebar-search-placeholder: #9e9587;

  --sidebar-bg: #0b0f10;

  --sidebar-icon: #9e9587;
  --sidebar-icon-active: var(--fg);
  --sidebar-icon-hover: var(--fg);

  --menu-bg: #142023;
  --menu-border: #2b3c44;
  --menu-item-hover: #1a2a2d;
  --menu-separator: #223036;

  --tabbar-bg: var(--wb-bg);
  --tabbar-border: var(--border);

  --tab-bg: var(--surface-0);
  --tab-bg-active: var(--editor-bg);
  --tab-bg-hover: var(--surface-1);

  --tab-fg: #c1b9aa;
  --tab-fg-active: var(--fg);
  --tab-close-fg: #7c756a;
  --tab-close-hover: rgba(231, 226, 214, 0.10);

  --tab-active-top: var(--accent);
  --tab-active-top-special: #f08a2a;

  /* Scrollbars */
  --scrollbar-thumb: #2b3c44;
  --scrollbar-thumb-hover: #3b5560;

  --os-thumb: #445e69;
  --os-thumb-hover: #5a7a88;

  --tree-line-dim: #3b5560;
  --tree-line-bright: #5a7a88;

  /* Optional: theme-flavored goal progress */
  --goal-progress: rgba(46, 168, 111, 0.22);

  --success: #34d399;

  /* Extra “brand” tokens (optional, used elsewhere if you want) */
  --shinobi-seal: #f08a2a;
  --shinobi-seal-2: #c96a16;
}

/* =========================
   Theme: Space Odyssey
   ========================= */
:root[data-theme="space-odyssey"] {
  /* Foundation */
  --wb-bg: #070a14;
  --editor-bg: #0b1020;

  --surface-0: var(--wb-bg);
  --surface-1: #0f1730;
  --surface-2: #121d3b;
  --surface-3: #0d152b;

  --input-bg: #0a1226;
  --input-bg-2: #121d3b;

  --border: #22305a;
  --border-2: #2b3f74;
  --divider: #18264a;
  --divider-2: #2b3f74;

  --fg: #e9eeff;
  --fg-muted: #b7c3f2;
  --fg-dim: #8796cf;
  --fg-subtle: #5f6fa6;
  --fg-invert: #ffffff;

  --accent: #7c3aed;
  --accent-2: #22d3ee;
  --accent-hover: #a78bfa;

  --list-hover: #14224a;
  --active-bg: #0f1c3a;

  --selection-bg: rgba(34, 211, 238, 0.18);
  --focus-ring: rgba(124, 58, 237, 0.45);

  --danger: #ff3b6b;
  --danger-fg: #ffd0dc;

  /* Chrome (optional) */
  --statusbar-bg: var(--wb-bg);
  --statusbar-hover: #0e1630;
  --statusbar-pill-bg: #0a1327;

  --titlebar-bg: var(--wb-bg);
  --titlebar-bg-blur: #0b1020;
  --titlebar-border: var(--border);
  --titlebar-hover: rgba(167, 139, 250, 0.14);
  --titlebar-close-hover: #ff3b6b;

  --titlebar-search-bg: #0a1327;
  --titlebar-search-bg-blur: #0c1731;
  --titlebar-search-border: #2b3f74;
  --titlebar-search-border-blur: #22305a;
  --titlebar-search-placeholder: #8796cf;

  --sidebar-bg: #070a14;

  --sidebar-icon: #8796cf;
  --sidebar-icon-active: var(--fg);
  --sidebar-icon-hover: var(--fg);

  --menu-bg: #121d3b;
  --menu-border: #2b3f74;
  --menu-item-hover: #14224a;
  --menu-separator: #22305a;

  --tabbar-bg: var(--wb-bg);
  --tabbar-border: var(--border);

  --tab-bg: var(--surface-0);
  --tab-bg-active: var(--editor-bg);
  --tab-bg-hover: var(--surface-1);

  --tab-fg: #b7c3f2;
  --tab-fg-active: var(--fg);
  --tab-close-fg: #5f6fa6;
  --tab-close-hover: rgba(167, 139, 250, 0.18);

  --tab-active-top: var(--accent);
  --tab-active-top-special: #22d3ee;

  /* Scrollbars */
  --scrollbar-thumb: #2b3f74;
  --scrollbar-thumb-hover: #3b5aa4;

  --os-thumb: #4a66a8;
  --os-thumb-hover: #6a86c9;

  --tree-line-dim: #3b5aa4;
  --tree-line-bright: #6a86c9;

  --goal-progress: rgba(124, 58, 237, 0.22);

  --success: #2dd4bf;
}

/* =========================
   Theme: Obsidian
   ========================= */
:root[data-theme="obsidian"] {
  /* Foundation */
  --wb-bg: #0f1117;
  --editor-bg: #14161d;

  --surface-0: var(--wb-bg);
  --surface-1: #181b23;
  --surface-2: #1d212b;
  --surface-3: #161922;

  --input-bg: #12141a;
  --input-bg-2: #1d212b;

  --border: #262a35;
  --border-2: #313645;
  --divider: #202431;
  --divider-2: #313645;

  --fg: #e6e8ef;
  --fg-muted: #b4b8c5;
  --fg-dim: #8b91a3;
  --fg-subtle: #666c7e;
  --fg-invert: #ffffff;

  --accent: #7c6cff;
  --accent-2: #5f52d6;
  --accent-hover: #978bff;

  --list-hover: #202534;
  --active-bg: #1c2130;

  --selection-bg: rgba(124, 108, 255, 0.22);
  --focus-ring: rgba(124, 108, 255, 0.45);

  --danger: #ff5c7a;
  --danger-fg: #ffc7d1;

  /* Chrome (optional) */
  --statusbar-bg: var(--wb-bg);
  --statusbar-hover: #1a1d26;
  --statusbar-pill-bg: #151821;

  --titlebar-bg: var(--wb-bg);
  --titlebar-bg-blur: #14161d;
  --titlebar-border: var(--border);
  --titlebar-hover: rgba(255, 255, 255, 0.06);
  --titlebar-close-hover: #e5484d;

  --titlebar-search-bg: #151821;
  --titlebar-search-bg-blur: #171a22;
  --titlebar-search-border: #313645;
  --titlebar-search-border-blur: #262a35;
  --titlebar-search-placeholder: var(--fg-dim);

  --sidebar-bg: var(--wb-bg);

  --sidebar-icon: var(--fg-dim);
  --sidebar-icon-active: var(--fg);
  --sidebar-icon-hover: var(--fg);

  --menu-bg: #1d212b;
  --menu-border: #313645;
  --menu-item-hover: #222739;
  --menu-separator: #262a35;

  --tabbar-bg: var(--wb-bg);
  --tabbar-border: var(--border);

  --tab-bg: var(--surface-0);
  --tab-bg-active: var(--editor-bg);
  --tab-bg-hover: var(--surface-1);

  --tab-fg: var(--fg-muted);
  --tab-fg-active: var(--fg);
  --tab-close-fg: var(--fg-subtle);
  --tab-close-hover: rgba(255, 255, 255, 0.10);

  --tab-active-top: var(--accent);
  --tab-active-top-special: #22c55e;

  /* Scrollbars */
  --scrollbar-thumb: #323748;
  --scrollbar-thumb-hover: #444b61;

  --os-thumb: #4b5166;
  --os-thumb-hover: #646b86;

  --tree-line-dim: #3a4053;
  --tree-line-bright: #585f79;

  --goal-progress: rgba(124, 108, 255, 0.25);

  --success: #4ade80;
}

/* =========================
   Theme: Diagnostic Dark (SAFE TEST)
   ========================= */
:root[data-theme="diagnostic-dark"] {
  /* Foundation */
  --wb-bg: #111318;
  --editor-bg: #171a21;

  --surface-0: var(--wb-bg);
  --surface-1: #1c2028;
  --surface-2: #232833;
  --surface-3: #2a3040;

  --input-bg: #141821;
  --input-bg-2: #232833;

  --border: #2f3645;
  --border-2: #3a4255;
  --divider: #2a3040;
  --divider-2: #3a4255;

  --fg: #e6e9ef;
  --fg-muted: #b4bac7;
  --fg-dim: #8b93a6;
  --fg-subtle: #6c7486;
  --fg-invert: #ffffff;

  --accent: #4f8cff;
  --accent-2: #3a6edc;
  --accent-hover: #6aa2ff;

  --list-hover: #262c3a;
  --active-bg: #202634;
  --selection-bg: #2b4d91;

  --focus-ring: rgba(79, 140, 255, 0.45);

  --danger: #ff5c7a;
  --danger-fg: #ffc7d1;

  /* Chrome */
  --statusbar-bg: var(--wb-bg);
  --statusbar-hover: #1c2028;
  --statusbar-pill-bg: #1a1e26;

  --titlebar-bg: var(--wb-bg);
  --titlebar-bg-blur: #171a21;
  --titlebar-border: var(--border);
  --titlebar-hover: rgba(255, 255, 255, 0.08);
  --titlebar-close-hover: #e5484d;

  --titlebar-search-bg: #141821;
  --titlebar-search-bg-blur: #1a1e26;
  --titlebar-search-border: var(--border-2);
  --titlebar-search-border-blur: var(--border);
  --titlebar-search-placeholder: var(--fg-dim);

  --sidebar-bg: var(--wb-bg);
  --sidebar-border: var(--border);

  --sidebar-icon: var(--fg-dim);
  --sidebar-icon-active: var(--fg);
  --sidebar-icon-hover: var(--fg);

  --sidebar-indicator: var(--accent);

  --sidebar-avatar-border: var(--border-2);
  --sidebar-badge-border: var(--sidebar-bg);

  --tabbar-bg: var(--wb-bg);
  --tabbar-border: var(--border);

  --tab-bg: var(--surface-0);
  --tab-bg-active: var(--editor-bg);
  --tab-bg-hover: var(--surface-1);

  --tab-fg: var(--fg-muted);
  --tab-fg-active: var(--fg);
  --tab-close-fg: var(--fg-subtle);
  --tab-close-hover: rgba(255, 255, 255, 0.10);

  --tab-active-top: var(--accent);
  --tab-active-top-special: #22c55e;

  /* Scrollbars */
  --scrollbar-thumb: #3a4255;
  --scrollbar-thumb-hover: #505a70;

  --os-thumb: #5a6580;
  --os-thumb-hover: #7280a0;

  /* Tree lines */
  --tree-line-dim: #3f475a;
  --tree-line-bright: #5c6785;
}

/* =========================
   Global defaults
   ========================= */

/* Ensure borders default to theme token (prevents "white borders") */
*, ::before, ::after {
  border-color: var(--border);
}