/* ============================================================================
 * templates/winebar/design-tokens.css
 *
 * 業態:           winebar
 * Based on:       V6 (sites/ChIJZY5Haq6OGGARu6SaTgSy9fE/index.html、Commit 1b1b66d)
 *                 計画書 hp-business-skill-plan-v5.md §3.5.1
 *                 knowledge/_internal/color-and-contrast.md §11.1 + §9
 * Created:        2026-05-12
 * Template ver:   v0.3
 *
 * 構成:
 *   §1 配色         HEX フォールバック + @supports OKLCH 上書き
 *   §2 タイポグラフィスケール (modular scale 1.25、R-001)
 *   §3 8pt グリッド スペーシング (R-002)
 *   §4 行間 (R-003)
 *   §5 フォントファミリー (typography-japanese.md 由来)
 *   §6 イージング・トランジション (R-024)
 *   §7 V6 由来補助変数 (業態テンプレ汎用化未確定、V6 実装で使用中)
 *
 * 変数命名規則:
 *   V6 実装と一致 (--bg / --text / --accent / --serif / --sans / --mono 等)。
 *   plan §3.5.1 が記録する --color-* / --ff-* 命名とは異なるが、本テンプレは
 *   index-template.html の var() 参照との互換を優先 (HTML 側を変更しない設計)。
 *
 * 配色運用ルール (color-and-contrast.md §11.1 由来):
 *   text vs bg ≈ 7.3:1 (AAA)
 *   accent vs bg-alt ≈ 3.7:1 (AA Large 18pt+ / 14pt+ Bold のみ、本文不可)
 *   店舗写真からの OKLCH 抽出値で本ファイルを上書きする想定
 * ============================================================================ */


/* §1 配色 ─────────────────────────────────────────────────────────────────── */

:root {
  /* HEX フォールバック (V6 確定 + 計画書 §3.5.1、全ブラウザ対応) */
  --bg:        #1A1A1A;  /* オフブラック (純黒回避、R-018) */
  --bg-alt:    #2A2823;  /* セクション交互背景 (温度感を持たせた暗色) */
  --accent:    #F2B705;  /* Mustard Gold (60-30-10 の 10、彩度 0.13、R-016) */
  --text:      #E8E0D0;  /* 本文オフホワイト (純白回避、計画書 §3.5.1 canonical) */

  /* V6 由来補助色 (§7 参照、HEX のみ提供) */
  --accent-2:  #C7472B;  /* 副アクセント (Terracotta、warning 用) */
  --text-sub:  #A8A29A;  /* 補助テキスト (キャプション・small) */
  --line:      #3A3833;  /* 区切り線 (0.5px 線、border-bottom) */
}

@supports (color: oklch(0 0 0)) {
  :root {
    /* OKLCH 上書き (Safari 15.4+ / Chrome 111+ / Firefox 113+)
       計画書 §3.5.1 + color-and-contrast.md §11.1 由来 */
    --bg:     oklch(0.20 0.005 60);
    --bg-alt: oklch(0.25 0.008 60);
    --accent: oklch(0.78 0.13 75);
    --text:   oklch(0.90 0.015 70);
  }
}


/* §2 タイポグラフィスケール ──────────────────────────────────────────────── */

:root {
  /* Modular Scale 1.25 (base 16px、R-001)
     pre-emit-checklist-21.md #6 / typography-japanese.md §R-001 由来
     使用範囲: --fs-xs 注釈 / --fs-base 本文 / --fs-md 段落見出し /
              --fs-xl section title / --fs-2xl hero catch / --fs-3xl hero span */
  --fs-xs:   13px;  /* 16 / 1.25  */
  --fs-sm:   16px;  /* base、R-008 NEGOTIABLE 下限 */
  --fs-base: 17px;  /* 日本語本文推奨 (17px が読みやすい) */
  --fs-md:   20px;  /* 16 × 1.25  */
  --fs-lg:   25px;  /* 16 × 1.25² */
  --fs-xl:   31px;  /* 16 × 1.25³ */
  --fs-2xl:  39px;  /* 16 × 1.25⁴ */
  --fs-3xl:  49px;  /* 16 × 1.25⁵ */
}


/* §3 8pt グリッド スペーシング ────────────────────────────────────────────── */

:root {
  /* 8pt Grid (R-002)
     pre-emit-checklist-21.md #15 / spatial-design.md (R-009) 由来
     padding / margin / gap はすべて以下から選ぶ。13px / 27px 等の任意値は使わない */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-12: 96px;
  --sp-16: 128px;
}


/* §4 行間 ─────────────────────────────────────────────────────────────────── */

:root {
  /* Line Heights (R-003、typography-japanese.md §R-003)
     英語の 1.5 では日本語が窮屈、1.7 が最低ライン */
  --lh-tight: 1.3;   /* 見出し用 */
  --lh-body:  1.7;   /* 本文用 (日本語推奨) */
  --lh-loose: 1.85;  /* キャプション・モバイル本文 */
}


/* §5 フォントファミリー ───────────────────────────────────────────────────── */

:root {
  /* V6 確定 (typography-japanese.md フォント選定 4-step 実例、計画書 §3.5.1)
     ブランド 3 単語: inherited / craft-record / quiet
     reflex_fonts_to_reject 非該当を確認済み (Inter / Roboto / Fraunces 等を回避) */
  --serif: 'Shippori Mincho', 'Noto Serif JP', serif;
  --sans:  'Noto Sans JP', sans-serif;
  --mono:  'JetBrains Mono', monospace;
}


/* §6 イージング・トランジション ───────────────────────────────────────────── */

:root {
  /* ease-out-expo (R-024、motion-design.md)
     impeccable / power-design のデフォルト、最も自然な減速曲線 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* トランジション速度 (V6 実装 + 業態共通) */
  --tr-fast: 150ms var(--ease-out-expo);
  --tr-base: 250ms var(--ease-out-expo);
  --tr-slow: 400ms var(--ease-out-expo);
}


/* §7 V6 由来補助変数 ─────────────────────────────────────────────────────── */
/* 本ブロックの変数は V6 実装で使用されているが、業態テンプレ汎用化の
   canonical 値は未確定 (計画書 §3.5.1 で言及なし)。v0.4 以降の業態追加時に
   各業態用の値を別途検証して確定する想定。配色補助 (--accent-2/--text-sub/--line)
   は §1 内で HEX 提供済み。本 §7 は将来追加予定の変数のリストアップ枠。 */

:root {
  /* (現時点で V6 由来補助変数は §1 配色内に集約済み。
     将来 --container-max / --content-max-width 等を追加する場合は本ブロックに記載) */
}