/*
 * ひとつまちWEB 2026 の変数。色・書体・間隔はここだけで決める。
 *
 * 配色は冊子『ひとつまち』2026 の誌面から取った（桜色の地・ローズの罫・黄のマーカー）。
 * 文字に使う色は地（--c-sakura）と白の両方で 4.5:1 以上になるものだけにしてある。
 *   --c-rose      … 罫線・大きな見出し・飾り（小さい文字には使わない。白地で 3.4:1）
 *   --c-rose-deep … 小さいローズの文字・塗りのボタン（白文字で 5.5:1）
 *
 * マップ（map.php）もここの変数を使う。マップにしか無いもの（--map-*）は css/map-legacy/tokens.css。
 */

:root {
  /* 地と面 */
  --c-sakura: #faeaef;
  --c-sakura-deep: #f3d9e0;
  --c-paper: #ffffff;

  /* ローズ（冊子の罫・タブ） */
  --c-rose: #b37d79;
  --c-rose-deep: #8e5c58;
  --c-rose-pale: #d3b4af;

  /* 文字 */
  --c-ink: #5a4645;
  --c-ink-soft: #7d6664;
  /* 入力欄の例の言葉（placeholder）。打った字（--c-ink）と見分けやすいよう ink-soft より薄く、白地で 4.56:1。
     桜色の地では 4.5:1 を切るので、白い入力欄の中だけで使う（2026-11-08） */
  --c-ink-placeholder: #86716f;

  /* 差し色（黄は「今日」の行とクーポンの帯。冊子では店名の下にも引いてあるが、WEB の店名には引かない） */
  --c-marker: #f1dfae;
  --c-ticket-yellow: #f0e699;
  --c-ticket-pink: #dd96ac;
  --c-ticket-pink-pale: #f2c6d4;   /* --c-ticket-pink を淡くしたもの。文字を載せても読める（クーポンの「何度でも」の半券・ダイアログの帯） */

  /* 大分類の色（マップのピンと、「マップで見る」の札の点）。白い絵柄が読める濃さで、地図の淡い地の上で互いに見分けやすい色相。医療は赤十字の赤 */
  --c-genre-food: #d9741f;
  --c-genre-shopping: #3a8d3a;
  --c-genre-medical: #d63a3a;
  --c-genre-life: #3458b0;
  --c-genre-education: #12899a;

  /* 地図の地の色（tools/draw_map.py の BG）。絵の外・絵が入るまでの地と、地図の上の文字の縁取り */
  --c-map-bg: #fcf6f5;

  /* 営業状態 */
  --c-open: #3f7d5a;
  --c-closed: #8c8487;
  --c-irregular: #9a7a46;

  --c-road: #b6b6bb;

  /* 書体。冊子の丸明朝に近い Kiwi Maru（Google Fonts）1 本で通す */
  --font-main: "Kiwi Maru", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;

  /* 文字の大きさ。読む人は歩きながらスマホで見る学生と、年配の方も多い地域の方。
     本文は 16px、読ませる文字は 14px より小さくしない（12px は札・日付だけ） */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.1875rem;
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(2.25rem, 1.5rem + 4vw, 3.75rem);

  /* 間隔 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;

  /* ホバー（PC）の決まり（2026-11-11 に作り直した。前は白い面に黄みのピンク #f6e6e4 を敷いていて、桜色の地とほぼ同じ明るさで色味だけ違い、濁って見えた）。
       1 枚の紙（店カード・写真タイル・クーポンの券）: 白いまま 3px 持ち上がり、縁の罫が濃く（カードとタイルは太く）、下の影が厚くなる。券は「使う」の札も反転
       地図の札: 白いまま縁の罫が濃く太く
       小さい面（ボタン・ピル・チップ・行・メニュー）: 地と同じ色味の --c-sakura-deep を敷く（白の上でも桜地の上でも同じ色）
       塗りのボタン: 反転（白地に --c-rose-deep の文字と縁）。黄の帯 → 一段濃い黄
       文字（小さいローズのリンク）: 色を一段濃く → --c-ink。下線のあるリンク（電話・WEB）は下線も濃く太く、地は敷かない。フッター（濃い地）のリンクだけは下線を出す（2026-11-08 に決めた。docs/design_requirements.md 10.-15）
     ほかでは下線やマーカーをホバーで新しく出さない（下線は休止時にあるものだけ）。持ち上げるのは上の 1 枚の紙だけ（ボタンやチップは動かさない）。
     どれも @media (hover: hover) and (pointer: fine) の中に書く（スマホでは押した要素に :hover が残る） */
  --rule: 1px solid var(--c-rose);
  --rule-dash: 1px dashed var(--c-rose-pale);
  --shadow-paper: 0 2px 0 rgb(142 92 88 / 0.12);   /* 台紙に置いた 1 枚の紙（商店カード） */

  --content-max: 72rem;
  --tabbar-h: 3.75rem;
}