/* ============================================================
   AI二刀流 記事デザイントークン v1.0
   ------------------------------------------------------------
   出典: R8.7.2versionup/migration-guide.md セクション2・
         morishita-sayonara-remake.html(最終形の正)より抽出。

   スコープについて(重要):
   このファイルのトークンは `.layout` 配下(移行済み記事の
   <article class="article-col"> と <aside class="sidebar">)
   にのみ適用される。サイト共通ヘッダー/ナビ/パンくず/フッターは
   既存の assets/css/style.css 等の変数系(--color-*, --accent 等)
   を引き続き使用し、本ファイルとは無関係(名前は同じでも影響しない)。

   テーマ連動について:
   既存の assets/js/theme.js が html[data-theme] に "light"/"dark"
   を確定値で設定する(3択ピッカー: ライト/自動/ダーク。「自動」は
   theme.js内でprefers-color-schemeから解決される)。本ファイルは
   その属性を読むだけで、専用の切替スクリプトは不要。
   ============================================================ */

/* ---------- ライト(デフォルト・書籍の紙面) ---------- */
.layout {
  --bg:            #f7f3ea;
  --surface:       #fffdf7;
  --surface-2:     #efe9da;
  --text:          #262115;
  --text-sub:      #5d5645;
  --text-faint:    #8b8370;
  --accent:        #8f6a12;
  --accent-ink:    #fffdf7;
  --line:          #ded5c0;
  --line-strong:   #b9ad8e;
  --marker-bg:     rgba(230, 190, 60, .35);
  --marker-line:   rgba(160, 120, 20, .8);
  --callout-key-bg:     #f4ead0;
  --callout-key-border: #a87f16;
  --callout-warn-bg:     #f7e8e4;
  --callout-warn-border: #b0503e;
  --callout-warn-label:  #9c4634;
  --callout-data-bg:     #e9eff3;
  --callout-data-border: #4a748f;
  --callout-data-label:  #3d647d;
  --score-bg: linear-gradient(135deg, #2a2444 0%, #351d49 55%, #431733 100%);
  --score-text: #f2ecdd;
  --shadow: 0 4px 18px rgba(90, 75, 40, .14);
  --chart-1: #8f6a12;
  --chart-2: #46718c;
  /* データコラム型: 検証判定 */
  --ok: #2f6b40; --ng: #9c4634; --maybe: #8a6d10;
  /* レース予想型: 印・的中バッジ */
  --mark-honmei: #8f6a12; --mark-taikou: #5a6b80; --mark-tanana: #a05a3c; --mark-osae: #5d7050;
  --hit-bg: #e8f2e9; --hit-border: #4d8a5c; --hit-text: #2f6b40;
}

/* ---------- ダーク(既存ブランド継承) ---------- */
html[data-theme="dark"] .layout {
  --bg:            #0f0e0b;
  --surface:       #17150f;
  --surface-2:     #1f1c13;
  --text:          #e9e2d2;
  --text-sub:      #b3ab97;
  --text-faint:    #7d7663;
  --accent:        #d9a62e;
  --accent-ink:    #1a1509;
  --line:          #35301f;
  --line-strong:   #57502f;
  --marker-bg:     rgba(217, 166, 46, .22);
  --marker-line:   rgba(217, 166, 46, .65);
  --callout-key-bg:     #221c0d;
  --callout-key-border: #d9a62e;
  --callout-warn-bg:     #241413;
  --callout-warn-border: #c96a5a;
  --callout-warn-label:  #e08a7a;
  --callout-data-bg:     #12181d;
  --callout-data-border: #5a89a8;
  --callout-data-label:  #86b3cf;
  --score-bg: linear-gradient(135deg, #1c1830 0%, #241332 55%, #301022 100%);
  --score-text: #f2ecdd;
  --shadow: 0 6px 24px rgba(0,0,0,.45);
  --chart-1: #d9a62e;
  --chart-2: #7fa8c6;
  --ok: #7cc98f; --ng: #e08a7a; --maybe: #d9c46a;
  --mark-honmei: #d9a62e; --mark-taikou: #b8c4d4; --mark-tanana: #c9846a; --mark-osae: #8a9a7a;
  --hit-bg: #16261a; --hit-border: #4f9861; --hit-text: #7cc98f;
}

/* ---------- 12球団チームカラー(参照用・一覧) ----------
   球団名+文字を表示する箇所(順位表・分類見出し・詳細表など)は、
   このチームカラーを文字の背景に使わないこと(濃色球団でライト
   モード時に文字が沈んで読めなくなるため)。使う場合は必ず
   components.css の .team-chip + .team-swatch と組み合わせ、
   下記の色を --team カスタムプロパティとしてスウォッチ(色点)
   にのみ適用する。装飾用の .team-color-bar / .bar--* (面での
   使用)にはテキストを入れないこと。

   阪神タイガース         #f5c000 (黒#171310と2トーン)
   中日ドラゴンズ         #003595
   広島東洋カープ         #d61c25
   東京ヤクルトスワローズ   #002d5f (緑#6cbb5aと2トーン)
   読売ジャイアンツ       #f96302 (黒#1a1a1aと2トーン)
   横浜DeNAベイスターズ    #0055a5
   埼玉西武ライオンズ     #00224f (赤#b6002cと2トーン)
   東北楽天ゴールデンイーグルス #8b0011
   福岡ソフトバンクホークス  #ffd700 (黒#1a1a1aと2トーン)
   北海道日本ハムファイターズ #00285e
   オリックス・バファローズ  #0f1e42 (金#c6a35cと2トーン)
   千葉ロッテマリーンズ    #1a1a1a (銀#a7a9acと2トーン)

   使用例:
   <span class="team-chip"><i class="team-swatch" style="--team:#00224f"></i>西武</span>
   ---------------------------------------------------------- */

/* ---------- 印刷/書籍化(将来用) ----------
   記事本体はライトの紙面設計に統一する。 */
@media print {
  .layout {
    --bg: #fff; --surface: #fff; --surface-2: #f0ece0;
    --text: #1e1a10; --text-sub: #55503f; --text-faint: #7c7663;
    --accent: #7d5c0d; --line: #cfc6ad; --line-strong: #a89c7c;
  }
}