/* ============================================================
   tokens.css — サイト全体の色と文字の設定
   decisions.md 第5節の値をここに集約している。
   色や文字サイズを変えたいときは、このファイルだけを直す。
   ============================================================ */

:root {
  /* --- 配色 --------------------------------------------- */
  --bg:    #23231F;  /* 背景（濃いグレー） */
  --ink:   #F0EEE8;  /* 文字 */
  --mute:  #C6C2B8;  /* 補助文字：ラベル、英文、副次情報。2026-08-15：#918C81 → #A6A195 →
                        白（--ink 同値、強弱が消えすぎた）→ #DEDAD0（少しグレーに戻す）→
                        もう少しだけ明度を下げる */
  --line:  #45443E;  /* 罫線 */
  --tint:  #1B1B18;  /* ギャラリーの地 */
  --stage: #000000;  /* 全画面画像の背後 */
  --bg-hover: #32322E;  /* サイトマークのホバー時。背景を少し明るくするだけ（反転はしない） */
  --ink-dim: rgba(240, 238, 232, 0.5);  /* 白50%。ナビ・並び替えバーの「非アクティブ」に使う
                                           （アクティブ／ホバーは --ink＝白100%。2026-08-15 追加、
                                           白70% → 白50%） */

  /* --- 書体 --------------------------------------------- */
  /* shigetayusuke.com（旧・現行サイト）を参照。Google Fonts で読み込む（base.njk） */
  /* 実用：ナビ・本文・ラベル */
  --font-body: "Roboto Condensed", "Noto Sans JP", -apple-system,
               "Hiragino Kaku Gothic ProN", sans-serif;
  /* 表示用：作品名・展示名。細字（weight は base.css 側で指定） */
  --font-display: "Roboto", "Noto Sans JP", -apple-system,
                  "Hiragino Kaku Gothic ProN", sans-serif;

  /* --- 文字サイズ --------------------------------------- */
  --size-body:  12px;  /* 本文 */
  --size-label: 10px;  /* ラベル */
  --size-nav:   13px;  /* 2026-08-14: 11px → 13px（メニューが小さすぎる、との指摘で拡大） */
  --size-md:    19px;  /* 作品名（詳細ページ・和題） */

  --leading-body: 1.7;
  --leading-disp: 1.35;

  --track-label: 0.09em;  /* ラベルの字間 */
  --track-nav:   0.05em;

  /* --- サイトマーク ---------------------------------------- */
  --mark-size: 100px;  /* 左上の正方形。下部は画像に重ねて表示する。2026-08-14: 80px→100px */
  --mark-icon-size: 64px;  /* 中の鳥アイコンの表示サイズ。2026-08-14: 48px→64px */

  /* --- 余白 --------------------------------------------- */
  --pad-cell:  9px 12px;   /* 格子1マスの内側 */
  --pad-nav:   12px 20px;  /* メニューの左右の余白。上下は --nav-height で決まる */
  --pad-gal:   20px 16px;  /* ギャラリーの1枠 */
  --nav-height: 50px;      /* メニューの縦幅。2026-08-14 追加 */
  --nav-cell-w: 115px;     /* メニュー5項目の統一幅。いちばん長い EXHIBITIONS
                              （13pxで文字74.9px）＋左右20px。文字サイズや
                              項目名を変えたら実測し直すこと。2026-09-08 追加 */

  /* --- 動き --------------------------------------------- */
  /* トップの横スライド1周。JS 無効時や読み込み直後だけ使う仮の値で、
     hero.js が「実測幅 ÷ 30px/秒」で毎回計算し直す（decisions.md 第5節） */
  --pan-duration:  300s;

  --veil-duration: 0.25s;  /* 作品グリッドの黒が外れる速さ */
  --veil-opacity:  0.55;   /* かぶせる黒の濃さ */

  /* ナビが実際に占める高さ（1段ぶん＋下罫線1px）。コンタクトページが
     「画面のちょうど半分」を出すのに使う。2026-09-08 追加 */
  --nav-total-h: calc(var(--nav-height) + 1px);
}

/* スマホではナビが2段になる（grid.css の 700px のルール）。段の間の
   1pxの罫線と下罫線を足した実高さに置き換える。 */
@media (max-width: 700px) {
  :root {
    --nav-total-h: calc(var(--nav-height) * 2 + 2px);
  }
}