/* ログアウト導線(ゲスト向け)ページのタイポグラフィ
 *
 * 値そのものは htdocs/lite/css/common/tokens.css (プリミティブ / Figmaから自動生成)が持つ。
 * このファイルは以下の2つを担う。**common/tokens.css を先に読み込むこと。**
 *
 *   1. Figmaのtext style(fontFamily/Size/Weight/lineHeight の組み合わせ)を .guest-text-* クラスとして定義
 *      → text styleは変数ではなくスタイルなのでトークンJSONに含まれず、ここで手当てする
 *   2. コンポーネントCSSが参照している --guest-font-* を tokens.css のプリミティブへの別名として定義
 *
 * 使い方:
 *   1. Figmaのtext styleと1対1で対応する場合は .guest-text-* クラスをそのまま当てる
 *   2. 既存クラスに合成する場合は var(--guest-font-size-*) 等の変数を参照する
 *   個々のコンポーネントCSSに px を直書きしないこと。
 *
 * 注意: "Zen Kaku Gothic New" のWebフォント読み込みは view/lite/includes/guest/fonts.inc が担う。
 *       このCSSを読むページでは fonts.inc も併せてINCLUDEすること
 *       (ゲスト導線は header_guest.inc 経由で読み込み済み)。
 */

:root {
  /* fontFamily
   * Webフォントの読み込みに失敗した場合のフォールバックとして、
   * ゲスト導線で既に読み込んでいる Noto Sans JP を挟むため、tokensの値をそのまま使わず再定義している。 */
  --guest-font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

  /* fontSize / fontWeight … tokens.css のプリミティブへの別名 */
  --guest-font-size-2xs: var(--font-size-2xs);
  --guest-font-size-xs: var(--font-size-xs);
  --guest-font-size-sm: var(--font-size-sm);
  --guest-font-size-base: var(--font-size-base);
  --guest-font-size-lg: var(--font-size-lg);
  --guest-font-size-xl: var(--font-size-xl);
  --guest-font-size-2xl: var(--font-size-2xl);
  --guest-font-size-3xl: var(--font-size-3xl);
  --guest-font-size-4xl: var(--font-size-4xl);
  --guest-font-size-5xl: var(--font-size-5xl);
  --guest-font-weight-regular: var(--font-weight-regular);
  --guest-font-weight-bold: var(--font-weight-bold);

  /* lineHeight
   * none(1) と body(1.6) は tokens の 100% / 160% に対応する。
   * heading(1.4) に対応するトークンは無い(Figmaのコレクションには 100% / 120% / 160% しか無い)が、
   * text style 側は 1.4 を使っているため、ここでは実値で持つ。デザイナー確認待ち。 */
  --guest-line-height-none: var(--line-height-100);
  --guest-line-height-heading: 1.4;
  --guest-line-height-body: var(--line-height-160);

  /* letter-spacing
   * Figmaの letterSpacing: 3 は px ではなく % 指定。
   * 実測(title/sp 20px → 0.6px / title/pc 30px → 0.9px)がいずれも 3% なので em で持つ。 */
  --guest-letter-spacing-title: 0.03em;
}

/* --- Figma text styles --- */

/* guest/title/sp */
.guest-text-title {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-xl);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  letter-spacing: var(--guest-letter-spacing-title);
}

/* guest/title/pc */
.guest-text-title-pc {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-3xl);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  letter-spacing: var(--guest-letter-spacing-title);
}

/* guest/section-title/sp */
.guest-text-section-title {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-lg);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  letter-spacing: 0;
}

/* guest/card-title/sp */
.guest-text-card-title {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  letter-spacing: 0;
}

/* guest/text/sp */
.guest-text-text {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  letter-spacing: 0;
}

/* guest/text/pc */
.guest-text-text-pc {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-base);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  letter-spacing: 0;
}

/* guest/menu/default */
.guest-text-menu {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-base);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-heading);
  letter-spacing: 0;
}

/* guest/menu/small */
.guest-text-menu-small {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-heading);
  letter-spacing: 0;
}

/* guest/desc/sp */
.guest-text-desc {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-xs);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  letter-spacing: 0;
}

/* guest/note/sp */
.guest-text-note {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-2xs);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  letter-spacing: 0;
}

/* guest/note/pc
 * note のみFigmaにpc版のtext styleが存在する(sp:10px / pc:12px)。
 * ただしどの要素で切り替わるかはノード単位で確認が必要なため、
 * メディアクエリで自動切替はせず別クラスとして定義している。 */
.guest-text-note-pc {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-xs);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  letter-spacing: 0;
}

/* guest/button/sp (guest/primary_button, guest/secondary_button で使用) */
.guest-text-button {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-base);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-none);
  letter-spacing: 0;
}

/* guest/text-button/sp */
.guest-text-text-button {
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-xs);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-body);
  letter-spacing: 0;
}