/* デザイントークン。値の出典は spec/20-design.md（Figma の variables）。
   ここ以外に色コードやフォント名を直書きしない。 */

/* クライアント支給の書体 A-OTF 中ゴシックBBB Pro Medium（モリサワ）。
   Figma のデザインで使われている書体で、原本 3.6MB をサブセットした
   woff2 を自前で配る。生成は tools/build-font.sh。
   HTML の文言を足したり変えたら再実行しないと、その文字だけ
   Zen Kaku Gothic New に落ちて字形が混ざる。
   ファイル名にバージョンが無いので、中身を差し替えたら ?v= を上げる。 */
@font-face {
  font-family: "GothicBBB Pro";
  src: url("/assets/fonts/gothic-bbb-medium.woff2?v=3") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 色。彩色はグレースケールのみでアクセントカラーは無い */
  --color-bg: #ffffff;
  --color-ink: #222222;
  --color-black: #000000;
  --color-grey-20: #333333;
  --color-grey-33: #555555;
  --color-grey-40: #666666;
  --color-grey-53: #888888;
  --color-line: #dddddd;
  /* 罫線色の実測 raw 値（variables 外。プラン枠 #d2d2d2、表・囲み #dedede、contact 内仕切り(desktop) #f5f5f5） */
  --color-line-plan: #d2d2d2;
  --color-line-box: #dedede;
  --color-line-faint: #f5f5f5;
  /* ドロワーの背面を覆う暗幕 */
  --color-backdrop: rgba(0, 0, 0, 0.5);

  /* タイポグラフィ */
  /* Zen Kaku Gothic New はサブセットに無い文字のフォールバックとして残す */
  --font-base: "GothicBBB Pro", "Zen Kaku Gothic New", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fs-15: 15px;
  --fs-18: 18px;
  /* 見出し・注記の実測 raw 値（variables 外） */
  --fs-12: 12px;
  --fs-21: 21px;
  --fs-34: 34px;
  --fs-45: 45px;
  --lh-26: 26px;
  --lh-28: 28px;
  --lh-30: 30px;
  --lh-32: 32px;
  --lh-34: 34px;
  --lh-52: 52px;

  /* 字間。見出しほど広く取る設計なので省略しない */
  --ls-06: 0.6px;
  --ls-136: 1.36px;
  --ls-2: 2px;
  --ls-192: 1.92px;
  --ls-196: 1.96px;
  --ls-224: 2.24px;
  --ls-26: 2.6px;
  --ls-288: 2.88px;
  --ls-324: 3.24px;

  /* レイアウト */
  --w-900: 900px;
  --w-820: 820px;
  --w-574: 574px;
  --gap-78: 7.8px;
  --gap-s: 24px;
  --gap-m: 32px;
  --gap-36: 36px;
  --gap-50: 50px;
  --stroke: 1px;

  /* mobile の左右余白（コンテンツ幅 335px） */
  --pad-mobile: 20px;

  /* モーション。使うのはハンバーガーメニューの開閉だけ。値は既存案件「耕流祭」に揃える */
  --ease-menu: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-menu-panel: 500ms;
  --dur-menu-backdrop: 400ms;
  /* ハンバーガーの×変形とヘッダーロゴのフェード。パネルより短くして先に切り替える */
  --dur-menu-icon: 240ms;
}