/* =========================================================================
   tokens.css  ―  本画面(shop_detail)用トークン＝「基準トークンの対応層」
   画面: 個別査定 店舗詳細（買取店詳細 / shop）
   --------------------------------------------------------------------------
   ★色・フォントは共通ベース `../_shared/skeleton-base.css`（新買取システム本家トークンの
     プレーンCSSミラー）から取得します。このファイルは
       「基準トークン(var(--color-*)/var(--text-*)) → 本画面用エイリアス(--scl-*)」
     の対応層＋“基準に無い画面固有値”の定義です。
   ★読み込み順（各HTML）: ../_shared/skeleton-base.css → tokens.css → ../_shared/chrome-pc.css → pc.css
   ★配色を本家に合わせて変更する場合は skeleton-base.css 側を直す（正本は _shared/。全画面で共有）。
   ========================================================================= */
:root {
  /* ---- 色：基準トークンから取得（本家に合わせる） --------------------- */
  --scl-color-bg:        var(--color-base-gray);   /* #fafafa ページ背景（グレー地）。白カード/白帯をこの地に積む */
  --scl-color-surface:   var(--color-card);        /* #ffffff 白カード */
  --scl-color-border:    var(--color-border);      /* #e5e5e5 罫線（デザイン #DCDCDC に近い基準値） */
  --scl-color-text:      var(--color-text-color);  /* #333 見出し/本文 */
  --scl-color-text-sub:  var(--color-light-gray);  /* #737373 補助テキスト */
  --scl-color-accent:    var(--color-brand-color); /* #DC0000 ブランド赤（CTA/アクティブタブ/電話番号/アクセント） */
  --scl-color-link:      #1D2088;                   /* 店名/SEOリンク（青。画面指定色 #1D2088） */
  --scl-color-star:      var(--color-star-filled);  /* #FFDC4A 星の塗り */

  /* ---- 色：基準に無い“画面固有” ------------------------------------- */
  --scl-color-accent-dark: #c00000;   /* 赤ボタン hover */
  --scl-color-heading:     var(--color-text-color);   /* #333 セクション中タイトル・口コミ本文（デザイン #1A1A1A → 基準本文色に統一） */
  --scl-color-heading-2:   var(--color-text-color);   /* #333 H1・見出し(スタッフ/契約系)（デザイン #212121 → 基準本文色に統一） */
  --scl-color-review-card: var(--color-pale-gray);  /* #F2F2F2 口コミ評価カード地 */
  --scl-color-map-btn:     var(--color-gray);   /* #ebebeb 地図アプリボタン地（デザイン #EBEBEB＝基準グレーと同値） */
  --scl-color-thumb-bg:    var(--color-light-gray); /* 画像プレースホルダ地（Gray #737373） */
  --scl-color-foot-band:   var(--color-pale-gray);   /* SP フッターのリンク帯地 #F2F2F2（共通chrome-sp.cssが参照。未定義だと帯色が消える） */
  --scl-color-foot-bar:    #6b7178;   /* フッター「買取サポート（問い合わせ）」バー地（共通chrome-pc.cssが参照。shop_result と同値） */
  --scl-color-foot-copy:   #2f3338;   /* コピーライト帯 地（共通chrome-pc.cssが参照。shop_result と同値） */

  /* ---- タブUI（店舗情報 / 口コミ・車買取実績価格） ------------------- */
  --scl-color-tab-active-bg:   var(--color-brand-color);  /* アクティブ=赤 */
  --scl-color-tab-active-fg:   var(--color-card);          /* #ffffff（アクセント地の上の白文字） */
  --scl-color-tab-inactive-bg: var(--color-gray);          /* #ebebeb 非アクティブ=ライトグレー（基準グレーと同値） */
  --scl-color-tab-inactive-fg: var(--color-light-gray);    /* 非アクティブ文字=Gray */

  /* ---- 口コミ 星別評価分布バー -------------------------------------- */
  --scl-color-bar:       var(--color-yellow);   /* #ffd900 分布バー（黄。デザイン #FED900≒基準yellow。star-filled とは別色） */
  --scl-color-bar-track: #DEDEDE;   /* バー下地 */

  /* ---- 口コミ 店舗返信バブル ---------------------------------------- */
  --scl-color-reply-bg:  var(--color-faq-gray);   /* #f7f7f7 返信バブル地（基準 faq-gray と同値） */

  /* ---- SP 固有（PC値を壊さない追加。sp.css から参照。PCは参照しない） ---------------- */
  --scl-fs-h1-sp:      24px;      /* SP 店舗名 H1（デザイン 24px。PCは 32px） */
  --scl-color-phone:   #0DB47A;   /* SP 電話ボタン（緑。デザイン値）。PCは番号テキスト表示のため未使用 */
  --scl-color-divider: var(--color-border);   /* #e5e5e5 SP 口コミカード内の区切り線（デザイン #E8E8E8 → 基準罫線に統一） */
  --scl-color-tab-inactive-bg-sp: var(--color-pale-gray);  /* SP 非アクティブタブ地 #F2F2F2（PCは #ebebeb） */

  /* ---- フォントサイズ（当面この画面固有のpx） ------------------------ */
  --scl-fs-h1:      32px;   /* 店舗名 H1（デザイン 32px） */
  --scl-fs-sec:     24px;   /* セクション中タイトル */
  --scl-fs-subsec:  18px;   /* 小タイトル（口コミ車種名 / 強化車種サブ見出し / スタッフ氏名） */
  --scl-fs-lg:     var(--font-size-lg);    /* PC 18 */
  --scl-fs-md:     var(--font-size-base);  /* 本文 PC 16 */
  --scl-fs-sm:     var(--font-size-sm);    /* PC 14（SEO本文・注釈・テーブルセル） */
  --scl-fs-xs:     var(--font-size-xs);    /* PC 12 */
  --scl-fs-2xs:    var(--font-size-xs);    /* 新に 11px 相当が無いため xs に集約（無料バッジ等） */
  --scl-fs-tel:    24px;   /* 電話番号（Roboto 24px 相当） */
  --scl-fs-score:  24px;   /* 総合評価スコア数字 */
  --scl-lh-tight:  1.3;
  --scl-lh-base:   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-8: 64px;   /* 共通chromeのフッター上マージン（.gf）が参照 */

  /* ---- セクション間の余白 ---- */
  --scl-sec-gap:      40px;   /* 右カラム トップレベルセクション間（デザイン gap40） */
  --scl-band-pad-y:   60px;   /* 白帯（SEO）の上下パディング */

  /* ---- 角丸 / 影 ---------------------------------------------------- */
  --scl-radius-sm:   4px;
  --scl-radius-md:   8px;    /* カード（デザインは 8px 主体） */
  --scl-radius-lg:   10px;   /* CTA / 電話ボタン（デザイン 10px） */
  --scl-radius-tab:  6px;    /* タブ上角 */

  /* ---- レイアウト --------------------------------------------------- */
  --scl-container:   1120px;   /* PC コンテンツ最大幅（左右 x160＝1440基準） */
  --scl-sidebar-w:   344px;    /* 左サイドバー */
  --scl-col-gap:     58px;     /* 左右カラム間 gap */
}