/* ============================================
   WTD Design Tokens
   ブランドの色・書体・余白をここで一元管理する。
   デザイン変更はまずこのファイルの変数を疑うこと。
   ============================================ */

:root {
  /* ---- Color(指定書より) ---- */
  --c-base:   #f1f1f1;  /* 背景ベース */
  --c-gray:   #868686;  /* 中間グレー(欧文見出し・罫線) */
  --c-ink:    #000000;  /* 墨(本文・ロゴ) */
  --c-white:  #ffffff;  /* カード・Design背景 */
  --c-art:    #231815;  /* Artセクション濃茶(※要実物照合。ズレていたらここだけ直す) */
  --c-art-text: #f1f1f1;

  /* ---- Typography ----
     本番書体:
       和文: 中ゴシックBBB(モリサワ / Xserver Webフォント) → 導入時に "gothic-bbb" 等の指定名を先頭へ
       欧文: FuturaPT B / M(Adobe Fonts) → キット読込後 "futura-pt" を先頭へ
     反映済み(2026-07-19): 和文はTypeSquareプラグイン+下記指定、
     欧文はAdobe Fontsキット(functions.phpで読込)+futura-pt。
     Webフォントが届かない環境では後続のフォールバックで表示。 */
  --font-jp: "中ゴシックBBB", "中ゴシック BBB", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  /* 和文の太さ段階(BBBに縁取りを重ねて中間ウェイトを作る)。
     強=メインコピー・Contact見出し / 中=セクションコピー・ボタン。
     太さ調整はこの2行の数値だけ動かす。 */
  --jp-stroke-strong: 0.030em;
  --jp-stroke-mid:    0.016em;
  --font-en: "futura-pt", "Futura", "Jost", "Avenir Next", "Century Gothic", sans-serif;
  --fw-en-bold: 700;   /* FuturaPT Bold(キット収録済み) */
  --fw-en-med:  500;   /* FuturaPT Medium ※Adobe Fontsプロジェクトへの追加待ち。追加されるまで400で代用表示 */

  /* futura-ptは同サイズでも字面が小さく出るための補正倍率。
     「欧文をもう少し大きく/小さく」はこの1行だけ動かす。 */
  --en-scale: 1.06;

  /* ---- Type scale ---- */
  --fs-hero-main: clamp(28px, 3.4vw, 44px);   /* 縦書きメインコピー */
  --fs-hero-sub:  clamp(18px, 2.1vw, 27px);   /* 縦書きサブコピー */
  --fs-v-copy:    clamp(17px, 1.8vw, 23px);   /* セクション縦書きコピー */
  --fs-section:   clamp(44px, 5.5vw, 68px);   /* Design / Art 欧文見出し */
  --fs-body:      15px;
  --fs-small:     13px;
  --lh-body: 1.9;

  /* ---- Layout ---- */
  --w-content: 1280px;         /* デザイン基準幅 */
  --pad-x: clamp(20px, 4vw, 56px);
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 32px;
  --sp-4: 56px;
  --sp-5: 96px;                /* セクション縦余白(848px区切りの美学を余白で再現) */
  --sp-6: 140px;

  /* ---- Misc ---- */
  --tr: 0.35s ease;            /* 標準トランジション */
}

@media (prefers-reduced-motion: reduce) {
  :root { --tr: 0s; }
}