/* =========================================================================
   米沢みさわ小学校｜とここと  デザイントークン
   ★ このファイルは misawa-observation/public/assets/css/tokens.css の写し。
     値を勝手に変えないこと。デザインを変えるときは observation 側を正本として直し、
     こちらへコピーし直す（＝2ページの世界観がズレないようにするため）。
     唯一の相違点は @font-face の src パス（このリポジトリの配置に合わせている）。
   ========================================================================= */

/* ---- 手書き風ディスプレイフォント（自ホスト）-----------------------------
   フルセット(1.5MB)は重いので、このリポジトリでは hub.html に出てくる文字だけの
   サブセットを置いている。カードを追加して文字が増えたら、必ず作り直すこと:
     python3 tools/subset-rii.py
   （作り直しを忘れると、未収録の字だけ Zen Maru Gothic にフォールバックして
     見出しの字面がバラバラになる） */
@font-face {
  font-family: "Rii Cookie";
  /* ?v= は必ず上げること。ファイル名が固定なので、上げないと _headers の max-age=3600 の間
     古いサブセット（新しい字が入っていないもの）が使われ続ける。 */
  src: url("./fonts/riicookie-hub.woff2?v=20260817b") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== カラー（基幹・公式 :root 実値）===== */
  --color-ink:        #333333;   /* 本文・枠線・ボタン塗り・フッター背景 */
  --color-bg:         #eeeeee;   /* ページ背景（薄いウォームグレー） */
  --color-white:      #ffffff;   /* カード・パネル背景 */
  --color-hover:      #7a7a7a;   /* ナビ/リンク hover のグレー */
  --color-link:       #007cff;   /* インラインリンク（下線付き） */
  --color-sub:        #4b4b4b;   /* 注記テキスト */

  /* ===== アクセント（イチョウ / ginkgo）＆補助 ===== */
  --color-accent:     #c79a3b;   /* イチョウの黄金色。差し色・強調・選択状態・価格ハイライト */
  --color-accent-soft:#e7d9b0;   /* アクセントの淡色（背景塗り・選択行のうっすら強調）派生 */
  --color-accent-deep:#8a6d2f;   /* アクセントの濃色（小さい文字を読ませるとき） */
  --color-rule:       #cfcfcf;   /* 点線罫線（淡）2px dotted */
  --color-footer-text:#e6e6e6;   /* フッター内の薄い文字 */

  /* ===== タイポグラフィ：フォントファミリー ===== */
  --font-display: "Rii Cookie", "Zen Maru Gothic", sans-serif;             /* 大見出し・ラベル・番号・＼／ */
  --font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; /* 本文・ナビ・詳細 */
  --font-button:  "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;       /* 大型ボタン文字 */

  --body-weight:  500;
  --fw-bold:      700;

  /* ===== レイアウト：幅・余白 =====
     観察: 公式HPの本文コンテナは1280px、視察プランナーは1080px。
     この親ページは1カラムの一覧なので、読みやすい 1080px に揃える
     （ヘッダー・フッターの内側も同じ幅にして、縦のラインを通す）。 */
  --content-max:  1080px;
  --pad-x:        clamp(20px, 5vw, 70px);

  /* ===== 角丸（公式は角ばり基調）===== */
  --radius-card:   0;     /* カードは角丸なし＝2px枠で表現 */
  --radius-button: 2px;   /* ボタン */

  /* ===== ボーダー ===== */
  --border-card:   2px solid var(--color-ink);
  --rule-dotted:   2px dotted var(--color-rule);

  /* ===== トランジション ===== */
  --t-fast: .25s;
  --t-mid:  .5s ease;
  --t-slow: .7s ease-out;   /* スクロールリビール */
}