/* ============================================================
   @kit-token  tokens.css
   @status     stable
   @since      0.1.0
   @source     大地アート / 髙笠（spacing・font-size が一致）
               ※注：この一致は両案件が同じGenSparkデザインシステムを再利用した産物で、
               独立した収斂ではない。Claude Code製のPINE GROVE/フーズは命名バラバラだった。
               → これらの値は「過去から発見した定番」ではなく、今後キットが課す「正本」として扱う
               （Claude Code等のAIにこのファイルを直接読ませれば一貫適用が効く＝ツール非依存）。
   @todo       カラー二系統（大地系/髙笠系）の統合は破壊的なので v1.0 で検討（ROADMAP参照）

   採用/会社紹介サイトの共通デザイントークン。
   新案件はこのファイルを読み込み、カラーだけ docs/COLOR_PRESETS.md から差し替える。
   ============================================================ */

:root {
  /* --- スペーシング（大地・髙笠で完全一致＝確定） ---------------- */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  32px;
  --spacing-xl:  48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;   /* セクション標準余白 */

  /* --- フォントサイズ（大地・髙笠で一致。h2/h3のみ案件で微差） ---- */
  --font-size-hero:  64px;
  --font-size-h1:    48px;
  --font-size-h2:    32px;   /* 髙笠は42px。見出しを強くしたい案件は上書き */
  --font-size-h3:    24px;   /* 髙笠は28px */
  --font-size-body:  16px;
  --font-size-small: 14px;
  --font-size-label: 12px;

  /* --- トランジション ------------------------------------------- */
  --transition-base:    0.2s ease;   /* 髙笠 --transition-base 由来 */
  --transition-default: 0.3s ease;   /* 大地 --transition-default 由来 */
  --transition-slow:    0.4s ease;   /* 髙笠 --transition-slow 由来 */

  /* --- カラー：変数の「枠」だけ定義（実値はプリセットで上書き） ---
     正本は大地系の命名を採用。下の値はラグジュアリーゴールド（既定）。
     案件ごとに docs/COLOR_PRESETS.md の1プリセットを選んでこの8変数を差し替える。 */
  /* 案件：北商物産（試作・デザインリニューアル）／カスタム「重厚ネイビー × ブラス」
     高級感・信頼性のあるコーポレート配色（COLOR_PRESETSのカスタム枠） */
  --color-primary:      #0E2236;  /* ディープネイビー（見出し・濃地・フッター） */
  --color-accent:       #B0894F;  /* アンティークブラス（罫・CTA・強調） */
  --color-accent-light: #CCA967;  /* ライトブラス */
  --color-text-dark:    #1B2A39;  /* 本文（インクネイビー） */
  --color-text-gray:    #5B6B7A;  /* 補足・淡 */
  --color-bg-white:     #FBFAF7;  /* 背景（温かみのある紙白） */
  --color-bg-light:     #F2EEE6;  /* 背景（交互・生成り） */
  --color-bg-dark:      #0B1B2C;  /* 背景（暗ネイビー） */

  /* --- 命名対応表：髙笠系を使う案件はこの別名でブリッジ可 --------
     髙笠系     → 大地系（正本）
     --color-bg       → --color-bg-white
     --color-surface  → --color-bg-light
     --color-line     → （罫線。必要なら --color-line を別途定義）
     --color-text     → --color-text-dark
     --color-text-sub → --color-text-gray
     --color-red 等のブランド色 → --color-accent
     ※二系統の本統合は破壊的変更のため v1.0 まで保留（ROADMAP「既知の弱点」）。 */
  --color-line: #E6E8EB;  /* 罫線（髙笠由来。区切り線・ボーダー） */

  /* --- 小さい文字用のアクセント色（2026-08-10 追加） ----------------
     --color-accent #B0894F は紙白(#FBFAF7)で 3.08:1、生成り(#F2EEE6)で 2.78:1 と
     WCAG AA（本文4.5:1）に届かない。罫・CTA地・大きな文字には従来どおり使い、
     16px前後の小さい文字にはこちらを使う。
     実測：紙白 5.82:1 ／ 生成り 5.25:1 ＝ AA適合 */
  --color-accent-text: #7E5C2E;
}

/* ============================================================
   タイポグラフィ・スケール（2026-08-10 追加）
   上の --font-size-* は固定pxで、実際にはサイト側から参照されていなかった。
   ここで clamp() ベースの実用スケールを定義し、site.css から必ずこれを引く。
   基準：本文16px（B2B・建設業界の読者層を考え、下限を16pxより下げない）
   ============================================================ */
:root {
  --fs-body:    1rem;      /* 16px：本文の基準。これ未満を本文に使わない */
  --fs-body-lg: 1.05rem;   /* リード文・強調したい本文 */
  --fs-body-sm: .95rem;    /* 補助的な本文（カード説明・一覧） */
  --fs-caption: .88rem;    /* キャプション・注記 */
  --fs-label:   .8rem;     /* ラベル・パンくず（最小。これ未満は使わない） */

  --fs-h1:   clamp(1.9rem, 4vw, 2.8rem);
  --fs-h2:   clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3:   1.35rem;
  --fs-h4:   1.18rem;
  --fs-hero: clamp(2.1rem, 4.4vw, 3.4rem);

  /* 行間：日本語は広めに。見出しは詰める */
  --lh-body:    1.95;
  --lh-heading: 1.5;

  /* 角丸：2px/3px/4px/999px の混在を2段階に整理 */
  --radius-sm:   3px;
  --radius-pill: 999px;
}

/* 任意：レスポンシブで見出しを縮める場合の目安（髙笠の実装に倣う）。
   必要な案件だけ各サイト側CSSで上書きする。ここでは強制しない。
@media (max-width: 768px) {
  :root {
    --font-size-hero: 40px;
    --font-size-h1:   32px;
    --font-size-h2:   24px;
  }
}
*/