/* =========================================================================
   tokens.css  ―  本画面(maker_guide_show)用トークン＝「基準トークンの対応層」
   画面: 車種詳細ページ（査定相場詳細 / maker_guide show）
   --------------------------------------------------------------------------
   ★色・フォントは共通ベース `../_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/。全画面で共有）。
   ★PC/SP 共有。SP 固有値は末尾にまとめる（PC 値は不変）。
   ========================================================================= */
: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-accent:        var(--color-brand-color);  /* #DC0000 グーレッド（CTA/見出しマーカー/比較表ヘッダ/hover） */

  /* ---- 色：基準トークンに無い“画面固有”（Figma 準拠） ---------------- */
  --scl-color-heading:      var(--color-text-color);   /* 見出し #333（Figma #212121 は僅かに濃いが基準に統一） */
  --scl-color-band:         var(--color-gray);         /* Figma Light Gray #EBEBEB＝基準 --color-gray：CTAバンド地・見出し帯 */
  --scl-color-panel:        var(--color-pale-gray);    /* Figma Light Gray02 #F2F2F2＝基準 --color-pale-gray：実績帯・特徴ボックス・表ストライプ */
  --scl-color-border-line:  #dcdcdc;                   /* Figma ラインカラー #DCDCDC（表罫線・カード枠・区切り） */
  --scl-color-card-name:    #1D2088;                   /* Figma グレード/ブランド/口コミ件数リンク色（濃紺） */
  --scl-color-rank-col:     #212121;                   /* ランキング「順位」列の黒背景（Figma 準拠） */
  --scl-color-price:        var(--color-text-color);   /* ヒーロー/関連車種の価格数値 #333 */
  --scl-color-review-score: var(--scl-color-accent);   /* 口コミ「総合評価」数値の赤（accent＝ブランド赤と同一） */
  /* 星の塗り/空色（#FFDC4A / #E5E5E5）は .scl-stars の data-URI SVG 内に直書き（url() 内は var() 不可）。
     基準色は skeleton-base.css の --color-star-filled / --color-star-empty。トークン化不可のため別途エイリアスは持たない。 */

  /* グラフ折れ線（Figma 準拠。凡例・線で共有） */
  --scl-color-line-7y:      var(--color-brand-color);  /* 7年落ち #DC0000 */
  --scl-color-line-5y:      var(--color-dark-green);   /* 5年落ち ≒ #49AC00 */
  --scl-color-line-3y:      var(--color-blue);         /* 3年落ち ≒ #1874E8（基準 #2196f3 相当） */

  /* フッター（chrome 参考実装が参照。未定義だと問い合わせバー地が消える） */
  --scl-color-foot-bar:     #5a5a5a;                   /* 下部「買取サポート」バー（Figma #5A5A5A / SP #737373 に近似） */
  --scl-color-foot-copy:    #2f3338;                   /* コピーライト帯 */
  --scl-color-foot-band:    var(--color-pale-gray);    /* フッター参考実装のリンク帯 */

  /* ---- フォント：基準の font-family に統一 ----------------------------- */
  --scl-font-base: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --scl-font-num:  "Roboto", "Helvetica Neue", Arial, sans-serif;  /* 価格数値（Figma Roboto/DIN） */

  /* ---- フォントサイズ：基準 --text-*（レスポンシブ・PC≥768 / SP<768）に統一 -------- */
  --scl-fs-h1:      var(--text-3xl);   /* H1 車名：Figma32px → --text-3xl（PC30 / SP26px） */
  --scl-fs-h2:      var(--text-2xl);   /* セクション中タイトル：Figma24px/700 → --text-2xl（PC24 / SP21px） */
  --scl-fs-h3:      var(--text-lg);    /* 小タイトル・比較表ヘッダ：Figma18px → --text-lg（PC18 / SP16px） */
  --scl-fs-price:   var(--text-5xl);   /* ヒーロー価格：Figma48px → --text-5xl（PC48 / SP42px） */
  --scl-fs-metric:  var(--text-3xl);   /* 実績値（4年/42,500km）：Figma32px → --text-3xl */
  --scl-fs-lg:      var(--text-base);  /* ラベル/本文ベース：16px → --text-base（PC16 / SP14px） */
  --scl-fs-md:      var(--text-base);  /* 本文：16px → --text-base */
  --scl-fs-sm:      var(--text-sm);    /* SEO本文/表本文/注記：14px → --text-sm（PC14 / SP12px） */
  --scl-fs-xs:      var(--text-xs);    /* パンくず/凡例/投稿日：12px → --text-xs（PC12 / SP10px） */
  --scl-fs-2xs:     var(--text-xs);    /* 共通chrome（コピーライト帯）が参照。新に11px相当が無いため xs に集約 */
  --scl-fs-num-md:  var(--text-xl);    /* 関連車種の価格：Figma20px → --text-xl（PC20 / SP18px） */
  --scl-lh-tight:   1.4;
  --scl-lh-base:    1.7;
  --scl-lh-relaxed: 1.6;

  /* ---- 余白スケール（画面固有） --------------------------------------- */
  --scl-space-1: 4px;
  --scl-space-2: 8px;
  --scl-space-3: 12px;
  --scl-space-4: 16px;
  --scl-space-5: 24px;
  --scl-space-6: 32px;
  --scl-space-7: 40px;
  --scl-space-8: 80px;

  /* ---- 角丸（画面固有） ------------------------------------------------ */
  --scl-radius-sm:   4px;
  --scl-radius-md:   8px;    /* 実績帯・特徴ボックス・表・記事カード（Figma 8） */
  --scl-radius-lg:   16px;   /* ヒーロー/CTAカード/口コミカード（Figma 16） */

  /* ---- レイアウト（画面固有） ----------------------------------------- */
  --scl-container:  1120px;  /* PC コンテンツ最大幅（Figma content 幅） */
  --scl-hero-max:   1040px;  /* ヒーローカード幅（Figma 1040） */
}

/* ---- SP 固有（sp.css で使用。PC 値は上書きしない） --------------------- */
:root {
  --scl-sp-pad:        16px;   /* SP 本文の左右パディング（Figma 375 - 内容幅330 前後） */
  --scl-sp-maker-cols:  3;     /* SP メーカー検索グリッド 3列 */
}