/* REKISHI QUEST デザイントークン。
   正本は Claude Design「Rekishi Quest デザイン検討」（cc8f8fd2-5fa1-4c95-b7d0-27b995f7bcc8）の
   tokens/{colors,typography,spacing,texture,base}.css。取り込み 2026-09-07。
   ここは写し。直すときは Claude Design 側を直してから、この写しを更新する（docs/DESIGN.md）。 */

/* ---- 色。紙の地図のように枯れた（低彩度・中明度）色だけを使う。純白・純黒・彩度の高い原色は置かない ---- */
:root {
  /* 紙（背景）— 暖色系オフホワイト。白 #fff は使わない */
  --paper-0: #f9f5ea;
  --paper-1: #f2ebd9;   /* 画面の地 */
  --paper-2: #e8dec6;   /* 沈んだ面・帯の下地 */
  --paper-3: #d8caa8;   /* 目盛り・強めの区切り */
  --card: #fdfaf2;      /* カードの紙。地より少し明るい */

  /* 墨（文字） */
  --ink-1: #2a2822;     /* 本文・見出し */
  --ink-2: #514b40;     /* 補足 */
  --ink-3: #7d7461;     /* 目盛り・キャプション（地に対して 4.6:1） */
  --ink-on-color: #fdfaf2;

  /* 線 */
  --line-1: #d9cdb2;    /* カード枠・区切り */
  --line-2: #bfae88;    /* 強調枠・入力枠 */
  --line-ink: #2a2822;  /* 手描き風の太線（2px） */

  /* アクセント — 地図の川の青と朱印の朱。2色まで */
  --river: #3f6d8c;
  --river-deep: #2d526b;
  --river-pale: #d6e2e9;
  --shu: #b9503b;
  --shu-deep: #933d2c;
  --shu-pale: #f0d9d0;
  /* 補助 — 語呂（黄土）と森（苔） */
  --ochre: #a67a22;
  --ochre-pale: #f2e5c4;
  --moss: #5f8a4a;
  --moss-pale: #dde8d1;

  /* 意味色（採点） */
  --ok: var(--moss);        --ok-pale: var(--moss-pale);
  --near: var(--ochre);     --near-pale: var(--ochre-pale);
  --ng: var(--shu);         --ng-pale: var(--shu-pale);

  /* レーン 3本（政治／外交・世界／文化・くらし） */
  --lane-politics: #5a5f94;
  --lane-diplomacy: #3f8580;
  --lane-culture: #a65a78;

  /* 時代帯 16（periods.json の順）。すべて彩度を落とした版 */
  --era-paleolithic: #9a948a;
  --era-jomon: #a49c8a;
  --era-yayoi: #b2aa93;
  --era-kofun: #877a6a;
  --era-asuka: #8f9f57;
  --era-nara: #6a9459;
  --era-heian: #856a9e;
  --era-kamakura: #5c6aa0;
  --era-muromachi: #5883a8;
  --era-azuchi: #c39a3a;
  --era-edo: #a0693b;
  --era-meiji: #b3523f;
  --era-taisho: #c9753f;
  --era-showa-senzen: #a85a3a;
  --era-showa-sengo: #c27a92;
  --era-heisei-reiwa: #d4a2b2;

  /* 意味エイリアス */
  --text-body: var(--ink-1);
  --text-muted: var(--ink-3);
  --text-link: var(--river-deep);
  --surface-page: var(--paper-1);
  --surface-card: var(--card);
  --surface-sunken: var(--paper-2);
  --border-default: var(--line-1);
  --border-strong: var(--line-2);
  --accent: var(--river);
  --accent-ink: var(--river-deep);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--river) 35%, transparent);

  /* 時代帯の塗りは「地に 22% 混ぜる」、時代名は「墨に 72% 混ぜる」で導出する */
  --era-fill-mix: 22%;
  --era-label-mix: 72%;
}

/* ---- 文字。角ゴシック太めの1ファミリー。小学生と保護者の両方が迷わない大きさ・太さ ---- */
:root {
  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-num: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;  /* 年号。tabular-nums で使う */

  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* 大きさ。UIの下限は 13px、本文は 15px 以上 */
  --fs-2xs: 11px;   /* 目盛り年・出典。読ませない情報のみ */
  --fs-xs: 13px;    /* タグ・チップ・キャプション */
  --fs-sm: 14px;
  --fs-md: 15px;    /* 本文 */
  --fs-lg: 17px;    /* 項目名・設問 */
  --fs-xl: 22px;    /* カード見出し */
  --fs-2xl: 28px;   /* 年号の主表示 */
  --fs-3xl: 40px;   /* 結果・時代名の大見出し */

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.75;

  --ls-wide: 0.06em;  /* 英字ワードマーク・縦書き時代名 */
  --ls-normal: 0.01em;
}

/* ---- 余白・角・影・動き ---- */
:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* 角。カードは大きめ、タグは小さめ。丸すぎる角は使わない（pill はチップ・ボタンのみ） */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* 影。紙が少し浮くだけの、茶を混ぜた薄い影。青み・黒みの影は使わない */
  --shadow-1: 0 1px 2px rgba(74, 58, 30, 0.10), 0 0 0 1px rgba(74, 58, 30, 0.04);
  --shadow-2: 0 3px 10px rgba(74, 58, 30, 0.14);
  --shadow-3: 0 8px 28px rgba(74, 58, 30, 0.18);
  --shadow-sheet: 0 -8px 30px rgba(74, 58, 30, 0.18);

  /* 線幅。手描き風の強調は 2px の墨線 */
  --bw-hair: 1px;
  --bw-bold: 2px;
  --bw-marker: 3px;

  /* タップ領域の下限 */
  --tap-min: 44px;

  /* 動き。地図を「寄る」動き＝ゆっくり減速。跳ねない */
  --ease-fly: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-fly: 620ms;

  /* イラスト枠のサイズ */
  --illo-sm: 56px;
  --illo-md: 96px;
  --illo-lg: 160px;
  --illo-xl: 240px;

  /* 年表の寸法 */
  --era-w: 84px;
  --mini-w: 16px;
}

/* ---- 紙の手触り。SVGノイズを地に重ねる（中くらいの強さ）。
   使い方: background: var(--paper-texture), var(--surface-page);  ※ texture は先に書く ---- */
:root {
  --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.30 0 0 0 0 0.18 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 地図の薄い方眼。年表の背景や資料の地に */
  --map-grid: repeating-linear-gradient(0deg, rgba(74,58,30,0.06) 0 1px, transparent 1px 24px),
              repeating-linear-gradient(90deg, rgba(74,58,30,0.06) 0 1px, transparent 1px 24px);
  /* 紙のふち（内側にわずかな焼け） */
  --paper-vignette: radial-gradient(ellipse at center, transparent 60%, rgba(120, 90, 40, 0.10) 100%);
}

/* ---- 最小限のリセット ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--paper-texture), var(--surface-page);
  font-feature-settings: "palt";
}
a { color: var(--text-link); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { color: var(--shu-deep); text-decoration-color: currentColor; }
button, input, select { font: inherit; color: inherit; }