/* =========================================================================
   tokens.css  ―  本画面(individual_assessment_cv)用トークン＝「基準トークンの対応層」
   画面: 個別査定PC_CVページ（販売店への査定依頼フォーム）
   --------------------------------------------------------------------------
   ★色は Figma「個別査定PC_CVページ」から取得した値です（Dev Mode 変数 / スクショ実測）。
     グーレッド #DC0000 / 本文 #333 / 補助 #737373 / 罫線 #DCDCDC / 背景 #FAFAFA / 薄グレー #EBEBEB。
   ★共有chrome（../_shared/chrome-pc.css）が var(--scl-container) 等を参照するため、
     トークン名は共有契約の --scl-* を使用（値は本画面用）。
   ★本文の画面固有クラスは scl-cv-* 系（フォーム部品 .scl-cv-field / .scl-cv-select / .scl-cv-req 等を含め、他画面・本番CSSと非衝突）。
   ★読み込み順: ../_shared/skeleton-base.css → tokens.css → ../_shared/chrome-pc.css → pc.css
   ========================================================================= */
:root {
  /* ---- 地色・面 ------------------------------------------------------- */
  --scl-color-bg:            #fafafa;   /* ページ背景（グレー地。Figma Base Gray #FAFAFA） */
  --scl-color-surface:       #ffffff;   /* 白カード（フォーム枠 / 車両情報カード） */

  /* ---- 罫線・入力枠（Figma ラインカラー #DCDCDC） --------------------- */
  --scl-color-border:        #dcdcdc;   /* カード罫線・区切り線 */
  --scl-color-input-border:  #dcdcdc;   /* select / input の枠 */

  /* ---- テキスト ------------------------------------------------------- */
  --scl-color-heading:       #333333;   /* 見出し（Figma Text color #333） */
  --scl-color-text:          #333333;   /* 本文・ラベル */
  --scl-color-text-sub:      #737373;   /* 補助テキスト（Figma Gray #737373） */
  --scl-color-placeholder:   rgba(51, 51, 51, 0.4);   /* プレースホルダ文字（Figma: 本文 #333 の40%不透明。「年」「月」「選択してください」等） */

  /* ---- アクセント（グーレッド #DC0000） ------------------------------ */
  --scl-color-accent:        #dc0000;   /* 共有chrome（ロゴ/下線）も参照 */
  --scl-color-required:      #dc0000;   /* 必須バッジ地 */

  /* ---- CTA（査定を依頼する＝赤ボタン。★online_assessment_top の濃グレーと異なる） -- */
  --scl-color-btn:           #dc0000;   /* CTA 背景（グーレッド） */
  --scl-color-btn-hover:     #c00000;   /* CTA hover（一段暗い赤） */
  --scl-color-btn-text:      #ffffff;   /* CTA 文字 */

  /* ---- バッジ（OK＝青の塗り。必須は赤文字のため塗り色は持たない） --- */
  --scl-color-badge-ok-bg:   #1868db;   /* 「OK」入力済みバッジ地（Figma の青。実測微差は要調整） */
  --scl-color-badge-ok-fg:   #ffffff;

  /* ---- 修復歴などの選択ボタン（未選択/選択） ------------------------- */
  --scl-color-choice-bg:     #f2f2f2;   /* 未選択のボタン地（枠なし） */
  --scl-color-choice-on-bg:  #333333;   /* 選択中のボタン地（濃グレー） */
  --scl-color-choice-on-fg:  #ffffff;

  /* ---- 店舗カードの帯・ラベル背景（Figma SP: Light Gray #EBEBEB） ----- */
  --scl-color-band-bg:       #ebebeb;   /* 「査定を依頼する買取店」帯・営業/定休日ラベルの背景 */

  /* ---- フッター（共通 chrome-pc/sp.css が参照。未定義だとフッターの色が消えるため必須） --- */
  --scl-color-foot-bar:      #6b7178;   /* 「買取サポート」バー地 */
  --scl-color-foot-copy:     #2f3338;   /* コピーライト帯 地 */
  --scl-color-foot-band:     #f2f2f2;   /* SP フッターリンク帯 地（pale-gray 相当） */

  /* ---- フォント ------------------------------------------------------ */
  --scl-font-base: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* フォントサイズ（PC。Figma 実寸換算の概算。必要なら Dev Mode 実値で微調整） */
  --scl-fs-h1:        24px;   /* 「クルマ情報を入力してください」等の大見出し */
  --scl-fs-lead:      14px;   /* 見出し下の説明文 */
  --scl-fs-label:     15px;   /* 項目ラベル */
  --scl-fs-md:        15px;   /* 入力値・本文の基準 */
  --scl-fs-sm:        13px;   /* 補足（住所の注記など） */
  --scl-fs-xs:        11px;   /* バッジ文字（必須/OK） */
  --scl-fs-2xs:       11px;   /* 共通フッターのコピーライト（chrome-pc.css 参照） */
  --scl-fs-lg:        16px;   /* 共通フッターの見出し・買取サポートバー文字（chrome-pc/sp.css 参照） */
  --scl-fs-cta:       17px;   /* CTA ボタン文字 */
  --scl-lh-base:      1.7;

  /* ---- 余白 ---------------------------------------------------------- */
  --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: 48px; --scl-space-8: 64px;

  /* ---- 角丸 ---------------------------------------------------------- */
  --scl-radius-sm:   4px;
  --scl-radius-lg:   12px;
  --scl-radius-btn:  8px;    /* CTA は角丸長方形 */

  /* ---- 影（Figma SP 店舗カードの drop-shadow: 0 1px 2px rgba(0,0,0,.1)） -- */
  --scl-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.1);

  /* ---- レイアウト ---------------------------------------------------- */
  --scl-container:   1120px;  /* 共有chrome（ヘッダー/フッター）が参照する全幅 */
  --scl-content-max: 720px;   /* フォーム本文の読み幅（Figma のフォーム列幅 680px + 余白） */
}