/* ============================================================
   fonts.css — フォント定義とユーティリティクラス
   ============================================================
   フォントを変更する方法:
   1. サイト全体のフォントを変える → :root の変数を1行変更
      例) --font-display: 'Playfair Display', serif;
   2. 特定要素だけ変える → HTMLのクラス名を変更
      例) class="font-bogart" → class="font-arimo"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&family=Arimo:wght@400;700&family=Prompt:wght@400;600&family=Noto+Serif+JP:wght@400;700&display=swap');

/* ============================================================
   CSS カスタムプロパティ（フォントファミリー定義）
   ここを変更するとサイト全体のフォントが切り替わります
   ============================================================ */
:root {
  --font-display:  'Cormorant Garamond', Georgia, serif;   /* 大見出し（Bogartの代替） */
  --font-body:     'DM Sans', system-ui, sans-serif;       /* 本文・UI（Codec Proの代替） */
  --font-arimo:    'Arimo', Arial, sans-serif;             /* 補足テキスト */
  --font-prompt:   'Prompt', sans-serif;                   /* アクセント・装飾 */
  --font-jp-serif: 'Noto Serif JP', 'Yu Mincho', 'ヒラギノ明朝 Pro', serif; /* 日本語明朝体 */
}

/* ============================================================
   フォントユーティリティクラス
   HTMLの class属性にこれらのクラスを追加することで
   要素単位でフォントを切り替えられます
   ============================================================ */

/* 表示用（Bogart相当） — 大見出し・ブランド名に使用 */
.font-bogart {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
}

/* イタリック装飾（Della Respira相当） — サブタイトル・キャッチコピーに使用 */
.font-della {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
}

/* 本文（Codec Pro相当） — 説明文・本文に使用 */
.font-codec {
  font-family: var(--font-body);
  font-weight: 400;
}

/* 本文 太字（Codec Pro Bold相当） — 商品名・ラベルに使用 */
.font-codec-bold {
  font-family: var(--font-body);
  font-weight: 700;
}

/* 補足テキスト（Arimo） — セクションラベル・注釈に使用 */
.font-arimo {
  font-family: var(--font-arimo);
  font-weight: 400;
}

/* アクセント・装飾（Prompt） — ✻ マークなどの装飾に使用 */
.font-prompt {
  font-family: var(--font-prompt);
  font-weight: 400;
}

/* 日本語明朝体 標準（IPAex明朝相当） — 日本語本文に使用 */
.font-jp-serif {
  font-family: var(--font-jp-serif);
  font-weight: 400;
}

/* 日本語明朝体 太字（Source Han Serif JP Bold相当） — 日本語見出しに使用 */
.font-jp-bold {
  font-family: var(--font-jp-serif);
  font-weight: 700;
}