:root {
  /* Surface tokens */
  --surface-base: #ffffff;
  --surface-secondary: #f5f5f5;
  --surface-muted: #f8f9fa;
  --surface-code: #f8f8f8;
  --surface-hover: #e0e0e0;
  
  /* Border tokens */
  --border-base: #e0e0e0;
  --border-secondary: #e0e0e0;
  --border-muted: #e0e0e0;
  
  /* Text tokens */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-muted: #666666;
  --text-inverted: #ffffff;
  
  /* Accent tokens */
  --accent-primary: #0066ff;
  --accent-hover: #0052cc;
  
  /* Status tokens */
  --status-success: #4caf50;
  --status-error: #f44336;
  --status-warning: #ff9800;
  
  /* Message-specific tokens */
  --message-user-bg: var(--surface-secondary);
  --message-user-border: #2196f3;
  --message-assistant-bg: var(--message-tool-bg);
  --message-assistant-border: #f59e0b;

  --message-tool-bg: #f8f9fa;
  --message-tool-border: #6c757d;

  /* Semantic component colors */
  --session-status-working-fg: #b45309;
  --session-status-working-bg: rgba(245, 158, 11, 0.16);
  --session-status-compacting-fg: #6d28d9;
  --session-status-compacting-bg: rgba(109, 40, 217, 0.18);
  --session-status-idle-fg: #15803d;
  --session-status-idle-bg: rgba(22, 163, 74, 0.16);
  --list-item-highlight-bg: rgba(0, 102, 255, 0.1);
  --list-item-highlight-border: rgba(0, 102, 255, 0.25);
  --attachment-chip-bg: rgba(0, 102, 255, 0.1);
  --attachment-chip-text: #0066ff;
  --attachment-chip-ring: rgba(0, 102, 255, 0.1);
  --badge-neutral-bg: rgba(0, 102, 255, 0.05);
  --badge-neutral-text: #0066ff;
  --status-ready-fg: #16a34a;
  --status-ready-bg: rgba(34, 197, 94, 0.1);
  --status-starting-fg: #ca8a04;
  --status-starting-bg: rgba(250, 204, 21, 0.1);
  --status-error-fg: #dc2626;
  --status-error-bg: rgba(239, 68, 68, 0.1);
  --status-stopped-fg: #6b7280;
  --status-stopped-bg: rgba(107, 114, 128, 0.1);
  --env-vars-bg: rgba(0, 102, 255, 0.1);
  --env-vars-border: rgba(0, 102, 255, 0.2);
  --env-vars-text: #0066ff;
  --folder-overlay-bg: rgba(0, 0, 0, 0.35);
  --folder-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  --folder-card-radius: 16px;
  --dropdown-highlight-bg: rgba(0, 102, 255, 0.1);
  --dropdown-highlight-text: var(--text-inverted);
  --selection-highlight-bg: rgba(0, 102, 255, 0.12);
  --selection-highlight-strong-bg: rgba(0, 102, 255, 0.18);
  --overlay-scrim: rgba(0, 0, 0, 0.5);
  --scroll-elevation-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  --message-error-bg: rgba(244, 67, 54, 0.1);
  --message-error-bg-strong: rgba(244, 67, 54, 0.15);
  --danger-soft-bg: rgba(239, 68, 68, 0.1);
  --danger-soft-bg-strong: rgba(244, 67, 54, 0.15);
  --log-level-error: var(--status-error);
  --log-level-warn: var(--status-warning);
  --log-level-debug: var(--text-muted);
  --log-level-default: var(--text-primary);
  --focus-ring-color: var(--accent-primary);
  --focus-ring-offset: var(--surface-base);
  --kbd-bg: var(--surface-secondary);
  --kbd-border: var(--border-base);
  --kbd-text: var(--text-primary);
  --button-primary-bg: var(--accent-primary);
  --button-primary-hover-bg: var(--accent-hover);
  --button-primary-text: var(--text-inverted);
  --tab-active-bg: var(--accent-primary);
  --tab-active-hover-bg: var(--accent-hover);
  --tab-active-text: var(--text-inverted);
  --tab-inactive-bg: var(--surface-muted);
  --tab-inactive-hover-bg: var(--surface-hover);
  --tab-inactive-text: var(--text-secondary);
  --new-tab-bg: var(--surface-secondary);
  --new-tab-hover-bg: var(--surface-hover);
  --new-tab-text: var(--text-muted);
  --session-tab-active-bg: var(--surface-base);
  --session-tab-active-text: var(--text-primary);
  --session-tab-inactive-text: var(--text-muted);
  --session-tab-hover-bg: var(--surface-hover);

  /* Layout & spacing tokens */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --button-padding-y: 0.75rem;
  --button-padding-x: 1.25rem;
  --button-radius: 0.5rem;
  --chip-radius: 0.375rem;
  --pill-radius: 9999px;
  
  /* Typography tokens */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  
  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  
  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Surface tokens */
    --surface-base: #1a1a1a;
    --surface-secondary: #2a2a2a;
    --surface-muted: #212529;
    --surface-code: #1a1a1a;
    --surface-hover: #3a3a3a;
    
    /* Border tokens */
    --border-base: #3a3a3a;
    --border-secondary: #3a3a3a;
    --border-muted: #3a3a3a;
    
    /* Text tokens */
    --text-primary: #cfd4dc;
    --text-secondary: #999999;
    --text-muted: #999999;
    --text-inverted: #1a1a1a;
    
    /* Accent tokens */
    --accent-primary: #0080ff;
    --accent-hover: #0066cc;
    
    /* Status tokens */
    --status-success: #4caf50;
    --status-error: #f44336;
    --status-warning: #ff9800;
    
    /* Message-specific tokens */
    --message-user-bg: #202734;
    --message-user-border: #42a5f5;
    --message-assistant-bg: var(--message-tool-bg);
    --message-assistant-border: #d97706;

    --message-tool-bg: #212529;
    --message-tool-border: #adb5bd;

    /* Semantic component colors */
    --session-status-working-fg: #facc15;
    --session-status-working-bg: rgba(250, 204, 21, 0.25);
    --session-status-compacting-fg: #c084fc;
    --session-status-compacting-bg: rgba(192, 132, 252, 0.28);
    --session-status-idle-fg: #4ade80;
    --session-status-idle-bg: rgba(74, 222, 128, 0.22);
    --list-item-highlight-bg: rgba(0, 128, 255, 0.2);
    --list-item-highlight-border: rgba(0, 128, 255, 0.4);
    --attachment-chip-bg: rgba(0, 128, 255, 0.1);
    --attachment-chip-text: #0080ff;
    --attachment-chip-ring: rgba(0, 128, 255, 0.2);
  --badge-neutral-bg: rgba(0, 128, 255, 0.15);
  --badge-neutral-text: #0080ff;
  --status-ready-fg: #22c55e;
  --status-ready-bg: rgba(34, 197, 94, 0.2);
  --status-starting-fg: #facc15;
  --status-starting-bg: rgba(250, 204, 21, 0.2);
  --status-error-fg: #ef4444;
  --status-error-bg: rgba(239, 68, 68, 0.2);
  --status-stopped-fg: #9ca3af;
  --status-stopped-bg: rgba(107, 114, 128, 0.2);
  --env-vars-bg: rgba(0, 128, 255, 0.2);
  --env-vars-border: rgba(0, 128, 255, 0.3);
  --env-vars-text: #0080ff;
  --folder-overlay-bg: rgba(0, 0, 0, 0.45);
  --folder-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --folder-card-radius: 16px;
  --dropdown-highlight-bg: rgba(0, 128, 255, 0.2);
  --dropdown-highlight-text: var(--text-primary);
  --kbd-bg: var(--surface-secondary);
  --kbd-border: var(--border-base);
  --kbd-text: var(--text-primary);
  --button-primary-bg: #3f3f46;
  --button-primary-hover-bg: #52525b;
  --button-primary-text: #f5f6f8;
  --tab-active-bg: #3f3f46;
  --tab-active-hover-bg: #52525b;
  --tab-active-text: #f5f6f8;
  --tab-inactive-bg: #2a2a31;
  --tab-inactive-hover-bg: #3f3f46;
  --tab-inactive-text: #d4d4d8;
  --new-tab-bg: #3f3f46;
  --new-tab-hover-bg: #52525b;
  --new-tab-text: #f5f6f8;
  --session-tab-active-bg: var(--surface-muted);
  --session-tab-active-text: var(--text-primary);
  --session-tab-inactive-text: var(--text-muted);
  --session-tab-hover-bg: #3f3f46;

    --button-primary-bg: #3f3f46;
    --button-primary-hover-bg: #52525b;
    --button-primary-text: #f5f6f8;
    --tab-active-bg: #3f3f46;
    --tab-active-hover-bg: #52525b;
    --tab-active-text: #f5f6f8;
    --tab-inactive-bg: #2f2f36;
    --tab-inactive-hover-bg: #3d3d45;
    --tab-inactive-text: #d4d4d8;
    --new-tab-bg: #3f3f46;
    --new-tab-hover-bg: #52525b;
    --new-tab-text: #f5f6f8;
    --session-tab-active-bg: var(--surface-muted);
    --session-tab-active-text: var(--text-primary);
    --session-tab-inactive-text: var(--text-muted);
    --session-tab-hover-bg: #3f3f46;

    /* Layout & spacing tokens */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
    --button-padding-y: 0.75rem;
    --button-padding-x: 1.25rem;
    --button-radius: 0.5rem;
    --chip-radius: 0.375rem;
    --pill-radius: 9999px;
    
    /* Typography tokens (same as light theme) */
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font sizes */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    
    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;

  }
}

[data-theme="dark"] {
  /* Surface tokens */
  --surface-base: #1a1a1a;
  --surface-secondary: #2a2a2a;
  --surface-muted: #212529;
  --surface-code: #1a1a1a;
  --surface-hover: #3a3a3a;
  
  /* Border tokens */
  --border-base: #3a3a3a;
  --border-secondary: #3a3a3a;
  --border-muted: #3a3a3a;
  
  /* Text tokens */
  --text-primary: #cfd4dc;
  --text-secondary: #999999;
  --text-muted: #999999;
  --text-inverted: #1a1a1a;
  
  /* Accent tokens */
  --accent-primary: #0080ff;
  --accent-hover: #0066cc;
  
  /* Status tokens */
  --status-success: #4caf50;
  --status-error: #f44336;
  --status-warning: #ff9800;
  
  /* Message-specific tokens */
  --message-user-bg: #202734;
  --message-user-border: #2196f3;
  --message-assistant-bg: var(--message-tool-bg);
  --message-assistant-border: #d97706;

  --message-tool-bg: #212529;
  --message-tool-border: #adb5bd;

  /* Semantic component colors */
  --session-status-working-fg: #facc15;
  --session-status-working-bg: rgba(250, 204, 21, 0.25);
  --session-status-compacting-fg: #c084fc;
  --session-status-compacting-bg: rgba(192, 132, 252, 0.28);
  --session-status-idle-fg: #4ade80;
  --session-status-idle-bg: rgba(74, 222, 128, 0.22);
  --list-item-highlight-bg: rgba(0, 128, 255, 0.2);
  --list-item-highlight-border: rgba(0, 128, 255, 0.4);
  --attachment-chip-bg: rgba(0, 128, 255, 0.1);
  --attachment-chip-text: #0080ff;
  --attachment-chip-ring: rgba(0, 128, 255, 0.2);
  --badge-neutral-bg: rgba(0, 128, 255, 0.15);
  --badge-neutral-text: #0080ff;
  --status-ready-fg: #22c55e;
  --status-ready-bg: rgba(34, 197, 94, 0.2);
  --status-starting-fg: #facc15;
  --status-starting-bg: rgba(250, 204, 21, 0.2);
  --status-error-fg: #ef4444;
  --status-error-bg: rgba(239, 68, 68, 0.2);
  --status-stopped-fg: #9ca3af;
  --status-stopped-bg: rgba(107, 114, 128, 0.2);
  --env-vars-bg: rgba(0, 128, 255, 0.2);
  --env-vars-border: rgba(0, 128, 255, 0.3);
  --env-vars-text: #0080ff;
  --folder-overlay-bg: rgba(0, 0, 0, 0.45);
  --folder-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --folder-card-radius: 16px;
  --dropdown-highlight-bg: rgba(0, 128, 255, 0.2);
  --dropdown-highlight-text: var(--text-primary);
  --selection-highlight-bg: rgba(0, 128, 255, 0.18);
  --selection-highlight-strong-bg: rgba(0, 128, 255, 0.28);
  --overlay-scrim: rgba(0, 0, 0, 0.6);
  --scroll-elevation-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  --message-error-bg: rgba(244, 67, 54, 0.12);
  --message-error-bg-strong: rgba(244, 67, 54, 0.2);
  --danger-soft-bg: rgba(244, 67, 54, 0.16);
  --danger-soft-bg-strong: rgba(244, 67, 54, 0.28);
  --log-level-error: var(--status-error);
  --log-level-warn: var(--status-warning);
  --log-level-debug: var(--text-secondary);
  --log-level-default: var(--text-primary);
  --focus-ring-color: var(--accent-primary);
  --focus-ring-offset: var(--surface-base);
  --kbd-bg: var(--surface-secondary);
  --kbd-border: var(--border-base);
  --kbd-text: var(--text-primary);

  /* Layout & spacing tokens */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --button-padding-y: 0.75rem;
  --button-padding-x: 1.25rem;
  --button-radius: 0.5rem;
  --chip-radius: 0.375rem;
  --pill-radius: 9999px;
  
  /* Typography tokens (same as light theme) */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  
  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

}