/* ============================================================
   web_kit/tokens.css v2 — デザイントークン（正本）
   ルール: 生の色・サイズ・フォントを書いていいのはこのファイルだけ。
   ページ側は必ず var(--...) を使う（lint.py が違反を検出する）。
   クライアント案件では :root の「ブランド設定」ブロックだけ上書きする。

   v2 追加: 流体タイポ(clamp) / 字間 / 2段影 / 遷移 / 淡色tint / BP定義
   後方互換: v1のトークン名・値はすべて維持（既存案件を壊さない）。
   ============================================================ */

/* ---- ブレークポイント（正式定義・参照用コメント） ----
   sp   : ~600px   （スマホ。7-8割のトラフィック。追従CTA・ハンバーガー）
   tab  : ~900px   （タブレット。グリッド段組み崩し）
   pc   : 901px~   （デスクトップ）
   ※CSSカスタムプロパティはMQ条件に使えないため数値はコメントで固定。
   ---------------------------------------------------------- */

:root {
  /* ---- ブランド設定（案件ごとにここだけ変える） ---- */
  --c-main: #2f4a43;        /* メイン: 見出し帯・ナビ・フッター */
  --c-accent: #b98a4a;      /* アクセント: CTAボタン専用（他に使わない） */
  --c-main-tint: #eaeeed;   /* メインの淡色: 帯背景・アイコン地・引用。W7の色数にカウントしない（-tint例外） */
  --font-jp: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Noto Serif JP", serif; /* 旅館・高級業態の見出し用 */
  --font-en: "Jost", "Montserrat", "Helvetica Neue", sans-serif; /* 英字ラベル・ウォーターマーク用（欧文分離） */

  /* ---- 無彩色（原則固定） ---- */
  --c-text: #1a1a1a;
  --c-sub: #595959;
  --c-bg: #ffffff;
  --c-bg-alt: #f7f6f4;      /* 交互セクションの淡背景 */
  --c-line: #e5e2dd;
  --c-white: #ffffff;

  /* ---- 余白: 8pxスケールのみ ---- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s6: 48px;
  --s8: 64px;
  --s12: 96px;
  --s16: 128px;

  /* ---- タイポ階層（1.25比率・これ以外のサイズ禁止） ----
     上位3段は clamp で流体化: スマホ→PCで滑らかに拡縮（MQ一発の破綻を防ぐ）。
     v1の固定値は clamp の最大値と一致させ、後方互換を担保。 */
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 20px;
  --fs-xl: 25px;
  --fs-2xl: clamp(25px, 3.2vw, 31px);   /* 旧 31px */
  --fs-3xl: clamp(31px, 4.2vw, 39px);   /* 旧 39px */
  --fs-4xl: clamp(34px, 6.4vw, 49px);   /* 旧 49px：スマホ見出し破綻を解消 */
  --lh-tight: 1.3;
  --lh-body: 1.9;
  --measure: 40em;          /* 本文の最大行長（可読性の上限） */

  /* ---- 字間（和文は詰め気味・英字ラベルは広げる） ---- */
  --ls-tight: -0.01em;      /* 大見出しの和文 */
  --ls-wide: 0.2em;         /* 英字ラベル・小さいキャップス */

  /* ---- 形状 ---- */
  --radius: 4px;
  --radius-lg: 12px;        /* カード大・画像・モーダル */
  --container: 1120px;
  --container-narrow: 760px;

  /* ---- 影（2段のみ・濫用禁止。3D風の濃い影は使わない） ---- */
  --shadow-1: 0 1px 3px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.08);
  --shadow-2: 0 8px 24px rgba(26, 26, 26, 0.10), 0 2px 6px rgba(26, 26, 26, 0.06);

  /* ---- 動き（統一イージング・時間。派手なアニメ禁止） ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.4s;
  --dur-fast: 0.2s;
}