/* tokens.css ── 色・書体・余白などの値の定義
   ── 目次 ──
   ・tokens.css — カスタムプロパティ定義のみ（セレクタを伴う規則は書かない）

   ── 編集の手引き ──
   ・値はここだけで定義する。他のファイルに色の生値を書かない
   ・参照は var(--名前) で行う
   ------------------------------------------------------------------ */

/* ==========================================================================
   tokens.css — カスタムプロパティ定義のみ（セレクタを伴う規則は書かない）
   正本: docs/03_デザイン定義書.md
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- カラー：基本6トークン（03 §3.2） ---- */
  --color-primary: #16305A;
  --color-bg:      #F7F3EC;
  --color-accent:  #BC4A35;
  --color-text:    #2B2B2B;
  --color-rule:    #E3DCCF;
  --color-border:  #8C8578;

  /* ---- カラー：派生トークン（03 §3.3） ---- */
  --color-primary-rgb: 22, 48, 90;
  --color-accent-hover: #A03F2D;
  --color-on-dark: #FFFFFF;
  --color-focus:         var(--color-primary);
  --color-focus-on-dark: var(--color-bg);
  --overlay-scrim: rgba(0, 0, 0, .6);
  --shadow-sm:    0 1px 3px rgba(var(--color-primary-rgb), .10);
  --shadow-md:    0 4px 14px rgba(var(--color-primary-rgb), .14);
  --shadow-modal: 0 8px 32px rgba(var(--color-primary-rgb), .24);

  /* ---- 書体（03 §4.1・§4.2） ---- */
  --font-heading: "しっぽり明朝B1", "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif;

  /* ---- タイプスケール（03 §4.4） ---- */
  --fs-h1:    clamp(2rem, 1.5856rem + 1.768vw, 3rem);        /* 32px → 48px */
  --fs-h2:    clamp(1.625rem, 1.4178rem + 0.884vw, 2.125rem); /* 26px → 34px */
  --fs-h3:    clamp(1.25rem, 1.1464rem + 0.442vw, 1.5rem);    /* 20px → 24px */
  --fs-body:  1.0625rem;  /* 17px固定 */
  --fs-small: 0.875rem;   /* 14px固定 */

  --lh-h1:    1.3;
  --lh-h2:    1.4;
  --lh-h3:    1.5;
  --lh-body:  1.8;
  --lh-small: 1.6;

  /* ---- 太さ（03 §4.5） ---- */
  --fw-heading-regular: 400;
  --fw-heading-bold:    700;
  --fw-body-regular:    400;
  --fw-body-bold:       700;

  /* ---- スペーシング：4px基準11段階（03 §5） ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;

  /* ---- レイアウト（03 §6.1・§6.3） ---- */
  --container-max: 1120px;
  --pad-sm: 20px; /* 〜767px */
  --pad-md: 32px; /* 768〜1279px */
  --pad-lg: 48px; /* 1280px〜 */
  --header-height: 56px; /* 〜767px */

  /* ---- 角丸（03 §7.1） ---- */
  --radius-sm: 2px; /* タグ、入力欄 */
  --radius-md: 4px; /* ボタン、カード、テーブル外枠 */
  --radius-lg: 8px; /* モーダルパネル、写真の枠 */

  /* ---- モーション（03 §8） ---- */
  --dur-fast:      200ms;
  --dur-base:      300ms;
  --dur-slow:      500ms;
  --dur-hero-zoom: 20000ms;
  --stagger-step:  60ms;

  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --ease-in-out:   cubic-bezier(.4, 0, .6, 1);

  /* ---- 重なり順：03に定義なし。header・mobile-tel-bar・skip-link・
     tel-modalの4者が競合しないための最小3階層（本ファイル内での補完） ---- */
  --z-sticky:    100; /* .header, .mobile-tel-bar */
  --z-skip-link: 200; /* .skip-link（フォーカス時、ヘッダーより手前） */
  --z-modal:     300; /* .tel-modal（最前面） */
}

@media (min-width: 768px) {
  :root {
    --header-height: 64px; /* 768px〜 */
  }
}

/* モバイルメニューの上端オフセット。開いている間はヘッダーを画面上端に固定するため、
   ヘッダー高と同値でよい（デモ帯はヘッダーの下に隠れる） */
:root { --mobile-menu-offset: var(--header-height); }
@media (min-width: 768px) { :root { --mobile-menu-offset: 0px; } }

/* デモ帯の高さ。1行固定（全幅で実測31px）。FVの高さから差し引き、
   「帯＋FV」でちょうど画面1枚に収める */
:root { --demo-bar-height: 31px; }

/* セクションを1つおきに敷く面。9セクションすべて同色だとリズムが単調になり
   どこで話題が変わったか分かりにくいため、淡く明るい生成りで区切る */
:root { --color-surface-alt: #FDFAF4; }