/* =============================================================
   tokens.css — Mitz 金沢 デザイントークン（単一の正本）
   -------------------------------------------------------------
   サイト全体の色・影・質感の値をこの1ファイルに集約する。
   TOP（index.html）と下層ページ（assets/seo-pages.css）は
   ここで定義した変数だけを参照する。トンマナ変更＝この値の書き換え。

   ここで定義する値はライトテーマの正本。ダークテーマの上書きは
   index.html 内 [data-theme="dark"] が持つ（現状サイトはライト固定）。
   ============================================================= */

:root {
  /* ===== ブランドマーク（三角ロゴ / ワードマーク）===== */
  --brand-brown: #604020;         /* Mitz ワードマーク茶 */
  --brand-beige: #B8A898;         /* KANAZAWA ベージュ */
  --tri-green:  #90C850;          /* 遊・繋がり */
  --tri-orange: #E87030;          /* 食 */
  --tri-blue:   #30A0D8;          /* 旅 */

  /* ===== サーフェス（背景面）===== */
  --bg-base: #FAFAF7;             /* ページ地の色 */
  --bg-soft: #F2EDE2;             /* 一段沈めた面 */
  --bg-card: #FFFFFF;            /* カード面 */
  --bg-deep: #1A1D24;            /* フッター等の高コントラスト面 */

  /* ===== インク（文字色）===== */
  --ink: #2A1F18;                /* 本文（暖かい近黒）*/
  --ink-strong: #1F1812;         /* 見出し強調 */
  --ink-muted: #6B5C50;          /* 補足テキスト */
  --ink-faint: #A89B8E;          /* さらに薄い注記 */

  /* ===== 罫線 ===== */
  --line: rgba(96, 64, 32, 0.12);
  --line-strong: rgba(96, 64, 32, 0.22);

  /* ===== アクセント ===== */
  /* --accent      : ブランドアクセント（装飾・ラベル・多様な背景の上）*/
  /* --accent-ink  : ライト背景に置く「文字色」用アクセント。
                     地色#FAFAF7/白/ソフト面すべてで WCAG AA 4.5:1 を満たす*/
  --accent: #C07228;
  --accent-soft: #E08840;
  --accent-deep: #7A3810;
  --accent-ink: #9A5713;

  /* ===== 写真・ヒーロー演出 ===== */
  --hero-img-brightness: 0.86;
  --hero-img-saturate: 1.0;
  --hero-overlay: linear-gradient(90deg, rgba(8, 9, 12, 0.46) 0%, rgba(8, 9, 12, 0.20) 44%, rgba(8, 9, 12, 0.54) 100%), linear-gradient(180deg, rgba(8, 9, 12, 0.22) 0%, rgba(8, 9, 12, 0.04) 38%, rgba(8, 9, 12, 0.52) 78%, rgba(8, 9, 12, 0.80) 100%);
  --hero-radial: radial-gradient(ellipse at 50% 42%, rgba(232, 185, 106, 0.16) 0%, transparent 58%);
  --photo-fade: rgba(20, 16, 12, 0.78);
  --glass-bg: rgba(255, 252, 245, 0.7);
  --glass-bg-strong: rgba(255, 252, 245, 0.92);
  --grain-blend: multiply;
  --grain-opacity: 0.06;
  --nav-scrolled-bg: rgba(255, 252, 245, 0.9);

  /* ===== 影 ===== */
  --shadow-card: 0 4px 24px rgba(96, 64, 32, 0.08);
  --shadow-card-hover: 0 20px 48px rgba(96, 64, 32, 0.16);

  /* ===== 写真の上に載せる文字（常に明色）===== */
  --on-photo-ink: #FFFFFF;
  --on-photo-ink-soft: rgba(255, 255, 255, 0.85);
  --night: #1B2238;

  /* =============================================================
     後方互換エイリアス（下層 seo-pages.css の旧命名 → 正本へ）
     ※ 新規コードでは上の正本トークンを使うこと。
     ============================================================= */
  --bg: var(--bg-base);
  --panel: var(--bg-card);
  --panel-soft: var(--bg-soft);
  --muted: var(--ink-muted);
  --gold: var(--accent-ink);

  /* TOP（index.html）の旧命名 --lantern 系 → 正本 --accent へ */
  --lantern: var(--accent);
  --lantern-soft: var(--accent-soft);
  --lantern-deep: var(--accent-deep);
}