/* ==========================================================================
   osaka-phn デザイントークン（v4.3：若葉の緑・青空・アイボリーの3色に整理）
   「青空 × 緑 × 人 × 家族 × 地域 × 研究」
   柔らかな親しみやすさと、大学研究室としての知性・信頼感を両立させる。
   コントラスト比はアイボリー #FAF9F2 に対する実測値（WCAG AA 4.5:1 以上）。
   ========================================================================== */

:root {
  /* --- 面（背景）。全体の 65〜70% を占めるベース ------------------------- */
  --phn-ivory:       #FAF8F1; /* ページ全体のベース */
  --phn-white:       #FCFBF6; /* 少し明るい面。カードの白 */
  --phn-surface:     #FFFFFF;

  /* --- 青空の青（10%）。面と装飾に使い、文字には --phn-sky-ink を使う --- */
  --phn-sky:         #9AD6F7; /* 青空。点や番号など小さな装飾 */
  --phn-sky-soft:    #BFE7FF; /* 明るい空色。マーカー・矢印の丸 */
  --phn-sky-pale:    #EAF6FF; /* 大きな背景色の面 */
  --phn-sky-ink:     #1E6FA8; /* 文字 5.1:1／白抜き 5.4:1 */

  /* --- 自然の緑（15%）。見出し・ボタン・強調 ------------------------------ */
  --phn-green:       #6CC24A; /* 若葉・芝生の緑（Primary）。装飾・点・アイコン。文字には使わない */
  --phn-green-soft:  #8ED973; /* Secondary Green。淡い装飾 */
  --phn-green-pale:  #EEF7E8; /* 大きな背景色の面 */
  --phn-green-ink:   #2F7F27; /* 文字・ボタン 4.7:1／白抜き 5.0:1 */
  --phn-deep:        #2F4F3E; /* 締め色＝文字色と同じ緑がかった墨。見出し・フッター地（白抜き 9.1:1） */

  /* --- 黄（0〜5%）。ヒーローの小さな太陽など、ごく少量のアクセントだけ ----- */
  --phn-yellow:      #F4D96B;
  --phn-yellow-pale: #FBF3D2;
  --phn-yellow-ink:  #7A5A10; /* 文字 6.0:1 */

  /* --- 文字 ------------------------------------------------------------- */
  --phn-ink:         #2F4F3E; /* 本文 8.6:1 */
  --phn-ink-muted:   #5A6F61; /* 補助文 5.0:1 */
  --phn-line:        #E2E6DF; /* 罫線（原則使わない） */

  /* --- 互換用（旧テンプレートの参照を壊さないための別名）------------------ */
  --phn-beige:       var(--phn-ivory);
  --phn-yellow-soft: #F8E9A6;
  --phn-terra:       var(--phn-green-soft);
  --phn-terra-ink:   var(--phn-green-ink);
  --phn-pink-pale:   var(--phn-sky-pale);
  --phn-slate:       var(--phn-ink-muted);
  --phn-slate-soft:  #BCC8BF;
  --phn-border:      var(--phn-line);
  --phn-border-soft: #EDEFE9;

  /* --- タイポグラフィ ----------------------------------------------------- */
  --phn-font-sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans",
                   "Yu Gothic Medium", YuGothic, Meiryo, system-ui, -apple-system, sans-serif;
  --phn-font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  --phn-font-en:   "Nunito", "Zen Maru Gothic", "Helvetica Neue", Arial, sans-serif;

  /* 見出し（PC）：H1 42〜68px / H2 32〜48px / H3 24〜30px */
  /* ページタイトル（H1）だけを別格にし、セクション見出し（H2）は一段弱くする */
  --phn-h1: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem);
  /* 下層ページのタイトル：40〜56px。トップの H1 よりは一段小さくし、
     ファーストビューに次の内容まで入るようにする */
  --phn-h1-page: clamp(1.9375rem, 1.1rem + 2.5vw, 2.5rem); /* SP 31px / タブレット 37px / PC 40px */
  --phn-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --phn-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --phn-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);

  /* 本文：PC 17px / SP 16px。行間 2.0、字間 0.05em */
  --phn-text-xs:   0.8125rem; /* 13px */
  --phn-text-sm:   0.9375rem; /* 15px */
  --phn-text-base: 1.0625rem; /* 17px */
  --phn-text-md:   1.125rem;  /* 18px */
  --phn-text-lg:   1.25rem;   /* 20px */
  --phn-text-xl:   1.5rem;

  --phn-leading-body: 2;
  --phn-leading-head: 1.4;
  --phn-tracking-body: 0.05em;
  --phn-tracking-head: 0.05em;

  /* --- 余白 --------------------------------------------------------------- */
  --phn-space-1: 0.25rem;
  --phn-space-2: 0.5rem;
  --phn-space-3: 0.75rem;
  --phn-space-4: 1rem;
  --phn-space-5: 1.5rem;
  --phn-space-6: 2rem;
  --phn-space-7: 2.5rem;
  --phn-space-8: 3rem;
  --phn-space-9: 4rem;
  --phn-space-10: 5.5rem;
  --phn-space-11: 7rem;

  /* セクション上下：PC 64〜80px / SP 40〜48px（見出しの前は広め、あとは狭め） */
  --phn-section: clamp(2.5rem, 1.5rem + 2.8vw, 5rem);
  --phn-section-end: calc(var(--phn-section) * 0.85);
  --phn-section-sm: clamp(2rem, 1.25rem + 2vw, 3.5rem);
  /* 見出し→本文、本文→コンテンツ */
  --phn-head-gap: clamp(1.25rem, 1rem + 0.7vw, 2rem);

  /* --- 角丸：カードは 32〜56px ---------------------------------------------- */
  --phn-radius-sm: 14px;
  --phn-radius-md: 22px;
  --phn-radius-lg: 36px;
  --phn-radius-xl: 48px;
  --phn-radius-pill: 999px;
  --phn-radius-band: clamp(40px, 8vw, 120px); /* 大きな色面の角 */

  /* お知らせ一覧とページ送りで共有する読みやすい幅 */
  --phn-news-width: 900px;

  /* カード共通ルール（研究室の特徴・研究テーマ・ステップ・入口で共有） */
  --phn-card-pad: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  --phn-card-gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  --phn-card-title: clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem);
  --phn-card-body: 0.9375rem;

  --phn-shadow-soft: 0 18px 50px rgba(47, 79, 62, 0.08);

  /* --- レイアウト ---------------------------------------------------------- */
  --phn-container: 1280px;
  --phn-measure: 40em;   /* 本文の最大幅（17px × 40 = 680px） */
  --phn-gutter: clamp(1.25rem, 4vw, 3rem);
  --phn-header-h: 76px;

  /* --- モーション ---------------------------------------------------------- */
  --phn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --phn-duration: 320ms;
  --phn-reveal-duration: 900ms;
}

@media (max-width: 767px) {
  :root {
    --phn-text-base: 1rem;      /* 16px */
    --phn-leading-body: 1.8;    /* 行間は 1.7〜1.9 に収める（PC の 2.0 は狭い画面では間延びする） */
    --phn-header-h: 64px;

    /* スマートフォンの見出し（2026-09-26）
       ページタイトル 30px / セクション見出し 24px / カードの見出し 17〜18px。
       PC の clamp() は最小値でも H2 28px・H3 20px あり、375px では 2 行に折れて
       不自然な位置で改行されるため、ここで固定値に置き換える。 */
    --phn-h1: 1.875rem;         /* 30px：トップのメッセージ */
    --phn-h1-page: 1.875rem;    /* 30px：下層ページのタイトル */
    --phn-h2: 1.5rem;           /* 24px */
    --phn-h3: 1.125rem;         /* 18px */
    --phn-h4: 1.0625rem;        /* 17px */
    --phn-card-title: 1.0625rem;/* 17px */

    /* 本文まわり：大きめの本文（18px / 20px）も 16〜17px に寄せる */
    --phn-text-md: 1rem;        /* 16px */
    --phn-text-lg: 1.0625rem;   /* 17px */

    /* カードの内側余白：PC の 28〜40px は、画面幅 375px では本文が 279px まで狭まるため 24px にする */
    --phn-card-pad: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --phn-duration: 1ms; --phn-reveal-duration: 1ms; }
}