/* ============================================================
   @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;  /* 罫線（髙笠由来。区切り線・ボーダー） */
}

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