/* =============================================================================
   KinKoi 集客 LP — デザイントークン（tokens.css）
   -----------------------------------------------------------------------------
   役割: 全 LP ページ共通の CSS カスタムプロパティ（色 / radius / spacing /
         transition / LP 専用レイアウト変数）の唯一の定義場所。
         base.css → components.css はここで定義した変数のみを参照する。

   SoT: web/DESIGN.md（および web/affiliates/src/styles.css の :root）。
        カラー / radius / spacing / transition は SoT と同一値を移植している。
        色を変える場合は web/DESIGN.md のコントラスト検算表を必ず再計算すること。

   この LP の方針（affiliates / adminview との差分）:
   - shadow を一切使わない。--shadow* トークンは定義しない。
     視覚的階層は --hairline（境界線）＋ --surface / --bg の 2 層
     ＋ --grad-cta（CTA のグラデ面）だけで作る。
   - 文字色に使ってよいのは AA を満たす --accent-strong / --danger / --info /
     --success-strong / *-tint-text のみ。--accent(#eb6130) は枠線・アイコン・
     フォーカスリング・大型装飾専用（本文文字に使うと AA 不足）。
   ============================================================================= */

:root {
  /* --- ベース（白基調・prefers-color-scheme 非対応の白固定） ------------------ */
  --bg: #f5f5f7; /* ページ背景。白カード（--surface）との 2 層構造を作る */
  --surface: #fff; /* カード・パネル面 */
  --surface-2: #f4f4f7; /* サブ面（FAQ 折り畳み・コードなど） */
  --border: #e4e4ea; /* 汎用ボーダー（行区切り等） */
  --text: #191924; /* 本文 */
  --text-muted: #666670; /* 補助テキスト */

  /* iOS buttonBorder（primary の 12% 透過）相当。
     この LP では視覚的階層の主役。カード・区切り・装飾の境界線すべてに使う。 */
  --hairline: rgb(25 26 36 / 12%);
  --hairline-strong: rgb(
    25 26 36 / 20%
  ); /* 見出し下のアクセント罫など、やや強い境界 */

  /* --- アクセント ----------------------------------------------------------- */

  /* --accent は枠線 / フォーカス / アイコン / 大型装飾のみ（白背景 3.34:1 = AA UI/large）。
     本文文字には使わない（4.5:1 不足）。文字には --accent-strong を使う。 */
  --accent: #eb6130;
  --accent-hover: #d2541f;
  --accent-strong: #c8501c; /* 白上 AA-normal。本文リンク文字色・強調文字に使用可 */
  --accent-strong-hover: #b04517;
  --accent-pink: #eb526b; /* 装飾用 */
  --accent-pink-strong: #c84057; /* グラデ終端（白文字 4.85:1） */
  --accent-pink-strong-hover: #b23348;

  /* 主 CTA・ステップ番号・バッジの面。両端とも strong 系で白文字 AA-normal を満たす。 */
  --grad-cta: linear-gradient(90deg, #c8501c 0%, #c84057 100%);
  --grad-cta-hover: linear-gradient(90deg, #b04517 0%, #b23348 100%);

  /* 主 CTA の hover で重ねる一段深いグラデ（白文字を全 stop 5.6:1 以上に保つ）。
     MEMO: 安静時の主 CTA は solid 塗り。axe-core が gradient 背景を測れず誤検知するため、
     彩りの grad は hover 限定で付与する（components.css の .btn--primary 参照）。 */
  --grad-cta-btn: linear-gradient(90deg, #b04517 0%, #b23348 100%);

  /* --- tint（淡色背景 + その上で AA-normal を満たす文字色のペア） ------------- */
  --accent-tint: #fdece6;
  --accent-tint-text: #b04517; /* tint 上 4.94:1 */
  --accent-pink-tint: #fdeaed;
  --accent-pink-tint-text: #bc3a50; /* tint 上 4.71:1 */
  --success-tint: #e5f5e9;
  --warn-tint: #faf4e0;
  --err-tint: #f9e6e6;
  --info-tint: #e3edf8;
  --neutral-tint: #ededee;

  /* --- semantic（白・各 tint 上で文字色として AA-normal を満たす値） ---------- */
  --danger: #c8102e;
  --warning: #8a5300;
  --info: #1668c2;
  --success: #26ad47; /* 装飾用。文字には --success-strong */
  --success-strong: #14753a; /* tint 上 5.11:1（文字用） */
  --danger-fill: #d12e2e; /* solid バッジ背景（白文字 5.07:1） */
  --warning-fill: #d9a600; /* 装飾用 */

  /* --- radius --------------------------------------------------------------- */
  --radius-card: 16px;
  --radius-btn: 14px;
  --radius-chip: 12px;
  --radius-input: 10px;
  --radius-badge: 8px;
  --radius-modal: 20px;

  /* --- spacing（iOS の余白リズム） ----------------------------------------- */
  --space-outer: 20px;
  --space-section: 24px;
  --space-element: 12px;
  --space-inline: 6px;

  /* --- motion --------------------------------------------------------------- */
  --transition: 0.25s ease-in-out; /* 標準（iOS kinkoiAnimation と同値） */
  --transition-fast: 0.15s ease; /* 軽量フィードバック */
  --overlay: rgb(25 26 36 / 55%); /* 暗オーバーレイ scrim */

  /* =========================================================================
     LP 専用トークン（このリポジトリの集客 LP でのみ使用）
     ------------------------------------------------------------------------- */
  --lp-max: 1200px; /* コンテンツ最大幅（.container の幅） */
  --lp-gap: var(--space-section); /* グリッドの基本 gap（24px） */

  /* ---------------------------------------------------------------------------
     3 分割シェルの確定プロポーション（≥1100px）。
       左パネル(.rail--left) = 残り全部（= 一番大きいブランド面）
       中央(.lp-main)        = --lp-center 固定（FV が通常ズームで収まる単一カラム）
       右ナビ(.rail--right)  = --lp-rail-right（細め）
     左パネル幅は計算量が複数箇所で要るため --lp-rail-left に集約する
     （= 100vw − 中央 − 右）。
     MEMO: 中央を 468px 固定にして、520px 列を 90% ブラウザズームで見た時に近い
     FV サイズを確保する。3-up は 468px でも窮屈なため
     中央内は常に単一カラム縦積みにする（components.css 側で 1fr 化）。 */
  --lp-center: 468px; /* 中央スクロール領域の固定幅 */
  --lp-rail-right: clamp(16.25rem, 23.4vw, 19.5rem); /* 右ナビ 260〜312px */
  --lp-rail-left: calc(
    100vw - var(--lp-center) - var(--lp-rail-right)
  ); /* 左パネル = 残り全部（主役の面） */

  --lp-topbar-h: 3.5rem; /* <1100px の上部固定バー高さ（56px） */

  /* セクション上下の縦リズム（fluid: 画面幅で 56〜112px に伸縮） */
  --lp-section-y: clamp(3.5rem, 7vw, 7rem);

  /* 画面外周の左右パディング（fluid: 16〜32px） */
  --lp-pad-x: clamp(1rem, 4vw, 2rem);

  /* 見出しタイポ（fluid clamp。固定 px を避ける） */
  --lp-fs-hero: clamp(2rem, 5.2vw, 3.5rem); /* Hero h1 */
  --lp-fs-h2: clamp(1.6rem, 3.4vw, 2.4rem); /* セクション見出し */
  --lp-fs-h3: clamp(1.1rem, 1.8vw, 1.35rem); /* カード見出し */
  --lp-fs-lead: clamp(1rem, 1.5vw, 1.2rem); /* リード文 */
  --lp-fs-eyebrow: 0.8rem; /* eyebrow（小見出し上のラベル） */
  --lp-line: 1.7; /* 本文行間 */

  /* 左ブランドパネルの大型ロゴ高さ（fluid: 48〜72px）。
     左パネルが主役の面なのでロゴを大きく中央に据える。 */
  --lp-brand-logo: clamp(3rem, 5vw, 4.5rem);

  /* ---------------------------------------------------------------------------
     あしらい（装飾）専用トークン。
     のっぺり感を減らす editorial 装飾に使う極薄色。box-shadow を使わない制約下で
     「人の手で設計した」質感を hairline ＋ accent ＋ ロゴの二重リングモチーフだけで作る。
     本文の可読性を邪魔しないよう、面の装飾は必ず本文より背面・極薄にする。
       --deco-index         : 大型インデックス番号（01・02…）の極薄塗り
       --deco-accent-faint  : accent の極薄（リング装飾・プルクオート記号の塗り）
       --deco-hairline-faint: 地紋ドット / 斜め罫の極薄 hairline */
  --deco-index: rgb(25 26 36 / 4%);
  --deco-accent-faint: rgb(235 97 48 / 8%);
  --deco-hairline-faint: rgb(25 26 36 / 6%);
}