/* =========================================
   TRPG関連ページ 共通デザイントークン
   (探索者DB・うちよそ・今後増えるTRPG系ページ共通)

   読み込み順の想定:
   trpg-shared-tokens.css → 各ページ固有CSS(explorer-base.css / relation-detail.css 等)

   各ページ側では、ここの --tg-* 変数をそのまま使うか、
   ページ固有の変数名(--relation-accent-safe など)から
   ここの変数へフォールバックする形で参照してください。

   例:
   --relation-accent-safe: var(--relation-accent, var(--tg-accent-fallback));
   ========================================= */

:root {
  /* ---- ベース(ダーク基調。noirテーマ・うちよそページ系) ---- */
  --tg-bg-main: #0b0d10;
  --tg-panel: rgba(15, 17, 20, 0.86);
  --tg-panel-2: rgba(15, 17, 20, 0.68);

  --tg-line-1: rgba(255, 255, 255, 0.10);
  --tg-line-2: rgba(255, 255, 255, 0.06);

  --tg-text-1: rgba(255, 255, 255, 0.94);
  --tg-text-2: rgba(255, 255, 255, 0.74);
  --tg-text-3: rgba(255, 255, 255, 0.46);

  --tg-radius: 16px;
  --tg-radius-sm: 12px;

  --tg-shadow-1: 0 20px 60px rgba(0, 0, 0, 0.35);
  --tg-shadow-2: 0 24px 80px rgba(0, 0, 0, 0.40);

  /* 個別のアクセント色が無い場合の保険色 */
  --tg-accent-fallback: #8ea2b8;

  /* ---- ライト基調が必要な場合はこちらを使う(cream相当) ---- */
  --tg-bg-main-light: #f6f0e6;
  --tg-panel-light: rgba(255, 252, 247, 0.86);
  --tg-panel-2-light: rgba(255, 250, 244, 0.72);
  --tg-line-1-light: rgba(120, 96, 72, 0.16);
  --tg-line-2-light: rgba(120, 96, 72, 0.09);
  --tg-text-1-light: rgba(58, 46, 40, 0.92);
  --tg-text-2-light: rgba(58, 46, 40, 0.72);
  --tg-text-3-light: rgba(58, 46, 40, 0.48);

  /* ---- 共通の書体まわり ---- */
  --tg-mono: "Courier New", monospace;
  --tg-eyebrow-tracking: 0.16em;
}

/* =========================================
   ライトテーマ切り替え
   body[data-theme="light"] が付いている間、
   --tg-* の基本トークンをライト値に差し替える。
   各ページのCSSは var(--tg-text-1) 等をそのまま使えば
   自動的にライト/ダークどちらにも追従する。
   ========================================= */

body[data-theme="light"] {
  --tg-bg-main: var(--tg-bg-main-light);
  --tg-panel: var(--tg-panel-light);
  --tg-panel-2: var(--tg-panel-2-light);
  --tg-line-1: var(--tg-line-1-light);
  --tg-line-2: var(--tg-line-2-light);
  --tg-text-1: var(--tg-text-1-light);
  --tg-text-2: var(--tg-text-2-light);
  --tg-text-3: var(--tg-text-3-light);
}

/* =========================================
   テーマ切替ドット(共通パーツ)
   探索者ページの見た目に合わせた同じデザイン
   ========================================= */

.theme-switch {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 99999;
  display: flex;
  gap: 8px;
}

.theme-switch-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  appearance: none;
  -webkit-appearance: none;
}

.theme-switch-dot--cream {
  background: #f6f0e6;
}

.theme-switch-dot--noir {
  background: #0b0d10;
}

.theme-switch-dot.is-active {
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 3px rgba(0, 0, 0, 0.45);
}