extensions/vscode/webview-ui/src/styles/theme.css
:root {
  /* Derived from VS Code's editor background */
  --bg-base: var(--vscode-sideBar-background);
  --bg-50: color-mix(in oklab, var(--bg-base), rgb(255, 249, 236) 20%);
  --bg-100: color-mix(in oklab, var(--bg-base), rgb(255, 249, 236) 13%);
  --bg-200: color-mix(in oklab, var(--bg-base), rgb(255, 249, 236) 10%);
  --bg-300: color-mix(in oklab, var(--bg-base), rgb(255, 249, 236) 6%);
  --bg-400: color-mix(in oklab, var(--bg-base), rgb(255, 249, 236) 4%);
  --bg-450: color-mix(in oklab, var(--bg-base), rgb(255, 249, 236) 2%);
  --bg-500: var(--bg-base);
  --bg-550: color-mix(in oklab, var(--bg-base), rgb(6, 1, 24) 2%);
  --bg-600: color-mix(in oklab, var(--bg-base), rgb(6, 1, 24) 4%);
  --bg-650: color-mix(in oklab, var(--bg-base), rgb(6, 1, 24) 6%);
  --bg-700: color-mix(in oklab, var(--bg-base), rgb(6, 1, 24) 8%);
  --bg-750: color-mix(in oklab, var(--bg-base), rgb(6, 1, 24) 10%);
  --bg-800: color-mix(in oklab, var(--bg-base), rgb(6, 1, 24) 13%);
  --bg-850: color-mix(in oklab, var(--bg-base), rgb(6, 1, 24) 20%);

  --bg-lighter: color-mix(in oklab, var(--bg-base), rgb(255, 249, 236) 10%);
  --bg-lightest: color-mix(in oklab, var(--bg-base), rgb(255, 249, 236) 20%);
  --bg-darker: color-mix(in oklab, var(--bg-base), rgb(6, 1, 24) 10%);
  --bg-darkest: color-mix(in oklab, var(--bg-base), rgb(6, 1, 24) 20%);
  
  /* Derived from VS Code's foreground */
  --fg-base: var(--vscode-editor-foreground);
  --fg-muted: color-mix(in oklab, var(--fg-base), var(--bg-base) 20%);
  --fg-subtle: color-mix(in oklab, var(--fg-base), var(--bg-base) 40%);
  --fg-on-emphasis: color-mix(in oklab, var(--fg-base), var(--bg-base) 90%);
  
  /* Derived from VS Code's button colors */
  --accent-base: var(--vscode-button-background);
  --accent-fg: var(--vscode-button-foreground);
  --accent-subtle: color-mix(in oklab, var(--accent-base), var(--bg-base) 85%);
  --accent-muted: color-mix(in oklab, var(--accent-base), var(--bg-base) 50%);
  
  /* Derived from VS Code's error colors */
  --error-base: var(--vscode-errorForeground);
  --error-subtle: color-mix(in oklab, var(--error-base), var(--bg-base) 85%);
  --error-emphasis: color-mix(in oklab, var(--error-base), var(--fg-base) 30%);
  --error-muted: color-mix(in oklab, var(--error-base), var(--bg-base) 50%);

  /* Derived from VS Code's warning colors */
  --warning-base: var(--vscode-editorWarning-foreground);
  --warning-subtle: color-mix(in oklab, var(--warning-base), var(--bg-base) 85%);
  --warning-emphasis: color-mix(in oklab, var(--warning-base), var(--fg-base) 30%);
  --warning-muted: color-mix(in oklab, var(--warning-base), var(--bg-base) 50%);

  /* Derived from VS Code's info colors */
  --info-base: var(--vscode-editorInfo-foreground);
  --info-muted: color-mix(in oklab, var(--info-base), var(--bg-base) 50%);
  --info-subtle: color-mix(in oklab, var(--info-base), var(--bg-base) 85%);
  --info-emphasis: color-mix(in oklab, var(--info-base), var(--fg-base) 30%);

  /* Derived from VS Code's success colors */
  --success-base: var(--vscode-notebookStatusSuccessIcon-foreground);
  --success-subtle: color-mix(in oklab, var(--success-base), var(--bg-base) 85%);
  --success-emphasis: color-mix(in oklab, var(--success-base), var(--fg-base) 30%);
  --success-muted: color-mix(in oklab, var(--success-base), var(--bg-base) 50%);

  /* Derived from VS Code's link colors */
  --link-base: var(--vscode-textLink-foreground);
  --link-hover: color-mix(in oklab, var(--link-base), white 20%);
  --link-active: color-mix(in oklab, var(--link-base), black 20%);
  
  /* Derived from VS Code's border colors */
  --border-subtle: color-mix(in oklab, var(--fg-base), var(--bg-base) 90%);
  --border-default: color-mix(in oklab, var(--fg-base), var(--bg-base) 80%);
  --border-emphasis: color-mix(in oklab, var(--fg-base), var(--bg-base) 60%);
  
  /* Focus and selection colors */
  --focus-ring: var(--vscode-focusBorder);
  --selection-bg: var(--vscode-selection-background);
  --selection-fg: var(--vscode-selection-foreground, var(--fg-base));
  
  /* Semantic colors */
  --surface-default: var(--bg-base);
  --surface-raised: var(--bg-lighter);
  --surface-overlay: var(--bg-lightest);
  --surface-sunken: var(--bg-darker);
  --surface-code: var(--vscode-textBlockQuote-background, var(--bg-darker));
  
  --interactive-default: color-mix(in oklab, var(--accent-base), var(--bg-base) 65%);
  --interactive-hover: color-mix(in oklab, var(--accent-base), var(--bg-base) 30%);
  --interactive-active: var(--accent-base);
  --interactive-muted: color-mix(in oklab, var(--accent-base), var(--bg-base) 80%);
  
  --text-default: var(--fg-base);
  --text-muted: var(--fg-muted);
  --text-subtle: var(--fg-subtle);
  --text-on-emphasis: var(--fg-on-emphasis);
}
