/**
 * テーマ管理ファイル
 * ライトテーマとダークテーマの切り替え用スタイルを定義
 */

/* ライトテーマ (デフォルト) */
:root {
  --color-bg-primary: #e1e5ea;
  --color-bg-secondary: #dfe6f0;
  --color-bg-tertiary: #d1daea;
  --color-bg-accent: #2d3748;
  
  --color-text-primary: #444;
  --color-text-heading: #2c3e50;
  --color-text-accent: #e2e8f0;
  
  --color-hover: rgba(0, 0, 0, 0.05);
  --color-active: rgba(0, 0, 0, 0.1);
  
  --color-border: #cfd9e6;
  
  --shadow-opacity: 0.15;
  --input-background: #fff;
  
  /* モナコエディタ用 */
  --monaco-theme: 'light';
  --line-number-color: #777;
  --line-number-hover-color: #333;
}

/* ダークテーマ */
.theme-dark {
  --color-bg-primary: #1a202c;
  --color-bg-secondary: #2d3748;
  --color-bg-tertiary: #3a4a61;
  --color-bg-accent: #0e2233;
  
  --color-text-primary: #e2e8f0;
  --color-text-heading: #f7fafc;
  --color-text-accent: #a2b6c7;
  
  --color-hover: rgba(255, 255, 255, 0.05);
  --color-active: rgba(255, 255, 255, 0.1);
  
  --color-border: #4a5568;
  
  --shadow-opacity: 0.3;
  --input-background: #1a202c;
  
  /* モナコエディタ用 */
  --monaco-theme: 'dark';
  --line-number-color: #858585;
  --line-number-hover-color: #c0c0c0;
}

/* 明示的なテーマ適用クラス */
.theme-light .monaco-editor .margin-view-overlays .line-numbers {
  color: var(--line-number-color) !important;
}

.theme-dark .monaco-editor .margin-view-overlays .line-numbers {
  color: var(--line-number-color) !important;
}

.theme-light .monaco-editor .margin-view-overlays .line-numbers:hover {
  color: var(--line-number-hover-color) !important;
}

.theme-dark .monaco-editor .margin-view-overlays .line-numbers:hover {
  color: var(--line-number-hover-color) !important;
}

/* ステータスバーのテーマ対応 */
.theme-light .status-bar {
  background-color: #e8e8e8;
  color: #666666;
  border-top: 1px solid #d0d0d0;
}

.theme-dark .status-bar {
  background-color: var(--color-bg-accent);
  color: var(--color-text-accent);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* パッケージインジケーターのテーマ対応 */
.theme-light .package-pill {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.theme-dark .package-pill {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 入力フィールドのテーマ対応 */
.theme-light input, 
.theme-light select, 
.theme-light textarea {
  background-color: var(--input-background);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.theme-dark input, 
.theme-dark select, 
.theme-dark textarea {
  background-color: var(--input-background);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}