/* =============================================================
   typography.css — PRONIアイミツ タイポグラフィ・ユーティリティ
   -------------------------------------------------------------
   IM_スタイルガイドのタイポスケールをクラス化したもの。
   tokens.css のサイズ変数を消費し、768px以下で自動的にSP値へ切り替わる。

   使い方（HTML側）:
     <h1 class="lp-h1">見出し</h1>
     <p class="lp-body-l">本文テキスト</p>
     <span class="lp-foreign-l">2,000社</span>   ← 数字・欧文を強調したい時

   読み込み順（必須）: fonts → tokens.css → typography.css → style.css
   ★ このファイルは編集しない（共通基盤）。
   ============================================================= */

/* ---- Display（大見出し・ヒーロー / PCのみ）---- */
.lp-display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display); font-weight: var(--fw-bold); }
.lp-display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display); font-weight: var(--fw-bold); }
.lp-display-3 { font-size: var(--fs-display-3); line-height: var(--lh-display); font-weight: var(--fw-bold); }

/* ---- Headings ---- */
.lp-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
.lp-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
.lp-h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
.lp-h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: var(--fw-bold); }

/* ---- Title（小見出し）---- */
.lp-title-1 { font-size: var(--fs-title-1); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
.lp-title-2 { font-size: var(--fs-title-2); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
.lp-title-3 { font-size: var(--fs-title-3); line-height: var(--lh-heading); font-weight: var(--fw-bold); }

/* ---- Body（本文 / 行間160%）---- */
.lp-body-xxl { font-size: var(--fs-body-xxl); line-height: var(--lh-body); }
.lp-body-xl  { font-size: var(--fs-body-xl);  line-height: var(--lh-body); }
.lp-body-l   { font-size: var(--fs-body-l);   line-height: var(--lh-body); }
.lp-body-m   { font-size: var(--fs-body-m);   line-height: var(--lh-body); }
.lp-body-s   { font-size: var(--fs-body-s);   line-height: var(--lh-body); }
.lp-body-xs  { font-size: var(--fs-body-xs);  line-height: var(--lh-body); }

/* ---- Article（記事本文 / 行間200%・長文向け）---- */
.lp-article-xl { font-size: var(--fs-article-xl); line-height: var(--lh-article); }
.lp-article-l  { font-size: var(--fs-article-l);  line-height: var(--lh-article); }
.lp-article-m  { font-size: var(--fs-article-m);  line-height: var(--lh-article); }
.lp-article-s  { font-size: var(--fs-article-s);  line-height: var(--lh-article); }

/* ---- Button（ボタンラベル / 行間130%）---- */
.lp-btn-xl { font-size: var(--fs-btn-xl); line-height: var(--lh-button); font-weight: var(--fw-bold); }
.lp-btn-l  { font-size: var(--fs-btn-l);  line-height: var(--lh-button); font-weight: var(--fw-bold); }
.lp-btn-m  { font-size: var(--fs-btn-m);  line-height: var(--lh-button); font-weight: var(--fw-bold); }
.lp-btn-s  { font-size: var(--fs-btn-s);  line-height: var(--lh-button); font-weight: var(--fw-bold); }

/* ---- Foreign（欧文・数字の強調 / Schibsted・行間120%）---- */
.lp-foreign-xl { font-size: var(--fs-display-3); line-height: var(--lh-foreign); }
.lp-foreign-l  { font-size: var(--fs-h4);        line-height: var(--lh-foreign); }
.lp-foreign-m  { font-size: var(--fs-body-l);    line-height: var(--lh-foreign); }
.lp-foreign-s  { font-size: var(--fs-body-s);    line-height: var(--lh-foreign); }

/* ---- weight ヘルパー ---- */
.lp-bold    { font-weight: var(--fw-bold); }
.lp-regular { font-weight: var(--fw-regular); }

/* =============================================================
   SP（〜768px）: スケール変数を上書き → 全クラスが自動で縮小
   styleguide の SP 値に準拠（Display系はSPでは使用しない想定）
   ============================================================= */
@media screen and (max-width: 767px) {
  :root {
    --fs-h1: 30px; --fs-h2: 26px; --fs-h3: 20px; --fs-h4: 18px;
    --fs-title-1: 16px; --fs-title-2: 14px; --fs-title-3: 12px;
    --fs-body-xxl: 18px; --fs-body-xl: 18px; --fs-body-l: 16px;
    --fs-body-m: 14px; --fs-body-s: 12px; --fs-body-xs: 10px;
    --fs-article-xl: 16px; --fs-article-l: 16px; --fs-article-m: 14px; --fs-article-s: 12px;
    --fs-btn-xl: 18px; --fs-btn-l: 16px; --fs-btn-m: 14px; --fs-btn-s: 12px;
  }
}