/* Hallmark tokens · ハルノツギ Cycle 4「店舗紹介と背景デザイン」
   bespoke構成（セクション構成・挙動仕様はDex/P2正本が正）。Cycle3のHero/カルーセル/配色思想を継承しつつ、
   ページ全体ナビと役割限定の背景装飾トークンを追加する。
   genre: editorial / Hero面: dark obsidian+ember / 本文面: warm-neutral light + 役割限定の紙質感・照明・格子
   display: serif(游明朝) / body: grotesk-sans(游ゴシック)
*/

:root {
  /* --- color: 本文面 --- */
  --color-paper: oklch(96.5% 0.006 90);
  --color-paper-2: oklch(91% 0.025 75);
  --color-paper-3: oklch(93% 0.008 90);
  --color-ink: oklch(20% 0.01 90);
  --color-ink-soft: oklch(40% 0.015 90);
  --color-ink-faint: oklch(40% 0.018 90);
  --color-line: oklch(80% 0.008 90);
  --color-line-strong: oklch(63% 0.012 90);

  /* --- color: Hero面（暗部＋暖色照明） --- */
  --color-obsidian: oklch(14% 0.02 155);
  --color-obsidian-2: oklch(22% 0.03 155);
  --color-ember: oklch(62% 0.15 55);
  --color-ember-soft: oklch(72% 0.11 60);
  --color-on-dark: oklch(97% 0.012 80);
  --color-on-dark-soft: oklch(82% 0.02 80);
  --color-scrim: oklch(9% 0.015 90);

  --color-warn: oklch(50% 0.13 55);
  --color-focus: oklch(80% 0.16 95);
  --color-focus-onlight: oklch(58% 0.18 250);

  /* alpha mask専用値（視覚色ではなくmask-imageの不透明終端を表す。gate48対応でtoken化） */
  --mask-opaque: black;

  /* --- 背景装飾（役割限定・Cycle4新規） ---
     P2正本 §3: 紙質感=全体へ1層のみ／照明=1〜2区画限定・片側寄せ／格子=節目区画のみ／
     二重枠=画像保持要素のみ／メニューの帯色は廃止。すべて低不透明度で本文コントラストを損なわない。 */
  --deco-grain-opacity: 4%;
  --deco-glow-opacity: 9%;
  --deco-grid-opacity: 5%;
  --deco-grid-size: 44px;
  --deco-frame-outer-opacity: 38%;
  --deco-frame-inner-opacity: 18%;
  --deco-frame-inset: 4px;

  /* --- font pairing --- */
  --font-display: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  /* --- type scale --- */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.95rem;
  --text-md: 1.05rem;
  --text-lg: 1.3rem;
  --text-xl: 1.7rem;
  --text-2xl: 2.1rem;
  --text-display-s: 2.5rem;
  --text-display: 3.2rem;

  /* --- 4pt spacing scale --- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* --- radius --- */
  --radius-sm: 2px;
  --radius-none: 0px;

  /* --- motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-crossfade: 800ms;
  --dur-instant: 150ms;
  --dur-hero-zoom: 6500ms;
  --hero-autoplay-ms: 6000;
  --bento-autoplay-ms: 6500;
  --hero-zoom-scale: 1.03;

  /* --- z-index（固定領域の重なり順を一元管理。banner > 追従nav > PC左縦目次） --- */
  --z-banner: 50;
  --z-nav: 45;
  --z-menu-toc: 20;
  --z-hero-scrim: 5;
  --z-hero-copy: 10;
  --z-hero-controls: 15;
  --z-mobile-menu: 40;

  /* --- 固定領域の実測高トークン ---
     banner-hは折返し行数で変わるため415px境界で上書き（style.css）。
     nav-hは常時横スクロール一段構成のため幅を問わず一定値。
     cta-row-hは899px以下の予約CTA行（Smart Header上段）の非JS/JS未実行時フォールバック推定値
     （Cycle5 P2正本 §6・script.jsのSmart Header実装に対応。900px以上ではCTAはnav行に内包され
     行が増えないため加算しない）。
     --app-header-hは.app-header（バナー+CTA行+ナビの統合sticky wrapper）の実測高の正本。
     script.jsがResizeObserverで実測し、:rootのインラインstyleとして常時同期する
     （P4 Take2差し戻し対応：200%文字拡大でbanner-h/nav-hの推定px値と実測高が乖離し、
     アンカー・PC menu tocが隠れる回帰があったため）。
     JS無効・失敗時は banner-h + (899px以下のみcta-row-h) + nav-h の推定値へフォールバックする
     （style.css側の@media (max-width: 899px)で上書き）。
     header-scroll-offsetとmenu tocのtopはこのapp-header-hだけを参照し、二重管理を避ける。 */
  --banner-h: 60px;
  --nav-h: 60px;
  --cta-row-h: 60px;
  --app-header-h: calc(var(--banner-h) + var(--nav-h));
  --header-scroll-offset: calc(var(--app-header-h) + 16px);
}