/* tokens.css — 中風寺 デザイントークン
   以降の CSS は必ずこの変数を経由する(ハードコードの色・余白は禁止)。 */
:root {
  /* ── カラー(v1 から継承) ── */
  --color-ink: #241c10;          /* 墨: 本文・濃色背景 */
  --color-wood: #5a3c28;         /* 古木: サブテキスト・リンク */
  --color-gold: #b8902a;         /* 古金: 装飾・大見出し・下線のみ */
  --color-gold-light: #d4a940;   /* 古金(明): 暗背景上のホバー */
  --color-washi: #f5f0e8;        /* 和紙: ページ背景 */
  --color-paper: #ede7da;        /* 薄紙: セクション背景・注記 */
  --color-white: #fdfaf4;        /* 生成り: カード面 */
  --color-smoke: #b8ae9e;        /* 煙: 罫線・装飾のみ(文字に使わない) */
  --color-moss: #486640;         /* 苔: タグ・状態 */

  /* ── 追加カラー ── */
  --color-on-dark: #f5f0e8;        /* 暗背景上の本文 */
  --color-on-dark-muted: #d9d0bf;  /* 暗背景上の補助文 */
  --color-disabled: #7d7363;       /* 無効状態(WCAG は無効要素を対象外とするが視認はできる値) */
  --color-focus: #241c10;          /* フォーカスリング(明背景上) */
  --color-focus-on-dark: #d4a940;  /* フォーカスリング(暗背景上) */
  --color-overlay: rgb(36 28 16 / 0.4); /* 写真上の暗めオーバーレイ(墨の透過) */
  --color-line: rgb(184 174 158 / 0.6);  /* 罫線(煙の透過) */

  /* ── タイポグラフィ ── */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  --fs-xs: 0.72rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.2rem;
  --fs-flow: 0.8125rem;   /* 参拝の流れの文字: 13px */
  --fs-hero: clamp(3rem, 9vw, 5.5rem);   /* Figma 確定: 88px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-body: 1.9;
  --lh-tight: 1.3;
  --ls-heading: 0.1em;       /* 見出し字間 .08〜.14em の中央 */
  --ls-heading-wide: 0.14em;
  --ls-heading-narrow: 0.08em;

  /* ── スペーシング(8px 基準) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  --section-y: var(--space-7);   /* 下層ページ本文 SP: 4.5rem */
  --section-y-top: var(--space-7); /* トップのセクション SP: 4.5rem */
  --info-bar-y: 2.25rem;         /* 情報バーの上下余白 */

  /* ── レイアウト ── */
  --container-wide: 1180px;
  --container-text: 880px;
  --gutter: var(--space-4);
  --header-h: 4rem;

  /* ── 形状・影 ── */
  --radius: 0;
  --radius-md: 0.5rem;       /* 角丸 8px: 注記・カード・ボタン・表・画像・マップ */
  --icon-md: 2.5rem;         /* 参拝の流れのアイコン: 40px */
  --shadow-sm: 0 1px 4px rgb(36 28 16 / 0.12);
  --shadow-md: 0 6px 20px rgb(36 28 16 / 0.16);

  /* ── モーション(フェードとわずかな上昇のみ) ── */
  --ease: ease-out;
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 400ms;
  --rise: 12px;

  /* ── ブレークポイント(参考値。@media には数値を直書きする) ──
     600px / 920px */

  /* ── フォーカス ── */
  --focus-width: 2px;
  --focus-offset: 3px;
  --line-gold: 1px;   /* 金の細線 */
}

@media (min-width: 920px) {
  :root {
    --section-y: 7rem;   /* 下層ページ本文 PC: 7rem */
    --section-y-top: 6rem; /* トップのセクション PC: 6rem(Figma 確定: 96px) */
    --gutter: var(--space-5);
  }
}