/* デザイントークン。色・文字・余白はここだけで定義し、他のファイルは var() で参照する。 */
:root {
  /* ロゴから採った色 */
  --brand: #c23a27;          /* logo.png の朱赤 */
  --brand-dark: #9a2c1c;
  --brand-soft: #fbe3dc;
  --accent: #d56536;         /* logo-script.png / BASE テーマ色 */
  --cream: #fef3df;          /* logo.png の市松 */

  --bg: #fffaf0;
  --surface: #ffffff;
  --text: #2a1d18;
  --muted: #74645c;
  --line: #ecdcc8;
  --line-strong: #2a1d18;

  /* 状態の色。朱赤と区別するため、エラーは色だけでなく文言とアイコンでも伝える */
  --ok: #187d4a;
  --ok-soft: #e1f3e8;
  --warn: #9a5b00;
  --warn-soft: #fdf0d5;
  --danger: #b42318;
  --danger-soft: #fde8e6;
  --info: #2d5b8a;
  --info-soft: #e4eef8;

  --font-display: "Montserrat", "M PLUS 1", sans-serif;
  --font-heading: "M PLUS 1", "Hiragino Sans", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  --radius: 3px;
  --border: 2px solid var(--line-strong);
  /* 大きい段（5〜8）は 2026-10-27 に広げた（全体にゆとりを持たせるため。24/32/48/72 → 28/40/64/96） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 28px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;

  --content-width: 1120px;
  --text-width: 680px;

  /* 文字の大きさの段（2026-10-27 決定。経緯: design-proposals/type-size.html）。
     本文・UI は 16px 以上、補足だけ 14px。14px より小さい文字は使わない（デジタル庁デザインシステムの基準に合わせた）。
     rem にしているのは、ブラウザの文字の大きさの設定に合わせて大きくなるようにするため */
  --fs-note: .875rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: clamp(1.125rem, 1rem + .5vw, 1.25rem);
  --fs-h2: clamp(1.25rem, 1rem + 1.2vw, 1.5rem);
  --fs-h1: clamp(1.625rem, 1.2rem + 2vw, 2rem);
  --checker-size: 14px;
}