/* Global CSS Variables for theming */
:root {
  /* Surface colors */
  --surface-0: #1e1e1e;
  --surface-1: #252526;
  --surface-2: #2d2d30;
  --surface-3: #3e3e42;
  
  /* Text colors */
  --text-primary: #cccccc;
  --text-secondary: #9d9d9d;
  --text-disabled: #5a5a5a;
  
  /* Border colors */
  --border-color: #464647;
  
  /* Primary colors */
  --primary: #007acc;
  --primary-hover: #1a86d9;
  
  /* Error/Success/Warning colors */
  --error: #f14c4c;
  --success: #73c991;
  --warning: #cca700;
  
  /* Font */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* VSCode compatibility mappings */
  --vscode-bg: var(--surface-0);
  --vscode-bg-light: var(--surface-1);
  --vscode-bg-lighter: var(--surface-2);
  --vscode-sidebar: var(--surface-1);
  --vscode-sidebar-hover: rgba(255, 255, 255, 0.04);
  --vscode-sidebar-active: rgba(255, 255, 255, 0.08);
  --vscode-sidebar-active-border: var(--primary);
  --vscode-titlebar: var(--surface-1);
  --vscode-text: var(--text-primary);
  --vscode-text-dim: var(--text-secondary);
  --vscode-border: var(--border-color);
  --vscode-accent: var(--primary);
  --vscode-accent-hover: var(--primary-hover);
  --vscode-error: var(--error);
  --vscode-font: var(--font-family);
  
  /* Success/Error background colors for dark theme */
  --success-bg: rgba(115, 201, 145, 0.15);
  --error-bg: rgba(241, 76, 76, 0.15);
}

/* Light theme */
:root.light {
  /* Surface colors */
  --surface-0: #ffffff;
  --surface-1: #f3f3f3;
  --surface-2: #ededed;
  --surface-3: #e8e8e8;
  
  /* Text colors */
  --text-primary: #1e1e1e;
  --text-secondary: #6e6e6e;
  --text-disabled: #a8a8a8;
  
  /* Border colors */
  --border-color: #e5e5e5;
  
  /* Primary colors */
  --primary: #0066cc;
  --primary-hover: #0052a3;
  
  /* Error/Success/Warning colors */
  --error: #d73a49;
  --success: #28a745;
  --warning: #ffc107;
  
  /* VSCode compatibility mappings */
  --vscode-bg: var(--surface-0);
  --vscode-bg-light: var(--surface-1);
  --vscode-bg-lighter: var(--surface-2);
  --vscode-sidebar: var(--surface-1);
  --vscode-sidebar-hover: rgba(0, 0, 0, 0.04);
  --vscode-sidebar-active: rgba(0, 0, 0, 0.08);
  --vscode-sidebar-active-border: var(--primary);
  --vscode-titlebar: var(--surface-1);
  --vscode-text: var(--text-primary);
  --vscode-text-dim: var(--text-secondary);
  --vscode-border: var(--border-color);
  --vscode-accent: var(--primary);
  --vscode-accent-hover: var(--primary-hover);
  --vscode-error: var(--error);
  --vscode-font: var(--font-family);
  
  /* Success/Error background colors for light theme */
  --success-bg: #d4edda;
  --error-bg: #f8d7da;
}

/* Reset and base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  background-color: var(--surface-0);
  color: var(--text-primary);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--surface-0);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) var(--surface-0);
}

/* Selection */
::selection {
  background: var(--primary);
  color: white;
}

/* Focus styles */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
