/* =============================================================
   Infini Design Tokens  —  single source of truth
   すべての色・余白・字送りはここを参照する。
   Kadence Global Palette と数値を一致させること（下表コメント参照）。
   ============================================================= */

:root {
  /* Kadence の --global-vw は calc(100vw - (0.5 * var(--scrollbar-offset))) を使う。
     JS未実行時などに --scrollbar-offset が未定義だと calc が無効になり、
     100vw ベースの幅計算が壊れて横はみ出しが起きる。安全な既定値を与える。 */
  --scrollbar-offset: 0px;

  /* ---- Color : Brand ------------------------------------------------
     Kadence Global Palette と対応
       palette1 = --infini-primary
       palette2 = --infini-primary-strong
       palette3 = --infini-ink
       palette4 = --infini-body
       palette5 = --infini-muted
       palette6 = --infini-faint
       palette7 = --infini-surface-alt
       palette8 = --infini-bg
       palette9 = --infini-surface
       palette10 = --infini-gold
  ------------------------------------------------------------------- */
  --infini-primary:        #7B4A43; /* CTA塗り / リンク / アクティブ  白文字7.23:1 AAA */
  --infini-primary-strong: #5F3934; /* hover / press  白文字9.9:1 AAA */
  --infini-primary-tint:   #F3E9E6; /* primaryの極薄面（引用・選択中の背景など） */

  --infini-ink:    #2E2A26; /* 見出し  ivory上13.4:1 */
  --infini-body:   #4A443D; /* 本文    ivory上 9.1:1 */
  --infini-muted:  #6B6259; /* 補足・メタ  ivory上 5.6:1（通常テキストAA） */
  --infini-faint:  #8C8377; /* 極薄・無効・注釈（大きい文字専用 / 通常テキスト不可） */

  --infini-gold:       #B98E45; /* 装飾専用：ヘアライン / 見出し下の罫 / アイコン面。テキスト・CTA塗りには使わない */
  --infini-gold-soft:  #E8D9BC; /* 罫線・仕切りの淡いゴールド */

  /* ---- Color : Surface / Background ---- */
  --infini-bg:          #FBF8F3; /* ページ地（アイボリー） */
  --infini-surface:     #FFFFFF; /* カード・コンテンツ面 */
  --infini-surface-alt: #EFE7D9; /* 交互に敷くセクション帯（ウォームベージュ） */
  --infini-surface-deep:#E7DECF; /* さらに濃い帯 / フッター地（グレージュ） */

  /* ---- Color : Line ---- */
  --infini-border:        #E6DDCE; /* 標準の境界線 */
  --infini-border-strong: #D9CEBB; /* 入力欄 / 強めの区切り */

  /* ---- Color : External brand ---- */
  --infini-line-green:      #06C755; /* LINE公式グリーン（グリフ・縁取り用。白文字塗りは不可） */
  --infini-line-green-tint: #E6F8EE; /* LINEボタンの淡い面（濃文字と組む） */

  /* ---- Color : Notices（Kadence palette11-15と一致） ---- */
  --infini-success: #3F7A55;
  --infini-info:    #2F6D9E;
  --infini-alert:   #A8443B;
  --infini-warning: #B9772B;
  --infini-rating:  #C6A15C;

  /* ---- Color : Utility ---- */
  --infini-focus-ring: 0 0 0 3px rgba(123, 74, 67, .38);
  --infini-overlay:    rgba(46, 42, 38, .55);

  /* ---- Typography : Families ---- */
  --infini-font-head: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --infini-font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  /* ---- Typography : Scale（mobile → desktop を clamp で連続変化） ---- */
  --infini-text-xs:   0.8125rem;                      /* 13 : eyebrow / タグ */
  --infini-text-s:    0.875rem;                       /* 14 : 注釈・キャプション */
  --infini-text-base: 1.0625rem;                      /* 17 : 本文（モバイルも17固定） */
  --infini-text-lg:   1.1875rem;                      /* 19 : リード文 */
  --infini-h4: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);    /* 18 → 20 */
  --infini-h3: clamp(1.25rem, 1.05rem + 1.0vw, 1.5rem);   /* 20 → 24 */
  --infini-h2: clamp(1.5rem,  1.2rem + 1.6vw, 2rem);      /* 24 → 32 */
  --infini-h1: clamp(1.875rem, 1.4rem + 2.6vw, 2.75rem);  /* 30 → 44 */
  --infini-display: clamp(1.9rem, 1.35rem + 2.6vw, 3.4rem); /* 30 → 54 : HERO見出し（和文が折り返しやすいので控えめに） */

  /* ---- Typography : Metrics ---- */
  --infini-lh-body:    1.9;   /* 和文本文はゆったり */
  --infini-lh-lead:    1.85;
  --infini-lh-heading: 1.5;
  --infini-lh-tight:   1.35;  /* HERO / 大見出し */
  --infini-tracking-label: 0.08em;
  --infini-tracking-head:  0.01em;

  /* ---- Spacing scale（8pxベース） ---- */
  --infini-space-3xs: 0.25rem; /* 4  */
  --infini-space-2xs: 0.5rem;  /* 8  */
  --infini-space-xs:  0.75rem; /* 12 */
  --infini-space-s:   1rem;    /* 16 */
  --infini-space-m:   1.5rem;  /* 24 */
  --infini-space-l:   2.5rem;  /* 40 */
  --infini-space-xl:  4rem;    /* 64 */
  --infini-space-2xl: 6rem;    /* 96 */
  --infini-space-3xl: 8rem;    /* 128 */

  /* ---- Section 縦パディング（重要度で4段階） ---- */
  --infini-section-xl: clamp(3.5rem, 2.2rem + 6vw, 6.5rem); /* 56 → 104 : ブランド/共感/最終CTA */
  --infini-section-l:  clamp(2.75rem, 2rem + 4vw, 5rem);    /* 44 → 80  : 通常セクション */
  --infini-section-m:  clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem); /* 36 → 56 : 関連情報 */
  --infini-section-s:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem); /* 24 → 32 : 補助ストリップ */

  /* ---- Layout ---- */
  --infini-container:      1120px; /* 標準コンテンツ最大幅 */
  --infini-container-wide: 1280px; /* 画像・横並びの広いブロック */
  --infini-prose:          40rem;  /* 長文の最大幅（≒和文40字） */
  --infini-gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2rem); /* 20 → 32 : 左右の余白 */
  --infini-card-gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);  /* 16 → 24 : カード間隔 */

  /* ---- Radius ---- */
  --infini-radius-s:    6px;   /* タグ・入力欄 */
  --infini-radius-m:    10px;  /* ボタン・標準カード */
  --infini-radius-l:    16px;  /* 主力カード・大きな画像 */
  --infini-radius-pill: 999px; /* チップ */

  /* ---- Shadow（ウォーム。基本は border 優先、影は控えめに） ---- */
  --infini-shadow-xs: 0 1px 2px rgba(46, 42, 38, .05);
  --infini-shadow-s:  0 2px 8px rgba(46, 42, 38, .06);
  --infini-shadow-m:  0 10px 28px rgba(46, 42, 38, .09);
  --infini-shadow-l:  0 20px 48px rgba(46, 42, 38, .12);

  /* ---- Motion ---- */
  --infini-ease: cubic-bezier(.4, 0, .2, 1);
  --infini-dur:  .2s;

  /* ---- z-index ---- */
  --infini-z-sticky-cta: 90;
  --infini-z-header:      100;
  --infini-z-drawer:      110;

  /* ---- Icon サイズ ---- */
  --infini-icon-s:  16px;
  --infini-icon-m:  20px;
  --infini-icon-d:  24px;
  --infini-icon-l:  32px;
  --infini-icon-xl: 48px;
}

/* Breakpoints（数値の基準／Kadenceと一致）
   mobile  : max-width 767px
   tablet  : 768px – 1024px
   desktop : min-width 1025px
   large   : min-width 1400px（コンテナ上限で頭打ち）
   ※ CSSカスタムプロパティはメディアクエリに使えないため、参照値としてここに明記。 */