/* =========================================================================
   tokens.css  ―  本画面(maker_catalog_list)用トークン＝「基準トークンの対応層」
   画面: メーカー別 車種選択ページ（車買取査定相場一覧 / maker_catalog list）
   --------------------------------------------------------------------------
   ★色・フォントは共通ベース `../_shared/skeleton-base.css`（新買取システム本家トークンの
     プレーンCSSミラー）から取得します。このファイルは
       「基準トークン(var(--color-*)/var(--text-*)) → 本画面用エイリアス(--scl-*)」
     の対応層＋“基準に無い画面固有値”の定義です。
   ★読み込み順（各HTML）: ../_shared/skeleton-base.css → tokens.css → ../_shared/chrome-{pc,sp}.css → pc.css/sp.css
   ★配色を本家に合わせて変更する場合は skeleton-base.css 側を直す（正本は legacy-renewal-design/_shared/。全画面で共有）。
   ========================================================================= */
:root {
  /* ---- 色：基準トークンから取得（本家に合わせる） --------------------- */
  --scl-color-bg:            var(--color-base-gray);    /* #fafafa ページ背景ベースグレー */
  --scl-color-surface:       var(--color-card);         /* #ffffff 白カード/白帯 */
  --scl-color-text:          var(--color-text-color);   /* #333333 本文 */
  --scl-color-text-sub:      var(--color-light-gray);   /* #737373 補助テキスト・パンくず */
  --scl-color-border:        var(--color-border);       /* #e5e5e5 罫線（共通chrome が参照） */
  --scl-color-list-divider:  var(--color-list-divider);  /* #ecf0f2 SPリスト行の区切り線 */
  --scl-color-accent:        var(--color-brand-color);  /* #DC0000 グーレッド（見出しマーカー/hover/矢印） */

  /* ---- 色：基準トークンに無い“画面固有”（Figma 準拠） ---------------- */
  --scl-color-heading:      var(--color-text-color);   /* 見出し色（本文色に統一） */
  --scl-color-band:         var(--color-gray);    /* 索引バー地・グループ見出し帯・紹介文見出し帯 */
  --scl-color-card-name:    #1D2088;   /* 車名リンク色（濃紺） */
  --scl-color-foot-bar:     #6b7178;   /* フッター「買取サポート」バー（chrome 参考実装が参照） */
  --scl-color-foot-copy:    #2f3338;   /* コピーライト帯（chrome 参考実装が参照） */
  --scl-color-foot-band:    var(--color-pale-gray);  /* フッター参考実装のリンク帯 */

  /* ---- フォント：基準の font-family に統一 ----------------------------- */
  /*  ※skeleton-base.css が :root に font-family を設定済み。ここは明示用エイリアス。 */
  --scl-font-base: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* ---- フォントサイズ：基準 --text-*（レスポンシブ・PC≥768 / SP<768）に統一 --------- */
  --scl-fs-h1:     var(--text-3xl);   /* PC 主見出し */
  --scl-fs-h1-sp:  var(--text-2xl);   /* SP 主見出し・セクション見出し */
  --scl-fs-h2:     var(--text-2xl);   /* PC セクション見出し「中タイトル」 */
  --scl-fs-lg:     var(--text-base);  /* ラベル/車名/本文/SP索引・アコーディオン見出し */
  --scl-fs-md:     var(--text-base);  /* 本文ベース */
  --scl-fs-sm:     var(--text-sm);    /* 販売期間/紹介文本文 */
  --scl-fs-xs:     var(--text-xs);    /* 和暦/パンくず/SP人気車種行名 */
  --scl-fs-2xs:    var(--text-2xs);   /* 共通chrome（コピーライト帯 .gf__copy）が参照。他画面 tokens と同様に定義 */
  --scl-fs-info-title: var(--text-lg); /* 紹介文タイトル（18px・PC/SP 共通） */
  --scl-lh-tight:  1.4;
  --scl-lh-base:   1.7;

  /* ---- 余白スケール（画面固有） --------------------------------------- */
  --scl-space-2: 8px;
  --scl-space-3: 12px;
  --scl-space-4: 16px;
  --scl-space-5: 24px;
  --scl-space-7: 48px;
  --scl-space-8: 80px;   /* 紹介文セクションの上下余白 */

  /* ---- 角丸（画面固有） ------------------------------------------------ */
  --scl-radius-sm:   4px;
  --scl-radius-md:   8px;    /* 車種カード */

  /* ---- レイアウト（画面固有） ----------------------------------------- */
  --scl-container:  1120px;  /* PC コンテンツ最大幅 */
  --scl-grid-cols:  6;       /* PC 車種カード格子の列数（既定＝横6均等）。人気車種・各グループ共通 */

  /* ---- SP 固有（sp.css で使用） --------------------------------------- */
  --scl-sp-pad:       20px;  /* SP 本文の左右パディング */
  --scl-sp-idx-cols:   6;    /* SP 索引グリッド（かなタイル）の列数 */
}