/* ============================================================
   tokens.css — Single source of truth for design tokens
   全 HTML から最初に読まれる。lp.css / shared.css はこれに依存。

   ── 設計原則 ──
   1. 1px・0.05 の差は作らない（知覚できないノイズは脳の負担）
   2. font-size は 4 の倍数を基本とした規則的スケール（12→16→20→24→32）
   3. line-height は 3 階層（1.5 / 1.8 / 2.0）
   4. radius は 8px に統一（pill は別扱い）
   5. ステータス色の soft / border 派生は color-mix() でルール1本に
   ============================================================ */

:root {
  /* ── Background ── */
  --bg:        #f9f7f4;    /* ページ基本背景 */
  --panel-bg:  #fdfcfa;    /* パネル・toc・stat-card */

  /* ── Accent（茶系・4階層） ── */
  --accent:        #8b6f47;
  --accent-dark:   #6b5335;
  --accent-light:  #d4b896;
  --accent-soft:   #f5efe5;

  /* ── Border ── */
  --border:       #d4c9b8;

  /* ── Text（2階層） ── */
  --text:        #5a4830;
  --text-muted:  #7a6a58;

  /* ── Status（強色のみ・soft/border は color-mix() で派生） ── */
  --success:  #4a7c5a;
  --warning:  #e6ac00;
  --danger:   #d44;

  /* ── Container（200の倍数） ── */
  --container-narrow:  800px;
  --container-mid:    1000px;
  --container-wide:   1200px;

  /* ── Radius（4の倍数） ── */
  --radius:       8px;
  --radius-pill:  9999px;

  /* ── Fonts ── */
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'YuMincho', 'MS PMincho', serif;
  --font-sans:  'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Yu Gothic UI', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;

  /* ── Font size（規則的スケール） ── */
  --fs-xs:    12px;        /* 最小ラベル・キャプション・バッジ */
  --fs-sm:    14px;        /* 補助テキスト */
  --fs-base:  16px;        /* 本文 */
  --fs-lg:    20px;        /* カード見出し */
  --fs-xl:    24px;        /* セクション見出し */
  --fs-2xl:   32px;        /* ページタイトル */
  --fs-hero:  clamp(28px, 4.5vw, 44px);   /* H1 */

  /* ── Line height（3階層） ── */
  --lh-tight:  1.5;   /* タイトル系 */
  --lh-base:   1.8;   /* 本文 */
  --lh-loose:  2.0;   /* 記事本文 p */
}

/* ── 共通リセット（最低限） ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }