@charset "UTF-8";

/* === テーマ変数（ライトモード：Python版の配色を完全再現） === */
:root {
  --bg-color: #F0F4FF;       /* リスト背景などの薄い青 [2] */
  --container-bg: #FFFFFF;
  --text-color: #333333;
  --primary-color: #4472C4;  /* メインの青色 [1] */
  --primary-hover: #355C9D;
  --danger-color: #C44444;   /* 削除・警告の赤色 [3] */
  --highlight-color: #FFE066;/* 検索ヒット時のハイライト黄色 [4] */
  --link-color: #0563C1;     /* リンクの青色 [5] */
  --border-color: #CCCCCC;
  --input-bg: #FFFFFF;
  --input-text: #000000;
  --toast-bg: #333333;
  --toast-text: #FFFFFF;
  --font-base: 'Segoe UI', Meiryo, sans-serif; /* メイリオを継承 [1] */
}

/* === テーマ変数（ダークモード） === */
[data-theme="dark"] {
  --bg-color: #121212;
  --container-bg: #1E1E1E;
  --text-color: #E0E0E0;
  --primary-color: #5A8DEE;
  --primary-hover: #4B79D0;
  --danger-color: #E57373;
  --highlight-color: #B8860B; 
  --link-color: #66B2FF;
  --border-color: #444444;
  --input-bg: #2C2C2C;
  --input-text: #E0E0E0;
  --toast-bg: #5A8DEE;
  --toast-text: #FFFFFF;
}

/* === 全体共通のベーススタイル === */
body {
  font-family: var(--font-base);
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  transition: background-color 0.3s, color 0.3s;
}

/* 共通ボタンデザイン */
.btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9em;
  transition: background 0.2s;
}
.btn:hover { background: var(--primary-hover); }
.btn-danger { background: var(--danger-color); }