/* ============================================
   教育研究所ARCS デザイントークン
   トーン: 暮しの手帖（明朝・余白・生成り・手仕事の温かさ）
   このファイルの値以外を直書きしない
   ダークモード: html[data-theme="dark"] で全変数を上書き（ファイル末尾）
   ============================================ */

:root {
  /* --- 色 --- */
  --color-bg: #f7f4ec;          /* 生成り（ベース背景） */
  --color-bg-alt: #efe9db;      /* 少し濃い生成り（セクション区切り） */
  --color-paper: #fffdf7;       /* カード・記事面 */
  --color-ink: #33302a;         /* 本文（墨色。真っ黒は使わない） */
  --color-ink-light: #6f6a5e;   /* 補足・キャプション */
  --color-accent: #b5432e;      /* 赤（弁柄色）— 主見出し・強調。使いすぎない */
  --color-accent-soft: #c9705f; /* 赤の弱 — hover等 */
  --color-indigo: #3a4a6b;      /* 藍 — リンク・小説パートの差し色 */
  --color-line: #d9d2c0;        /* 罫線 */

  /* --- 書体 --- */
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
                "BIZ UDMincho", "Noto Serif JP", serif;
  --font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "BIZ UDGothic",
               "Noto Sans JP", sans-serif;   /* UI要素（ナビ・ボタン）のみ */

  /* --- 文字サイズ（clampでレスポンシブ） --- */
  --fs-hero: clamp(2rem, 5.5vw, 3.4rem);     /* 「新しい時代の学び」 */
  --fs-h2: clamp(1.4rem, 3vw, 1.9rem);
  --fs-h3: 1.2rem;
  --fs-body: 1.0625rem;                       /* 17px 基準 */
  --fs-small: 0.875rem;

  /* --- 行間・字間 --- */
  --lh-body: 1.95;               /* 読み物基準 */
  --lh-heading: 1.5;
  --ls-heading: 0.08em;          /* 見出しはゆったり字間 */
  --ls-body: 0.03em;

  /* --- 余白（暮しの手帖はとにかく余白） --- */
  --space-section: clamp(4rem, 10vw, 7rem);  /* セクション間 */
  --space-block: 2.5rem;
  --measure: 38em;               /* 本文の最大行長 */

  /* --- その他 --- */
  --radius: 6px;
  --shadow: 0 1px 3px rgba(51, 48, 42, 0.08);
  --content-width: 1080px;
}

/* ============================================
   ダークモード（夜の紙面 — 黒ではなく「灯りを落とした部屋」）
   ============================================ */
html[data-theme="dark"] {
  --color-bg: #23211c;
  --color-bg-alt: #2b2822;
  --color-paper: #2e2b25;
  --color-ink: #e9e3d3;
  --color-ink-light: #a89f8c;
  --color-accent: #d0604a;
  --color-accent-soft: #e0765f;
  --color-indigo: #93a5cf;
  --color-line: #403c33;
}