/* viewer/lib/theme.css
 * 全ページ共通のテーマ変数 + theme-toggle ボタンスタイル
 * 出所: viewer/index.html (2026-06-09 時点の正)
 */

:root {
  --bg-page: #0a0a0f;
  --bg-header: rgba(10,10,15,0.92);
  --bg-card: #14141c;
  --bg-card-subtle: rgba(255,255,255,0.03);
  --bg-card-stronger: rgba(255,255,255,0.06);
  --border-faint: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.2);
  --text-1: #fff;
  --text-2: rgba(255,255,255,0.78);
  --text-3: rgba(255,255,255,0.6);
  --text-4: rgba(255,255,255,0.45);
  --text-5: rgba(255,255,255,0.3);
  --hover: rgba(255,255,255,0.05);
  --accent: #93c5fd;
  --accent-soft: rgba(147,197,253,0.15);
  --accent-soft-border: rgba(147,197,253,0.35);
  --accent-hover: rgba(147,197,253,0.25);
  --ok: #4ade80;
  --ok-soft: rgba(74,222,128,0.15);
  --ok-soft-border: rgba(74,222,128,0.25);
  --warn: #f87171;
  --warn-soft: rgba(248,113,113,0.15);
  --warn-soft-border: rgba(248,113,113,0.25);
  --ai-grad: linear-gradient(90deg, rgba(96,165,250,0.06), rgba(192,132,252,0.04));
  --ai-grad-border: rgba(96,165,250,0.15);
  --scroll-thumb: rgba(255,255,255,0.12);
  --on-accent: #0a0a0f;
}

:root[data-theme="light"] {
  --bg-page: #f5f6fa;
  --bg-header: rgba(245,246,250,0.92);
  --bg-card: #ffffff;
  --bg-card-subtle: rgba(0,0,0,0.03);
  --bg-card-stronger: rgba(0,0,0,0.06);
  --border-faint: rgba(0,0,0,0.05);
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.2);
  --text-1: #14141c;
  --text-2: rgba(0,0,0,0.78);
  --text-3: rgba(0,0,0,0.6);
  --text-4: rgba(0,0,0,0.5);
  --text-5: rgba(0,0,0,0.35);
  --hover: rgba(0,0,0,0.05);
  --accent: #2563eb;
  --accent-soft: rgba(37,99,235,0.10);
  --accent-soft-border: rgba(37,99,235,0.3);
  --accent-hover: rgba(37,99,235,0.18);
  --ok: #16a34a;
  --ok-soft: rgba(22,163,74,0.12);
  --ok-soft-border: rgba(22,163,74,0.3);
  --warn: #dc2626;
  --warn-soft: rgba(220,38,38,0.10);
  --warn-soft-border: rgba(220,38,38,0.3);
  --ai-grad: linear-gradient(90deg, rgba(37,99,235,0.05), rgba(168,85,247,0.04));
  --ai-grad-border: rgba(37,99,235,0.15);
  --scroll-thumb: rgba(0,0,0,0.18);
  --on-accent: #ffffff;
}

/* テーマ切替ボタン (共通、index.html の値を正) */
.theme-toggle {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-2); cursor: pointer;
  width: 32px; height: 32px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; font-family: inherit; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--hover); color: var(--text-1); border-color: var(--text-2); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: inline; }

/* モバイル: ボタンを小さく */
@media (max-width: 768px) {
  .theme-toggle { width: 28px; height: 28px; font-size: 0.85rem; flex-shrink: 0; }
}

/* Leaflet popup をテーマ対応 (Leaflet を使う holdings/trs-board/dev-map 共通)
 * 既存は popup デフォルト白背景に white テキストが乗って読めなかった (前からの bug)。
 * leaflet.css が theme.css より後に読み込まれるページ (head 順序) もあるため !important。 */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--bg-card, #14141c) !important;
  color: var(--text-1) !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35) !important;
}
.leaflet-popup-content-wrapper { padding: 2px !important; }
.leaflet-popup-content { margin: 8px 22px 8px 10px !important; line-height: 1.35 !important; }
.leaflet-popup-close-button { color: var(--text-3) !important; padding: 4px 6px 0 0 !important; }
.leaflet-popup-close-button:hover { color: var(--text-1) !important; }