/* ============================================================================
 * templates/cafe/design-tokens.css
 *
 * 業態:           cafe
 * 配色トーン:     light / earth tone (cream + Coffee Brown)
 * Based on:       templates/winebar/design-tokens.css (140 行、2026-05-12 完成)
 *                 templates/cafe/page-structure.md §3 配色要件
 *                 templates/cafe/cafe-template-recon-spec.md §4.3
 *                 knowledge/_internal/color-and-contrast.md §11.2 + §9
 * Created:        2026-05-13
 * Template ver:   v0.3 (cafe テンプレ v1.0、schema-template.json と整合)
 *
 * 構成:
 *   §1 配色         HEX フォールバック + @supports OKLCH 上書き
 *   §2 タイポグラフィスケール (modular scale 1.25、R-001)
 *   §3 8pt グリッド スペーシング (R-002)
 *   §4 行間 (R-003)
 *   §5 フォントファミリー (typography-japanese.md 由来、winebar と同値)
 *   §6 イージング・トランジション (R-024)
 *   §7 V6 由来補助変数 (winebar 踏襲、cafe では現状未使用)
 *   §8 OS アニメ削減対応 (cafe NEW、winebar 側にも v0.4 で追加検討)
 *
 * 変数命名規則:
 *   templates/winebar/design-tokens.css と完全一致 (--bg / --text / --accent /
 *   --serif / --sans / --mono 等)。HTML 互換維持のため変数名のリネーム禁止、
 *   新変数追加禁止 (v0.4 課題)。本ファイルは「値のみ cafe 業態 light/earth tone
 *   に置換」のテンプレ差分実装。
 *
 * 配色運用ルール (color-and-contrast.md §11.2 由来):
 *   text vs bg ≈ 13.6:1 (AAA)
 *   accent vs bg ≈ 7.4:1 (AAA、本文使用可)
 *   text-sub vs bg ≈ 7.8:1 (AAA)
 *   店舗写真からの OKLCH 抽出値で本ファイルを上書きする想定 (cafe 検証案件で確定)
 * ============================================================================ */


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

:root {
  /* HEX フォールバック (cafe 確定 + 仕様書 §4.3、全ブラウザ対応) */
  --bg:        #F8F5EE;  /* cream (背景主色、L 0.96、純白回避 R-018) */
  --bg-alt:    #EFEAE0;  /* cream darker (セクション交互背景) */
  --accent:    #6B4423;  /* Coffee Brown (60-30-10 の 10、彩度 0.08、R-016) */
  --text:      #2E2419;  /* coffee dark (本文、L 0.22、純黒回避 R-018) */

  /* V6 由来補助色 (§7 参照、HEX のみ提供) */
  --accent-2:  #C9985D;  /* caramel (副アクセント、warning・category 区切り用) */
  --text-sub:  #5C4B3D;  /* coffee medium (補助テキスト・キャプション) */
  --line:      #D9CFC0;  /* 区切り線 (0.5px 線、border-bottom) */
}

@supports (color: oklch(0 0 0)) {
  :root {
    /* OKLCH 上書き (Safari 15.4+ / Chrome 111+ / Firefox 113+)
       color-and-contrast.md §11.2 + 仕様書 §4.3 由来。
       --bg / --accent は recon-spec 値そのまま、他 5 件は HEX 微差のためターン 4 で確定。 */
    --bg:     oklch(0.96 0.008 80);
    --accent: oklch(0.40 0.08 50);
    --bg-alt: oklch(0.938 0.014 84.58);   /* #EFEAE0 */
    --text:   oklch(0.268 0.024 69.16);   /* #2E2419 */
    --accent-2: oklch(0.713 0.096 70.41); /* #C9985D */
    --text-sub: oklch(0.426 0.032 61.27); /* #5C4B3D */
    --line:   oklch(0.858 0.023 78.20);   /* #D9CFC0 */
  }
}


/* §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 {
  /* cafe 業態でも winebar と同値を使用 (recon-spec §4.3 確定)
     Shippori Mincho の手仕事感 + Noto Sans JP の温かさで cafe トーンと整合
     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);

  /* トランジション速度 (winebar と同値、業態共通) */
  --tr-fast: 150ms var(--ease-out-expo);
  --tr-base: 250ms var(--ease-out-expo);
  --tr-slow: 400ms var(--ease-out-expo);
}


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

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


/* §8 OS アニメ削減対応 (cafe NEW、WCAG 2.3.3、winebar は v0.4 で追加検討) ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* 既存 --tr-* を 0ms に上書き、変数命名は §6 と同一 (新変数追加なし) */
    --tr-fast: 0ms;
    --tr-base: 0ms;
    --tr-slow: 0ms;
  }
}