/*
 * デザイントークン（サイト全体で使う値の一覧）
 * 色・文字・余白はここで定義した変数だけを使います。各ページに値を直接書かないこと。
 * 意味と使い分けは DESIGN.md を参照してください。
 */
:root {
  /* 色：麻の実（殻・中身・オイル）と麻の葉から取った色 */
  --color-paper: #f7f8f3; /*        背景 */
  --color-paper-2: #edefe6; /*      区切りの背景（お知らせ帯・フッター） */
  --color-ink: #23271d; /*          本文 */
  --color-shell: #666352; /*        補足の文字・日付（麻の実の殻の色） */
  --color-accent: #4d6121; /*       リンク・ボタン */
  --color-accent-strong: #3c4c19; /* ホバー時 */
  --color-oil: #34401f; /*          トップの帯（ヘンプシードオイルの色） */
  --color-heart: #e3e6cf; /*        濃い背景の上の文字（麻の実の中身の色） */
  --color-rule: #d3d7c6; /*         罫線 */
  --color-banner: #4a4738; /*       テスト環境の表示 */
  --color-white: #fff;

  /* 書体：Webフォントは使わず、端末に入っている書体を使う（速さと安全のため） */
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP",
    "BIZ UDPGothic", Meiryo, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", "BIZ UDPMincho",
    "Yu Mincho", YuMincho, serif;

  /* 文字の大きさ（14 / 16 / 18 / 21 / 24 / 36 / 60px を基準にした段階） */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lead: 1.125rem;
  --text-h3: 1.3125rem;
  --text-h2: 1.5rem;
  --text-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);
  --text-hero: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);

  --leading-body: 1.9;
  --leading-heading: 1.5;
  --tracking-body: 0.04em;
  --tracking-heading: 0.08em;
  --tracking-serif: 0.12em;

  /* 余白 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-space: clamp(3rem, 2rem + 4vw, 6rem);

  /* 幅 */
  --width-page: 72rem; /*  ページの最大幅（1152px） */
  --width-prose: 38em; /*  本文の最大幅（全角40字弱） */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); /* 画面の左右の余白 */

  /* 形 */
  --radius-button: 4px;
  --rule: 1px solid var(--color-rule);
}