/* =========================================================================
   tokens.css  ―  確定版 共通ヘッダー/フッター用トークン＝「基準トークンの対応層」
   画面: layout_header_footer（サイト共通レイアウト＝ヘッダー/フッターの確定版スケルトン）
   --------------------------------------------------------------------------
   ★色・フォントは共通ベース `../_shared/skeleton-base.css`（新買取システム本家トークンの
     プレーンCSSミラー）から取得。このファイルは
       「基準トークン(var(--color-*)/var(--text-*)) → 本部品用エイリアス(--scl-*)」
     の対応層＋“基準に無い部品固有値（Figma 実測値）”の定義。
   ★読み込み順（各HTML）: ../_shared/skeleton-base.css → tokens.css → css/pc.css(sp.css)
     ※本 folder 自体が確定版 chrome のため、仮の ../_shared/chrome-*.css は読み込まない。
   ★配色を本家に合わせて変更する場合は skeleton-base.css 側を直す（正本は _shared/。全画面共有）。
   ========================================================================= */
:root {
  /* ---- 色：基準トークンから取得（本家に合わせる） --------------------- */
  --scl-color-bg:          var(--color-card);         /* #ffffff ヘッダー/PCフッター地色 */
  --scl-color-bg-body:     var(--color-base-gray);    /* #fafafa 本文（body）・SPフッター地色 */
  --scl-color-border:      var(--color-border);       /* #e5e5e5 罫線（基準・PCリンク区切り） */
  --scl-color-text:        #212121;                   /* Figma: ヘッダータブ本文 */
  --scl-color-text-sub:    var(--color-light-gray);   /* #737373 補助テキスト（パンくず） */
  --scl-color-foot-link:   var(--color-light-gray);   /* #737373 PC フッターサービスリンク */
  --scl-color-foot-text:   var(--color-text-color);   /* #333 フッター本体テキスト（節タイトル/SPリンク/3Dテーブル/公式リンク）。apps/web footer 本文色に統一 */
  --scl-color-accent:      var(--color-brand-color);  /* #DC0000 グーレッド（アクティブ下線・強調） */

  /* ---- 色：基準に無い“部品固有”（Figma 実測値） --------------------- */
  --scl-color-line:        #DCDCDC;   /* Figma ラインカラー（タブ区切り・SPヘッダー下境界） */
  --scl-color-foot-bar:    #5A5A5A;   /* PC「買取サポート（問い合わせ）」バー地色（Figma） */
  --scl-color-foot-bar-sp: #737373;   /* SP サポートバー地色（Figma Gray） */

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

  /* ---- フォントサイズ（部品固有 px・Figma 準拠） ------------ */
  --scl-fs-tab:     16px;  /* ヘッダータブ本文 */
  --scl-fs-tab-sp:  16px;  /* SP タブ キーワード */
  --scl-fs-mod-sp:  11px;  /* SP タブ 修飾語（上段） */
  --scl-fs-lg:      16px;
  --scl-fs-md:      14px;
  --scl-fs-sm:      13px;
  --scl-fs-xs:      12px;
  --scl-fs-3xs:     10px;

  /* ---- レイアウト（Figma 実測） -------------------------------------- */
  --scl-container:      1120px;  /* PC コンテンツ最大幅（左右 x160＝1440基準）。全画面・共有chromeと統一 */
  --scl-header-h-pc:    72px;    /* PC ヘッダー高 */
  --scl-header-h-sp-a:  40px;    /* SP ヘッダー 上段（ロゴ） */
  --scl-header-h-sp-b:  54px;    /* SP ヘッダー 下段（タブナビ） */
}