/*
 * VS Code "Dark Modern" theme tokens for the UI test harness.
 *
 * Inside VS Code every webview gets `--vscode-*` custom properties injected
 * on :root by the workbench. Outside VS Code (Playwright against a plain
 * Chromium page) nothing defines them, so every `var(--vscode-…)` in the
 * shared CSS would resolve to `initial`. This sheet pins the subset the
 * webviews actually reference to fixed values so screenshots are stable
 * and the UI renders as it does in the default dark theme.
 *
 * The values are VS Code's Dark Modern palette. A few names used by our CSS
 * are not real VS Code tokens (e.g. --vscode-list-headerBackground); those
 * get sensible neighbours so nothing renders transparent by accident.
 *
 * This file is also the seed of the "drop-in token sheet" the SPA migration
 * doc calls for (docs/portability/spa-migration.md → What's VS Code-specific).
 */
:root {
    --vscode-font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif;
    --vscode-font-size: 13px;
    --vscode-editor-font-family: "Droid Sans Mono", "monospace", monospace;
    --vscode-editor-font-size: 14px;

    --vscode-foreground: #cccccc;
    --vscode-disabledForeground: rgba(204, 204, 204, 0.5);
    --vscode-descriptionForeground: #9d9d9d;
    --vscode-errorForeground: #f88070;
    --vscode-icon-foreground: #cccccc;
    --vscode-focusBorder: #0078d4;
    --vscode-contrastBorder: transparent;
    --vscode-widget-border: #313131;
    --vscode-panel-border: #2b2b2b;
    --vscode-sash-hoverBorder: #0078d4;

    --vscode-editor-background: #1f1f1f;
    --vscode-editor-foreground: #cccccc;
    --vscode-editor-inactiveSelectionBackground: #3a3d41;
    --vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15);
    --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
    --vscode-editor-findMatchHighlightBorder: transparent;
    --vscode-editor-lineHighlightBackground: transparent;
    --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
    --vscode-editorCursor-foreground: #aeafad;
    --vscode-editorLineNumber-foreground: #6e7681;
    --vscode-editorLineNumber-activeForeground: #cccccc;
    --vscode-editorWidget-background: #202020;
    --vscode-editorWidget-border: #454545;
    --vscode-editorHoverWidget-background: #202020;
    --vscode-editorHoverWidget-foreground: #cccccc;
    --vscode-editorHoverWidget-border: #454545;
    --vscode-editorGroupHeader-tabsBackground: #181818;
    --vscode-editorWarning-foreground: #cca700;
    --vscode-editorWarning-background: transparent;
    --vscode-editorWarning-border: transparent;
    --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.2);
    --vscode-diffEditor-insertedLineBackground: rgba(156, 204, 44, 0.2);
    --vscode-merge-incomingHeaderBackground: rgba(57, 95, 143, 0.4);

    --vscode-sideBar-background: #181818;
    --vscode-sideBar-foreground: #cccccc;

    --vscode-input-background: #313131;
    --vscode-input-foreground: #cccccc;
    --vscode-input-border: #3c3c3c;
    --vscode-input-placeholderForeground: #989898;
    --vscode-inputValidation-errorBackground: #5a1d1d;
    --vscode-inputValidation-errorBorder: #be1100;
    --vscode-inputValidation-errorForeground: #cccccc;
    --vscode-inputValidation-warningBackground: #352a05;
    --vscode-inputValidation-warningBorder: #b89500;
    --vscode-inputValidation-warningForeground: #cccccc;
    --vscode-inputValidation-infoBackground: #063b49;
    --vscode-inputValidation-infoBorder: #007acc;
    --vscode-inputValidation-infoForeground: #cccccc;
    --vscode-checkbox-foreground: #cccccc;

    --vscode-dropdown-background: #313131;
    --vscode-dropdown-border: #3c3c3c;
    --vscode-dropdown-foreground: #cccccc;

    --vscode-button-background: #0078d4;
    --vscode-button-foreground: #ffffff;
    --vscode-button-border: rgba(255, 255, 255, 0.07);
    --vscode-button-hoverBackground: #026ec1;
    --vscode-button-secondaryBackground: #313131;
    --vscode-button-secondaryForeground: #cccccc;
    --vscode-button-secondaryHoverBackground: #3c3c3c;

    --vscode-badge-background: #616161;
    --vscode-badge-foreground: #f8f8f8;
    --vscode-progressBar-background: #0078d4;

    --vscode-list-hoverBackground: #2a2d2e;
    --vscode-list-activeSelectionBackground: #04395e;
    --vscode-list-activeSelectionForeground: #ffffff;
    --vscode-list-inactiveSelectionBackground: #37373d;
    --vscode-list-dropBackground: #383b3d;
    --vscode-list-headerBackground: #252526;
    --vscode-list-headerForeground: #cccccc;

    --vscode-tab-activeBackground: #1f1f1f;
    --vscode-tab-inactiveBackground: #181818;
    --vscode-tab-activeForeground: #ffffff;
    --vscode-tab-inactiveForeground: #9d9d9d;
    --vscode-tab-hoverBackground: #1f1f1f;
    --vscode-tab-hoverForeground: #ffffff;
    --vscode-tab-border: #2b2b2b;

    --vscode-textLink-foreground: #4daafc;
    --vscode-textLink-activeForeground: #4daafc;
    --vscode-textCodeBlock-background: #2b2b2b;
    --vscode-textBlockQuote-background: #2b2b2b;
    --vscode-textBlockQuote-border: #616161;
    --vscode-textPreformat-foreground: #d0d0d0;

    --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
    --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
    --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
    --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);

    --vscode-menu-background: #1f1f1f;
    --vscode-menu-foreground: #cccccc;
    --vscode-menu-border: #454545;
    --vscode-menu-selectionBackground: #0078d4;
    --vscode-menu-selectionForeground: #ffffff;
    --vscode-menu-separatorBackground: #454545;

    --vscode-notifications-background: #1f1f1f;
    --vscode-notifications-foreground: #cccccc;
    --vscode-notifications-border: #2b2b2b;
    --vscode-notificationsErrorIcon-foreground: #f14c4c;
    --vscode-notificationsWarningIcon-foreground: #cca700;
    --vscode-notificationsInfoIcon-foreground: #3794ff;

    --vscode-statusBarItem-errorBackground: #c72e0f;
    --vscode-statusBarItem-errorForeground: #ffffff;
    --vscode-errorList-errorForeground: #f88070;
    --vscode-errorBackground: #5a1d1d;
    --vscode-errorBorder: #be1100;

    --vscode-charts-red: #f14c4c;
    --vscode-charts-blue: #3794ff;
    --vscode-charts-yellow: #cca700;
    --vscode-charts-orange: #d18616;
    --vscode-charts-green: #89d185;
    --vscode-charts-purple: #b180d7;
    --vscode-terminal-ansiGreen: #23d18b;
    --vscode-terminal-ansiBlack: #000000;
    --vscode-testing-iconPassed: #73c991;
    --vscode-testing-iconFailed: #f14c4c;
    --vscode-testing-iconQueued: #cca700;

    --vscode-debugTokenExpression-name: #c586c0;
    --vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);
    --vscode-symbolIcon-keyForeground: #cccccc;
    --vscode-symbolIcon-stringForeground: #cccccc;
    --vscode-symbolIcon-propertyForeground: #cccccc;
    --vscode-symbolIcon-numberForeground: #cccccc;
    --vscode-symbolIcon-nullForeground: #cccccc;
    --vscode-symbolIcon-fileForeground: #cccccc;
    --vscode-symbolIcon-booleanForeground: #cccccc;
}

/* VS Code applies these on the webview body; mirror them so `body.vscode-dark`
 * selectors in the shared CSS match. */
body {
    background-color: var(--vscode-editor-background);
    color: var(--vscode-foreground);
    font-family: var(--vscode-font-family);
    font-size: var(--vscode-font-size);
}