/* ==========================================================================
   JIBUNMUKI デザイントークン（実装の正本）
   2026-09-15 Phase 1A で作成。数値の正本は .claude/skills/monetization-lab-design/SKILL.md §3。

   ⚠️ ここに書くのは :root の --jm-* だけ。セレクタやルールを書かない。
   ⚠️ 値を変える・足すときは、先に SKILL.md §3 を直す（OWNER判断）。ここだけ直さない。
   ⚠️ verify:design はこのファイルだけを検査対象から外している（値を書く場所だから）。

   読み込み（2026-09-15 時点）
     design="report"（report 66ページ＋watch 10ページ）だけ。SEOHead.astro が report.css の前に読む。
     トップ（style.css）と /reading/（reading/style.css）はまだ読まない → Phase 1D / 1E で接続する。
   ========================================================================== */

:root {
  /* --- 色 --- */
  --jm-bg:             #F5F9F7;
  --jm-surface:        #FFFFFF;
  --jm-surface-sunk:   #EAF2EE;
  --jm-text:           #0F241B;
  --jm-text-2:         #4C675B;
  --jm-text-3:         #556B60;   /* 12px以上でだけ使う */
  --jm-line:           rgba(15, 36, 27, 0.13);
  --jm-line-soft:      rgba(15, 36, 27, 0.06);
  --jm-green:          #0F9D6B;   /* 面・アイコン・太線。文字に使わない */
  --jm-green-ink:      #0A7550;   /* リンク・強調文字・主CTAの背景 */
  --jm-green-deep:     #075F43;   /* 主CTAのhover */
  --jm-green-veil:     rgba(15, 157, 107, 0.10);
  --jm-deep:           #092219;   /* 深緑の強調帯（1ページ1か所まで） */
  --jm-mint:           #69E4AE;   /* 深緑の上の文字・CTA */
  --jm-amber-surface:  #FFF6E4;
  --jm-amber-ink:      #7A5A0F;

  /* --- 文字 --- */
  --jm-font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  --jm-font-mono: ui-monospace, "SF Mono", Consolas, monospace;
  --jm-fs-h1:         clamp(2.125rem, 4.2vw, 3.25rem);   /* SP 34 / PC 52 */
  --jm-fs-h1-article: clamp(1.75rem, 3.2vw, 2.5rem);     /* SP 28 / PC 40 */
  --jm-fs-h2:         clamp(1.625rem, 2.9vw, 2.25rem);   /* SP 26 / PC 36 */
  --jm-fs-h2-article: clamp(1.625rem, 2.3vw, 1.75rem);   /* SP 26 / PC 28 */
  --jm-fs-h3:         clamp(1.125rem, 1.7vw, 1.25rem);   /* SP 18 / PC 20 */
  --jm-fs-body:       1rem;                              /* 16 */
  --jm-fs-note:       0.8125rem;                         /* 13 */
  --jm-fs-label:      0.75rem;                           /* 12 */
  --jm-lh-h1:         1.3;
  --jm-lh-h1-article: 1.35;
  --jm-lh-h2:         1.35;
  --jm-lh-h3:         1.5;
  --jm-lh-body:       1.9;
  --jm-lh-note:       1.7;

  /* --- レイアウト・形 --- */
  --jm-shell:          min(1160px, 100% - 40px);
  --jm-measure:        640px;
  --jm-wide:           960px;
  --jm-space-section:  clamp(4rem, 9vw, 7rem);
  --jm-space-head:     clamp(1.5rem, 3vw, 2.5rem);
  --jm-gap:            12px;
  --jm-pad-card:       clamp(1rem, 2.5vw, 1.25rem);
  --jm-radius-card:    16px;
  --jm-radius-section: 24px;
  --jm-radius-pill:    999px;
  --jm-radius-input:   12px;
  --jm-shadow:         0 12px 28px rgba(15, 36, 27, 0.08);
  --jm-shadow-hover:   0 18px 40px rgba(15, 36, 27, 0.12);
  --jm-cta-h:          56px;
  --jm-tap:            44px;
  --jm-header-h:       72px;
  --jm-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --jm-duration:       200ms;
}

@media (max-width: 780px) {
  :root { --jm-header-h: 56px; }
}