/* ================================================================
   HUG Foundation — Typography System
   
   【設計思想】
   - すべてのテキストはこの変数から参照する
   - clamp() で viewport に追従、min/max を明示
   - 役割ベースで命名（サイズの数字ではなく用途で名前をつける）
   ================================================================ */

:root {

  /* ----------------------------------------------------------------
     SCALE：7段階のフォントサイズ
     T = Text、D = Display
     ---------------------------------------------------------------- */

  /* --- Micro: ラベル・バッジ・メタ情報 --- */
  --fs-micro   : clamp(11px,  0.75vw, 14px);   /* section-label, eyebrow */

  /* --- XS: 注記・コピーライト・日付 --- */
  --fs-xs      : clamp(12px, 0.85vw, 15px);   /* footer-copy, news-date */

  /* --- SM: キャプション・タグ・ナビ --- */
  --fs-sm      : clamp(13px, 0.95vw, 16px);   /* nav-links, tags, text-link */

  /* --- Base: 本文・説明文 --- */
  --fs-base    : clamp(14px, 1.1vw,  18px);   /* body text, descriptions */

  /* --- MD: サブ見出し・引用・カード本文 --- */
  --fs-md      : clamp(16px, 1.3vw,  20px);   /* sub-headings, quotes */

  /* --- LG: セクション見出し（日本語） --- */
  --fs-lg      : clamp(32px, 3.8vw,  56px);   /* section-heading */

  /* --- XL: ヒーロータイトル --- */
  --fs-xl      : clamp(40px, 5.6vw,  85px);   /* hero-title */

  /* ----------------------------------------------------------------
     DISPLAY：装飾・数字専用
     ---------------------------------------------------------------- */

  /* --- D-SM: 統計ラベル数字・aside テキスト --- */
  --fs-d-sm    : clamp(18px, 2.2vw,  32px);   /* hero-aside, footer-logo */
	
  /* --- D-XS: 統計数字（最小）/ 強調見出し英語 --- */
  --fs-d-xs    : clamp(32px, 4.5vw, 64px);    /* ★追加：カード内の数字や小さな統計用 */

  /* --- D-MD: 統計数字（小）--- */
  --fs-d-md    : clamp(52px, 7vw,   100px);   /* impact-sub-count */

  /* --- D-LG: 統計数字（大）--- */
  --fs-d-lg    : clamp(56px, 9vw,   120px);   /* impact-big-count */

  /* --- D-XL: 背景装飾テキスト --- */
  --fs-d-xl    : clamp(120px, 18vw, 280px);   /* .impact-bg-word, .message-bg-text */

  /* ----------------------------------------------------------------
     LINE-HEIGHT プリセット
     ---------------------------------------------------------------- */
  --lh-tight   : 1.25;   /* 見出し */
  --lh-heading : 1.4;    /* 日本語見出し */
  --lh-body    : 2.2;    /* 本文 */
  --lh-loose   : 2.8;    /* メッセージ・詩的テキスト */

  /* ----------------------------------------------------------------
     LETTER-SPACING プリセット
     ---------------------------------------------------------------- */
  --ls-tight   : -0.02em;  /* 大きい数字 */
  --ls-normal  :  0.02em;  /* 日本語本文 */
  --ls-wide    :  0.1em;   /* 日本語サブテキスト */
  --ls-label   :  0.35em;  /* section-label */
  --ls-eyebrow :  0.45em;  /* eyebrow / nav */
  --ls-caps    :  0.5em;   /* ALL CAPS 英語ラベル */

}


/* ================================================================
   UTILITY CLASSES
   よく使う組み合わせはクラスで提供
   ================================================================ */

/* Section Label（"About HUG" 等の小キャップラベル） */
.type-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 400;
  line-height: var(--lh-tight);
}

/* Body Text */
.type-body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 300;
  letter-spacing: var(--ls-normal);
}

/* Sub-description（カード内説明文等） */
.type-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  font-weight: 300;
  letter-spacing: var(--ls-normal);
}

/* Caption（日付・注記） */
.type-caption {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  font-weight: 300;
}


/* ================================================================
   OVERRIDES：既存クラスのfont-sizeを変数に差し替え
   top.css / impact-section.css の個別指定を上書き
   ================================================================ */

/* --- Section Label --- */
.section-label          { font-size: var(--fs-micro); }
.impact-hero-label,
.impact-sub-en,
.impact-usage-label     { font-size: var(--fs-micro); }

/* --- Nav / UI --- */
.nav-links a,
.nav-cta                { font-size: var(--fs-sm); }
.text-link              { font-size: var(--fs-sm); }
.btn-primary,
.btn-secondary          { font-size: var(--fs-sm); }
.btn-message            { font-size: var(--fs-sm); }

/* --- Body Text --- */
.about-body,
.philosophy-body,
.message-jp,
.donation-text          { font-size: var(--fs-base); }
.impact-hero-note,
.impact-sub-desc,
.impact-usage-note      { font-size: var(--fs-sm); }

/* --- Sub headings / Quotes --- */
.about-quote            { font-size: var(--fs-md); }
.philosophy-title       { font-size: var(--fs-md); }
.hero-sub               { font-size: var(--fs-md); }
.impact-hero-sub        { font-size: var(--fs-sm); }

/* --- Tags / Meta --- */
.project-tag,
.story-tag              { font-size: var(--fs-micro); }
.project-arrow,
.story-arrow            { font-size: var(--fs-sm); }
.news-date              { font-size: var(--fs-xs); }
.news-title             { font-size: var(--fs-base); }
.stat-label             { font-size: var(--fs-sm); }
.impact-sub-label       { font-size: var(--fs-sm); }

/* --- Cards --- */
.project-title          { font-size: var(--fs-md); }
.story-name             { font-size: var(--fs-base); }

/* --- Section Headings --- */
.section-heading        { font-size: var(--fs-lg); }
.impact-title           { font-size: var(--fs-lg); }
.message-heading        { font-size: var(--fs-lg); }
.philosophy-heading     { font-size: var(--fs-lg); }
/* Donation CTAのheadingは少し大きくしたいが、変数の範囲内で */
.donation-inner .section-heading { font-size: var(--fs-lg); }

/* --- Hero Title --- */
.hero-title             { font-size: var(--fs-xl); }

/* --- Hero Aside（英語詩的テキスト）--- */
.hero-aside-text        { font-size: var(--fs-d-sm); }

/* --- Display Numbers --- */
.stat-number            { font-size: var(--fs-d-md); }
.impact-sub-count       { font-size: var(--fs-d-md); }
.impact-sub-unit        { font-size: var(--fs-d-sm); }
.impact-big-count       { font-size: var(--fs-d-lg); letter-spacing: var(--ls-tight); }
.impact-yen             { font-size: var(--fs-d-sm); }
.impact-over            { font-size: var(--fs-d-sm); }
.impact-usage-pct       { font-size: var(--fs-md); }
.about-visual-label     { font-size: 60px; } /* 固定：ロゴ的な役割 */
.loader-logo            { font-size: 80px; } /* 固定：ローダーロゴ */
.footer-brand .logo-text { font-size: var(--fs-d-sm); }

/* --- Background Decorative Text --- */
.message-bg-text        { font-size: var(--fs-d-xl); }
.impact-bg-word         { font-size: var(--fs-d-xl); }

/* --- Footer --- */
.footer-col-title       { font-size: var(--fs-micro); }
.footer-links a         { font-size: var(--fs-sm); }
.footer-address         { font-size: var(--fs-sm); }
.footer-copy,
.footer-legal a         { font-size: var(--fs-xs); }


/* ================================================================
   RESPONSIVE OVERRIDES
   モバイルでは変数を調整（clampが対応するが、一部調整）
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --fs-d-xl: clamp(80px, 22vw, 150px);  /* 背景テキストを縮小 */
  }
  .about-visual-label { font-size: 40px; }
  .loader-logo { font-size: 60px; } 
}