/* デザイントークン — hp-keiyaku-soudan（割賦撲滅LP）
 *
 * 出典は DESIGN-TOKENS.md。PC_A(250:2) の16セクション全件を
 * get_design_context で実測して集計した値。
 *
 * 【ワーカーへ】
 *   - 既存の値を変更・削除しない
 *   - 足りない値は **追加してよい**。ただし PROGRESS.md に必ず報告する
 *   - セクションCSSに生の hex を書かない（check-css が NG にする）
 */

:root {
  /* --- 文字色 --- */
  --c-ink: #10203a;          /* 基本の文字色。11/16セクション */
  --c-ink-2: #38455c;        /* 本文の弱い階層。7/16 */
  --c-brand: #3774a6;        /* ブランドブルー。6/16 */
  --c-brand-dark: #164973;   /* 3/16 */
  --c-muted: #6b7688;        /* 補足・注釈 */
  --c-ink-deep: #101c33;     /* 反転背景側の基準色 */
  --c-ink-mv: #1b2942;       /* MV内の文字 */
  --c-link-faq: #1f4b99;     /* FAQ内のリンク */
  --c-muted-2: #8f9cb3;      /* フォームの補足 */
  --c-placeholder: #a4adbd;  /* input のプレースホルダ */
  --c-error: #b3402f;        /* フォームのエラー */
  --c-on-dark: #ffffff;

  /* --- 背景色 --- */
  --bg-page: #ffffff;
  --bg-tint: #eef4f9;        /* 淡い青の帯 */
  --bg-subtle: #f7f8fa;      /* ほぼ白のグレー */
  --bg-deep: #101c33;        /* 反転背景 */
  --bg-footer: #0c1728;
  --bg-form: #182845;
  --bg-input: #fbfcfe;
  --bg-faq: #e6e9f0;
  --bg-header: rgba(255, 255, 255, 0.92);
  --bg-scrim: rgba(0, 0, 0, 0.5);
  --bg-glass: rgba(255, 255, 255, 0.14);

  /* --- 線 --- */
  --c-border: #e6e9f0;               /* 既定の罫線。最頻 5/16 */
  --c-border-2: #b9c3d4;
  --c-border-form: #d3d9e4;
  --c-border-accent: #2f8ad4;
  --c-border-on-dark: rgba(255, 255, 255, 0.1);

  /* --- グラデーション ---
   * 通常/ホバーとも Figma 実測。ホバーは `ホバー色` フレーム(354:110)から取得。
   *   通常   354:119 の対 → from #155c96 / to #2571b0
   *   ホバー 354:119      → from #2078c0 / to #1094e6
   * --g-cta-flow は「色が流れる」演出用に、通常色→ホバー色を1本につないだ4ストップ。
   * background-size:200% + position 0% の静止時は 0〜50% 区間（= --g-cta と同一）だけが
   * 見え、hover で position を 100% へ transition スライドさせると 50〜100% 区間
   * （#2571b0→#2078c0→#1094e6）へぬるっと流れる（2026-08-26 オーナー指示。
   * 当初の keyframes 無限ループは background-image のホバー差し替えが補間されず
   * 「パッと切り替わってから回る」見え方になったため廃止）。
   * **4ストップとも Figma 実測値の再利用で、Figmaに無い値は足していない。** */
  --g-cta: linear-gradient(90deg, #155c96 0%, #2571b0 100%);
  --g-cta-hover: linear-gradient(90deg, #2078c0 0%, #1094e6 100%);
  --g-cta-flow: linear-gradient(90deg, #155c96 0%, #2571b0 50%, #2078c0 75%, #1094e6 100%);
  --c-cta-border: #2f8ad4;        /* CTAブロックの枠線（通常） */
  --c-cta-border-hover: #108cd9;  /* CTAブロックの枠線（ホバー） */
  --shadow-cta: 6px 6px 10px rgba(0, 0, 0, 0.14);
  /* SP版の同じ影。Figma SP(361:188)は device px で 6/6/10 なので CSS px は 1/2。
   * PC の --shadow-cta は 1920px 設計の値なので、そちらは変更しない。 */
  --shadow-cta-sp: 3px 3px 5px rgba(0, 0, 0, 0.14);
  /* ホバーで --g-cta-flow を 0%→100% へスライドさせる transition の時間。
   * keyframes ループ時代は 3s（1周期）だったが、片道スライドなので短くした */
  --cta-flow-duration: 0.8s;

  /* #section1 の背景装飾（node 268:37 "Frame 2"）。
   * 上の帯 Rectangle 4(268:39) と、その下の下向き三角 Rectangle 2(268:38) で
   * グラデーションの効き方が違うので2本に分けている。
   * 画像が未着荷でCSS再現したため、値は参照PNG(get_screenshot)の実測。 */
  --g-s1-block: linear-gradient(180deg, #e9f0f6 0%, #dfe7ee 100%);
  --g-s1-wedge: linear-gradient(180deg, #dfe7ef 0%, #cee1f0 100%);

  /* --- フォント ---
   * 明朝が主、ゴシックが従。16セクション全件で一貫している。 */
  --ff-serif: "Noto Serif JP", serif;
  --ff-sans: "Noto Sans JP", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- フォントサイズ --- */
  --fs-3xl: 54px;
  --fs-2xl: 50px;
  --fs-xl: 48px;
  --fs-lg: 46px;
  --fs-40: 40px;   /* セクション見出しの標準。8/16 */
  --fs-38: 38px;
  --fs-36: 36px;
  --fs-34: 34px;
  --fs-32: 32px;
  --fs-30: 30px;   /* リード文の標準。5/16 */
  --fs-22: 22px;
  --fs-20: 20px;
  --fs-19: 19px;
  --fs-18: 18px;   /* 本文の標準。5/16 */
  --fs-17: 17px;
  --fs-16: 16px;
  --fs-15: 15px;
  --fs-14: 14px;
  --fs-13: 13px;
  --fs-12: 12px;
  --fs-11: 11px;
  --fs-10: 10px;

  /* 役割別のエイリアス。px を直接書かずこちらを使う */
  --fs-h2: var(--fs-40);
  --fs-lead: var(--fs-30);
  --fs-body: var(--fs-18);
  --fs-sm: var(--fs-14);
  --fs-xs: var(--fs-12);

  /* --- レイアウト --- */
  --w-page: 1920px;
  --w-wide: 1200px;  /* コンテンツ幅。器はこれを上限に、狭い帯では縮む */
  --w-line: 1196px;  /* 枠線2px込みの内寸 */
  --pad-x: 360px;
  /* 器の左右の最小余白（service-site 方式 / オーナー指示 2026-08-25）。
   * 器のパディングを `max(--gutter, (100% - --w-wide)/2)` で作ると、
   * 広い幅では余白が伸びてコンテンツは原寸のまま、
   * 狭い幅では余白が --gutter で頭打ちになり器のほうが縮む。
   * **1920px では max() が実座標側を返すので、既存の幾何は1pxも動かない。** */
  --gutter: 24px;

  /* --- 重なり順 ---
   * セクションは clip しない（Figma実測: 16/16で clipsContent=false）。
   * 装飾がセクション境界をまたぐので層を固定する。SECTIONS.md「ページ横断レイヤー」参照 */
  --z-deco: 0;
  --z-body: 1;
  --z-ctabar: 100;

  /* --- 角丸 --- */
  --r-btn: 3px;
}

/* 2026-08-24 追記: components.css で使う影。実測 drop-shadow(6px 6px 10px rgba(0,0,0,.1)) */
:root {
  --shadow-card: 6px 6px 10px rgba(0, 0, 0, 0.1);
}

/* 2026-08-24 追記(S11-section7): section7 のカード(380x379, node 293:40 ほか)の実測影。
 * --shadow-card(.card 280x317用)とはぼかし半径が異なる(20px)別値のため新規追加。PROGRESS.md に報告。 */
:root {
  --shadow-card-lg: 6px 6px 20px rgba(0, 0, 0, 0.1);
}

/* 2026-08-24 追記(SP計画フェーズ): SP_A(250:188) の16セクション全件を実測。
 * 色は既存トークンと100%一致（新規0件）。フォントサイズのみ、PCの刻みに無い値が実測で見つかったため追加。
 * 既存値は変更していない。PROGRESS-SP.md に報告。 */
:root {
  --fs-66: 66px;   /* section6見出し(361:375)。1/16 */
  --fs-28: 28px;   /* main内チェックリスト本文(361:169等)。頻出 */
  --fs-26: 26px;   /* section1本文(361:203)。頻出 */
  --fs-25: 25px;   /* headerロゴ文字(361:152) */
  --fw-black: 900; /* main見出しの強調スパン(font-['Noto_Serif_JP:Black'])。PCには無い階調 */
}

/* 2026-08-25 追記(SP05-section2): SP の section2 カード(690x* / node 361:213 ほか)の実測影。
 * Figma は drop-shadow(7.173px 7.173px 11.955px rgba(0,0,0,.1)) だが device px なので CSS px は 1/2。
 * 既存 --shadow-card(PC 1920px設計)は変更していない。PROGRESS-SP.md に報告。 */
:root {
  --shadow-card-sp: 3.59px 3.59px 5.98px rgba(0, 0, 0, 0.1);
}

/* 2026-08-25 追記(SP10-section6): SP の section6 見出し(node 361:375)。
 * Figma は text-[66px] だが **device px なので CSS px は 1/2 = 33px**。
 * 上の `--fs-66`（SP計画フェーズが device 値のまま登録したもの）は
 * そのまま実装に使えないが、既存値は変更しない（AGENTS.md）ので 33px を別に足す。
 * PROGRESS-SP.md に報告済み。 */
:root {
  --fs-33: 33px;   /* section6見出し(361:375) 66device / 2 */
}

/* 2026-08-25 追記(SP11-section7): SP の section7 カード(690x* / node 361:390 ほか)の実測影。
 * Figma は shadow-[10.895px_10.895px_36.316px_0px_rgba(0,0,0,0.1)] だが
 * device px なので CSS px は 1/2。
 * 既存 --shadow-card-lg(PC 1920px設計)は変更していない。PROGRESS-SP.md に報告。 */
:root {
  --shadow-card-lg-sp: 5.4475px 5.4475px 18.158px rgba(0, 0, 0, 0.1);
}

/* 2026-08-25 追記(SP01-header): SP のヘッダーロゴ文字。
 * Figma SP(361:152)は text-[25px]、(361:151)は text-[12.5px] だが
 * **device px なので CSS px は 1/2**（--fs-66 → --fs-33 と同じ事情）。
 * 上の `--fs-25`（SP計画フェーズが device 値のまま登録したもの）は
 * そのまま実装に使えないが、既存値は変更しない（AGENTS.md）ので別に足す。
 * PROGRESS-SP.md に報告済み。 */
:root {
  --fs-12-5: 12.5px;  /* headerロゴタイトル(361:152) 25device / 2 */
  --fs-6-25: 6.25px;  /* headerロゴ英字(361:151) 12.5device / 2 */
}