/** ライト⇔ダークモード　カラー設定 */

/** ライトモードのデフォルトカラー */
:root,
body.light-mode {
  --bg: #e0e0e0; /* 全体の背景色 */
  --fg: #4d4c4b; /* 全体の文字色 */
  --fg-base: #4d4c4b; /* 常時基準の文字色 */
  --nb: #f7f6f2; /* ナビゲーションの背景 */
  --a: #0077cc;  /* リンク：通常時 */
  --av: #0000ff; /* リンク：訪問済み */
  --ah: #ff0000; /* リンク：ホバー時 */
  --lb: #2d2f41; /* ダークボタン：背景色 */
  --lf: #fff;    /* ダークボタン：文字色 */
  --lh: var(--ah); /* ダークボタン：ホバー色 */
  --dl: #423a3a; /* 無効リンク色 */
}

/** ダークモード（JS切替用） */
body.dark-mode {
    --bg: #2d2f41; /* 全体の背景色 */
    --fg: #fff;    /* 全体の文字色 */
    --fg-base: #4d4c4b; /* 常時基準の文字色 */
    --nb: #747796; /* ナビゲーションの背景 */
    --a: #66bfff;  /* リンク：通常時 */
    --av: #00ffff; /* リンク：訪問済み */
    --ah: #ff0000; /* リンク：ホバー時 */
    --lb: #f0f0f0; /* ダークボタン：背景色 */
    --lf: #000;    /* ダークボタン：文字色 */
    --lh: var(--ah); /* ダークボタン：ホバー色 */
    --dl: #1a4058; /* 無効リンク色 */
  }

/** ダークモード（OS設定連動用） */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2d2f41; /* 全体の背景色 */
    --fg: #fff;    /* 全体の文字色 */
    --fg-base: #4d4c4b; /* 常時基準の文字色 */
    --nb: #747796; /* ナビゲーションの背景 */
    --a: #66bfff;  /* リンク：通常時 */
    --av: #00ffff; /* リンク：訪問済み */
    --ah: #ff0000; /* リンク：ホバー時 */
    --lb: #f0f0f0; /* ダークボタン：背景色 */
    --lf: #000;    /* ダークボタン：文字色 */
    --lh: var(--ah); /* ダークボタン：ホバー色 */
    --dl: #1a4058; /* 無効リンク色 */
  }
}