/* =========================================================
   tokens.css — デザイントークン（:root CSS 変数）
   値はすべて Figma（up.fig / フレーム "fv"）の実値で確定。
   ========================================================= */
:root {
  /* ---- カラー（Figma 実値） ---- */
  --color-text:        #171716; /* rgb(23,23,22)  本文・見出し（メインテキスト） */
  --color-ink:         #211715; /* rgb(33,23,21)  イラストの線画 */
  --color-black:       #000000; /* rgb(0,0,0)     CTA サブコピー */
  --color-white:       #ffffff; /* rgb(255,255,255) */
  --color-cream:       #fefbe9; /* rgb(254,251,233) problem セクション背景 */
  --color-cream-2:     #fdfaeb; /* rgb(253,250,235) price セクション背景 */
  --color-cream-3:     #fdf7e2; /* rgb(253,247,226) price キャンペーン枠背景 */
  --color-primary:     #fccb0c; /* rgb(252,203,12) メイン黄（ボタン・枠） */
  --color-badge:       #fddd4d; /* rgb(253,221,77) サブコピー帯の背景 */
  --color-stripe:      #F9DA60; /* 見出し下線マーカー（縞）の色。solution/after で使用 */
  --color-tie:         #3d8dcc; /* rgb(61,141,204) イラストのネクタイ */
  --color-gray-mid:    #6e6e6e; /* rgb(110,110,110) BEFORE ラベル・×アイコン */
  --color-gray-dark:   #353535; /* rgb(53,53,53)   見出し・入力枠・ラベル（question/form） */
  --color-gray-body:   #5f5f5f; /* rgb(95,95,95)   FAQ 回答テキスト */
  --color-gray-ph:     #858585; /* rgb(133,133,133) 入力プレースホルダ文字 */
  --color-gray-line:   #cfcfcf; /* rgb(207,207,207) 入力枠線・カード影 */
  --color-gray-arrow:  #d9d9d9; /* rgb(217,217,217) after 中央矢印の塗り */
  --color-gray-photo:  #5e5e5e; /* rgb(94,94,94)   画像読込前プレースホルダ背景 */
  --color-field:       #fafafa; /* rgb(250,250,250) 入力欄の背景 */

  /* ---- フォーム：必須/任意バッジ・ポリシーリンク（新色。確定色とは別トークン） ---- */
  --color-required:    #e8823c; /* rgb(232,130,60) 必須バッジ背景（オレンジ） */
  --color-optional:    #9e9e9e; /* rgb(158,158,158) 任意バッジ背景（グレー） */
  --color-link:        #e8823c; /* rgb(232,130,60) プライバシーポリシーリンク（オレンジ・下線） */

  /* ---- フッター（新色。確定色とは別トークン） ---- */
  --color-footer-link: #b3b3b3; /* rgb(179,179,179) フッターリンクの薄いグレー */

  /* ---- 影（Figma 実値） ---- */
  /* ボタンの内側ベベル＋外側ハイライト */
  --shadow-btn:
    inset -0.110cqw -0.147cqw 0.226cqw 0 rgb(141,54,22),
    0.113cqw 0.113cqw 0.758cqw 0 rgba(255,255,255,0.19);

  /* ---- フォント ---- */
  --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- フォントサイズ（統一スケール／C-1で導入） ---- */
  --fs-xs:   12px;   /* フォーム必須/任意バッジ用（小さめ） */
  --fs-sm:   16px;
  --fs-md:   20px;   /* 受け皿。現状これに当たる要素は無い */
  --fs-base: 24px;
  --fs-lg:   32px;
  --fs-xl:   42px;
  --fs-2xl:  56px;
  --fs-3xl:  64px;
  --fs-4xl:  72px;
  --fs-5xl:  80px;
  --fs-88:   88px; /* price の金額「400,000」用。8×11 */
  --fs-6xl:  96px;

  /* ---- FV SP（Figma375）実測フォント（既存スケールに無い値。SP専用） ---- */
  --fs-12:   12px; /* FV SP リード文 */
  --fs-28:   28px; /* FV SP コピー line1 */
  --fs-36:   36px; /* FV SP コピー「自動化」 */
  --fs-48:   48px; /* FV SP コピー「20,000円」 */

  /* ---- 余白スケール（8の倍数。--space-4 のみバッジ内側の微小padding用の例外） ---- */
  --space-4:  4px;   /* 必須/任意バッジの上下padding（小さめバッジ用の例外） */
  --space-8:  8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-88: 88px;
  --space-96: 96px;
  --space-104: 104px; /* 8×13。fv CTAボタンの左右padding用に新設 */
  --space-120: 120px; /* 8×15。fv のリード↔CTA 用に新設 */

  /* ---- コンテナ / ブレイクポイント ---- */
  --container-max: 1440px;
  --container-read: 880px;  /* 法務ページ等・本文の読みやすい行長（privacy 等で使用） */
  --container-pad: 16px;
  /* ブレイクポイント（参照用トークン）
     ※ @media の条件式では var() を使えない（CSS仕様）ため、
        各セクションCSSの @media は下記と同じ px を直書きし、コメントでトークン名を併記する。 */
  --bp-tablet: 1024px;   /* これ以上＝PC */
  --bp-sp: 768px;        /* これ未満＝SP。768〜1023 はタブレット */
}