/* ブドウ品種図鑑 デザイン変数（色・書体・角丸・影・タップ寸法）
   目的：採用モック 3 本（案A 旬の棚 v2・系譜 血統表 v7・品種グラフ v13）の :root 変数を、CMO 決定（2026-09-30）どおり 1 本にまとめる
   作成 2026-09-30 CTO（T1）。改名 2026-09-30：tokens.css → design-vars.css（Git の全域規則 *token* ＝秘密情報を外す規則に当たるため。規則は変えない）
   検査：python3 tools/mock_vars.py（CMO 決定との差分 0 件）・tests/test_mock_vars.py・tests/e2e/test_smoke.py
   約束（docs/2026-09-30_CSS変数の食い違い一覧_CMO確認.md 末尾「CMO 決定（2026-09-30）」）：
   - 3 画面で同じ役割は同じ値。画面ごとの上書き（[data-screen="…"]{--…}）は置かない
   - 紫の名前：--plum＝深紫 #500046／--plum-bright＝明るい紫 #920783／--plum-ink＝#320028／--plum-soft＝淡い地 #F3ECF2
   - v13 だけの名前のうち廃止したもの（graph.css は T8 で下の名前へ置き換える）：
       --bg→--paper  --bg-2→--surface  --line→--rule  --line-2→--rule-2  --line-3→--rule-3
       --plum-deep→--plum  --plum-tint→--plum-soft  --own-ring→--own  --sel-ink→--sel  v13 の --plum（明るい紫）→--plum-bright
   - 別名として残すもの：--lk-on＝var(--sel)・--halo＝var(--plum-bright)・--node-edge＝var(--paper)
   変数の外の決定（部品の CSS で守る。T4〜T8）：
   - 本文の行送り 1.7・h1〜h4・b・strong は 400（500 はモックが明示している強調だけ）
   - 字詰め palt は使わない（品種グラフの SVG ラベルの中だけ可＝graph.css に閉じる）
   - .btn は案A（塗り・48px・16px・主ボタン＝--plum、hover＝--plum-ink）。v13 の図の上のボタンは graph.css の別部品
   - v13 .link の下線 rgba(80,0,70,.3)（＝--plum の 30%）・v13 .search の地＝--surface・hover の地＝--surface */

:root{
  /* ---- 面と文字（白基調。面と余白と文字の大小で見せる） ---- */
  --page:#EEEDF1; --paper:#FFFFFF; --surface:#F4F3F7;
  --surface-2:#F7F2F6;   /* 2 段目の面：シートのタグ地・hover の地に限る（検索欄の地は --surface） */
  --ink:#1C1720; --ink-2:#655C6B; --ink-3:#756A73;
  --rule:#E8E5EC; --rule-2:#CFC9D6; --rule-3:#A08F9C;   /* ヘアラインは全画面でこの 3 種 */

  /* ---- ブランドの紫（アクセントに限る。明るい紫は大きな面に使わない） ---- */
  --plum:#500046; --plum-ink:#320028; --plum-bright:#920783; --plum-soft:#F3ECF2;

  /* ---- タグの三系統：果実＝紫／時期＝藍／強さ＝琥珀。帯：種子親＝紫／花粉親＝琥珀 ---- */
  --fruit:#500046; --fruit-bg:#F3ECF2; --fruit-ink:#3D0A36;
  --time:#3E5B7E; --time-bg:#E7EDF5; --time-ink:#223A57;
  --str:#A8843F; --str-bg:#F7EEDA; --str-ink:#6B4E12;
  /* 第4系統＝注意：くすんだ赤茶。塗らずに細い枠で、3系統と形でも分ける */
  --warn-ink:#8E4630; --warn-line:#E3C4B8; --warn-bg:#FBF3EF;
  --seed-bg:#F7F2F6; --pollen-bg:#F9F4EA;   /* --seed-bg は --surface-2 と同値だが役割が違うので別名のまま */

  /* ---- 果皮色（3 画面共通）。自園＝金の輪。選択＝深紫（輪・線・名前とも --sel 1 つ） ---- */
  --skin-b:#3A1F3A; --skin-r:#B0475F; --skin-g:#9DB244;
  --skin-x:#F1EEF2; --skin-x-line:#8E8794;
  --own:#A8843F; --sel:#500046;

  /* ---- 操作・形 ---- */
  --focus-ring:var(--plum-bright);   /* 焦点の輪は紫 1 本（オーナー 2026-10-31「黄色い枠はダサい」・作業提案アプリ §20 と同じ。白地 7.5:1）。旧 --focus（黄）は廃止 */
  --tap:44px; --r-card:14px; --r-ctl:12px; --r-pill:999px;
  --shadow:0 1px 2px rgba(28,23,32,.05),0 6px 20px rgba(28,23,32,.06);
  --dur:.34s; --ease:cubic-bezier(.22,.8,.3,1);

  /* ---- 書体（Google Fonts ＋ システム書体のフォールバック。数字は全画面 Inter） ---- */
  --sans:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  --num:"Inter","Noto Sans JP",system-ui,sans-serif;

  /* ---- 品種グラフの図（v13 由来。名前の衝突なし） ---- */
  --edge:#E3D6E0; --edge-strong:#9A8597;
  --own-w:1.6; --own-dash:none; --own-style:solid; --own-lg-w:1.5px;
  --lk-on:var(--sel);
  --halo:var(--plum-bright); --halo-op:.07; --sel-w:1.1;
  --node-edge:var(--paper); --node-edge-w:1; --glow:rgba(146,7,131,.03);

  /* ★ モモ：外観の色（果皮の見た目）。粒・帯・血統表のしるし・系統図の丸・凡例・チップ（CMO 決定 2026-10-31 §B）
     白は輪郭で白地に立たせる。不明はブドウと同じ --skin-x。2026-10-28 の果肉色の変数（--flesh-*）は廃止 */
  --peel-w:#FAF3EA; --peel-w-line:rgba(0,0,0,.30);
  --peel-p:#F0A3B4;
  --peel-y:#F0B445;
  --crop-grape:#920783; --crop-peach:#C43A6B;   /* 作物の印（切り替えの ●▲）にだけ使う */
  /* 別名（CTO）：系統図・血統表は var(--skin-<種別>) で塗るので、モモの種別 kw／kp／ky を外観の色に向ける */
  --skin-kw:var(--peel-w); --skin-kp:var(--peel-p); --skin-ky:var(--peel-y);
}