/* デザイントークン v2 — 色・余白・文字・枠・モーションはここで一元管理する。
   ブランド基調は3色: 温かいアイボリー / 焙煎ブラウン / 深い緑（仕様v2 4.1）。
   白黒・可読性のための濃淡・機能色（注意・確認前）は役割トークンとして別枠。
   本文系のコントラスト比は背景に対して4.5:1以上を確認済み。 */
:root {
  /* ブランド基調 */
  --color-bg: #FBF8F2;            /* 温かいアイボリー（地） */
  --color-band: #F3EDE2;          /* アイボリーの濃淡（セクションの面切替用） */
  --color-surface: #FFFFFF;       /* カード・表の面 */
  --color-roast: #2B2118;         /* 焙煎ブラウン（最深。ヒーロー面・本文インク兼用） */
  --color-roast-2: #40301F;       /* 焙煎ブラウン（見出し） */
  --color-accent: #2E5F41;        /* 深い緑（対 bg 6.6:1） */
  --color-accent-dark: #1F4630;

  /* 可読性の濃淡（役割トークン） */
  --color-ink: #2B2118;           /* 本文（対 bg 12.9:1） */
  --color-ink-soft: #5B4A3A;      /* 補助文（対 bg 7.9:1） */
  --color-meta: #6A594A;          /* 日付等（対 bg 6.3:1） */
  --color-on-dark: #FBF8F2;       /* 焙煎ブラウン面の上の文字（12.9:1） */
  --color-on-dark-soft: #D9CDBF;  /* 同・補助文（8.6:1） */
  --color-line: #E2D9CC;          /* 罫線 */
  --color-line-dark: #4E3E2C;     /* 濃面上の罫線 */

  /* 機能色（装飾に使わない） */
  --color-note-bg: #FDF3E3;       /* 注意枠の面 */
  --color-note-border: #C9A227;
  --color-hold-bg: #F4EFEA;       /* 確認できていない点 */
  --color-hold-border: #8A7A68;
  --color-point-bg: #EFF4EF;      /* 要点 */
  --color-point-border: #2E5F41;
  --color-focus: #1F4630;

  /* 文字 */
  --font-body: "Meiryo UI", Meiryo, sans-serif;
  --fs-body: 1rem;                /* 16px以上 */
  --fs-small: 0.875rem;           /* 注記・メタのみ */
  --fs-h1: 1.75rem;
  --fs-hero: 2.125rem;
  --fs-h2: 1.375rem;
  --fs-h3: 1.125rem;
  --lh-body: 1.75;
  --lh-heading: 1.4;

  /* 余白・寸法 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --measure: 40em;                /* 本文1行 35〜45字相当 */
  --radius: 4px;                  /* 角丸は1種類のみ */
  --tap-min: 44px;
  --btn-h: 48px;

  /* モーション（150〜220msの範囲のみ。仕様v2 4.3） */
  --dur: 180ms;
  --ease: ease-out;
}