/* =========================================================================
   配色テーマ（クライアントごとに、このファイルだけ差し替える）
   -------------------------------------------------------------------------
   使い方：
   1) 下の :root { } の色・フォント・ボタンの丸みを書き換えるだけで
      全ページ（index / menu / access / staff / news / contact）の
      見た目が一括で変わります。style.css には触りません。
   2) クライアントが増えたら、このファイルを複製して
      theme-〇〇.css として管理し、各HTMLの <link> を差し替えると楽です。
   3) このファイル末尾に「テーマ集」（そのまま貼り替えできる配色）を
      コメントで用意しています。
   ========================================================================= */

:root {

  /* =======================================================================
     現在のテーマ：炭火と黒地（炭火焼肉「火群」向け・賑わい型のダークテーマ）
     ベースは墨黒。肉の赤と炎のオレンジで力強く。他ジャンル（割烹＝墨、
     ビストロ＝ミルクティー）と違い、この配色は「セクション背景そのものが
     黒地」になる点が最大の違い（section--white / --alt も暗色で運用）。
     ======================================================================= */

  /* ---- 背景・面（すべて暗色。黒地が基本） -------------------------------- */
  --color-canvas:        #17130f; /* ページ全体の背景（墨black） */
  --color-canvas-alt:    #1d1712; /* セクションの区切り用の暗色（わずかに赤み） */
  --color-surface:       #241d17; /* カード・ヘッダーの面（黒地の中の一段明るい面） */
  --color-surface-cool:  #1a1512; /* 地図枠・画像フォールバック等の控えめな面 */

  /* ---- ブランドカラー（濃い→淡いの4段階） ------------------------------ */
  --color-brand:         #c23c2c; /* 見出しの色＝肉の赤（黒地でも読めるよう明度を上げた赤） */
  --color-brand-accent:  #d9772e; /* ボタン・CTA・価格＝炎のオレンジ（一番目立つ色） */
  --color-brand-deep:    #0f0c0a; /* フッター・濃い帯の背景（ほぼ漆黒） */
  --color-brand-uplift:  #4a2f22; /* 画像が無いときの下地＝おき火の焦げ茶 */
  --color-brand-tint:    #2e1c14; /* ボタンhoverの下地＝暗いおき火色 */

  /* ---- アクセント（差し色。金は使いどころを絞る） ---------------------- */
  --color-gold:          #b58a3c; /* 金（差し色。星マーク・特別感のみ） */
  --color-gold-light:    #d9bd86;
  --color-gold-lightest: #241a10; /* 「まちとのつながり」等の特集帯も黒地のまま運用 */

  /* ---- 文字色（黒地が基本なので、本文・補足とも明るい色にする） --------- */
  --color-text:              #ece6db; /* 本文・見出し＝生成り白 */
  --color-text-soft:         #b6a99a; /* 補足・メタ情報（くすんだ生成り） */
  --color-text-on-dark:      #f4efe6; /* 濃い帯の上の文字 */
  --color-text-on-dark-soft: rgba(244, 239, 230, 0.74);

  /* ---- 状態色（エラー・警告） ---------------------------------------- */
  --color-error:   #e0483a;
  --color-warning: #d99a2b;

  /* ---- 罫線（黒地の上に見えるよう、白寄りの半透明にする） --------------- */
  --color-line:      rgba(255, 255, 255, 0.16);
  --color-line-dark: rgba(255, 255, 255, 0.16);

  /* ---- フォント（極太ゴシック＋見出し英字は凝縮フォントで力強く） ------- */
  --font-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;   /* 本文 */
  --font-serif: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;   /* 見出し（極太ウェイトで使用） */

  /* ---- 角丸（0 で四角、大きいほど丸い） --------------------------------- */
  --radius-pill: 6px;  /* ボタン。丸ピルにせず、鉄板・焼き網を思わせる角の立った形に */
  --radius-card: 4px;  /* カード・画像枠。角丸を極力落として力強く */

  /* ---- トップの背景写真の上に敷く「座布団」（文字を読みやすくする半透明の膜） --- */
  --hero-scrim-color: 10, 7, 5;     /* 膜の色（R, G, B）＝ほぼ黒 */
  --hero-scrim-strength: 0.68;      /* 濃さ 0（膜なし）〜 1（真っ黒）。写真が明るいほど上げる */
  --hero-text: #ffffff;             /* 見出しの文字色 */
  --hero-text-soft: rgba(255, 255, 255, 0.88); /* 説明文の文字色 */
}


/* =========================================================================
   テーマ集：まるごとコピーして上の :root { } の中身と入れ替えて使う
   -------------------------------------------------------------------------

   ▼ 落ち着いたグレージュ（ベージュ×グレー強め・アクセントも控えめ）
   --color-canvas:        #f1eee8;
   --color-canvas-alt:    #e6e1d8;
   --color-surface:       #fffefb;
   --color-surface-cool:  #f3f0ea;
   --color-brand:         #423d38;
   --color-brand-accent:  #8a7355;   (くすんだ枯茶。CTAを強めたいなら #9c6b3f)
   --color-brand-deep:    #2a2622;
   --color-brand-uplift:  #6b6157;
   --color-brand-tint:    #e5ded2;
   --color-gold:          #9c8560;
   --color-gold-light:    #c3b393;
   --color-gold-lightest: #f2ede2;
   --color-text:          #34302c;
   --color-text-soft:     #6e665d;
   --color-text-on-dark:      #f7f3ec;
   --color-text-on-dark-soft: rgba(247, 243, 236, 0.72);
   --color-line:          #d8d0c2;

   ▼ 炭火と赤提灯（濃い茶＋深い朱。にぎやかな大衆居酒屋向け）
   --color-canvas:        #f4ece0;
   --color-canvas-alt:    #e9ddc9;
   --color-surface:       #fffdf7;
   --color-surface-cool:  #f6efe2;
   --color-brand:         #3f2b22;
   --color-brand-accent:  #a83828;   (朱赤)
   --color-brand-deep:    #241813;
   --color-brand-uplift:  #6d4a38;
   --color-brand-tint:    #efdcc6;
   --color-gold:          #b98a3f;
   --color-gold-light:    #d8bd8a;
   --color-gold-lightest: #f6ecd9;
   --color-text:          #31261f;
   --color-text-soft:     #6b5b4e;
   --color-text-on-dark:      #f8efe2;
   --color-text-on-dark-soft: rgba(248, 239, 226, 0.72);
   --color-line:          #ddccb4;

   ▼ 和モダン墨（グレージュ＋墨色。割烹・和食寄りの上品路線）
   --color-canvas:        #efece6;
   --color-canvas-alt:    #e2ded5;
   --color-surface:       #fdfcf9;
   --color-surface-cool:  #f1efe9;
   --color-brand:         #2f2d2a;
   --color-brand-accent:  #7a6a58;   (焦げ茶グレー)
   --color-brand-deep:    #23211e;
   --color-brand-uplift:  #5f5850;
   --color-brand-tint:    #e0d9cc;
   --color-gold:          #96814f;
   --color-gold-light:    #c0ad86;
   --color-gold-lightest: #efeae0;
   --color-text:          #2c2a27;
   --color-text-soft:     #66605a;
   --color-text-on-dark:      #f4f1ea;
   --color-text-on-dark-soft: rgba(244, 241, 234, 0.70);
   --color-line:          #d5cfc2;

   ▼ ミルクティー（カフェ・ビストロ・洋食寄り）
   --color-canvas:        #f5efe6;
   --color-canvas-alt:    #ece0d0;
   --color-surface:       #fffdf9;
   --color-surface-cool:  #f7f1e8;
   --color-brand:         #5b4636;
   --color-brand-accent:  #c07a45;   (キャラメル)
   --color-brand-deep:    #3a2b20;
   --color-brand-uplift:  #856245;
   --color-brand-tint:    #f0e0cd;
   --color-gold:          #b58a55;
   --color-gold-light:    #d6ba8f;
   --color-gold-lightest: #f7efe1;
   --color-text:          #3b2f26;
   --color-text-soft:     #766659;
   --color-text-on-dark:      #f8f1e8;
   --color-text-on-dark-soft: rgba(248, 241, 232, 0.72);
   --color-line:          #e0d1bc;

   ▼ 炭火と黒地（炭火焼肉・賑わい型。この site-yakiniku の初期値）
   --color-canvas:        #17130f;
   --color-canvas-alt:    #1d1712;
   --color-surface:       #241d17;
   --color-surface-cool:  #1a1512;
   --color-brand:         #c23c2c;
   --color-brand-accent:  #d9772e;   (炎のオレンジ)
   --color-brand-deep:    #0f0c0a;
   --color-brand-uplift:  #4a2f22;
   --color-brand-tint:    #2e1c14;
   --color-gold:          #b58a3c;
   --color-gold-light:    #d9bd86;
   --color-gold-lightest: #241a10;
   --color-text:          #ece6db;
   --color-text-soft:     #b6a99a;
   --color-text-on-dark:      #f4efe6;
   --color-text-on-dark-soft: rgba(244, 239, 230, 0.74);
   --color-line:          rgba(255, 255, 255, 0.16);

   ▼ 白木と藍（割烹・鮨向け。寒色を一色差して他ジャンルと差別化。site-kappoの現在値・2026-09-15）
   --color-canvas:        #f8f4ea;
   --color-canvas-alt:    #f0ead9;
   --color-surface:       #ffffff;
   --color-surface-cool:  #f3efe4;
   --color-brand:         #24384a;
   --color-brand-accent:  #2f4c63;   (藍)
   --color-brand-deep:    #16232e;
   --color-brand-uplift:  #4c6478;
   --color-brand-tint:    #dde3e6;
   --color-gold:          #9c7f4c;
   --color-gold-light:    #c4ac7e;
   --color-gold-lightest: #f2ead9;
   --color-text:          #262524;
   --color-text-soft:     #6b655d;
   --color-text-on-dark:      #f4f1ea;
   --color-text-on-dark-soft: rgba(244, 241, 234, 0.70);
   --color-line:          #ddd9cb;

   ▼ オリーブと辛子色（ビストロ・イタリアン向け。季節野菜の緑×マスタード。site-bistroの現在値・2026-09-15）
   --color-canvas:        #fbf3e3;
   --color-canvas-alt:    #f1e4c8;
   --color-surface:       #fffef9;
   --color-surface-cool:  #f7f0df;
   --color-brand:         #4b5e3a;
   --color-brand-accent:  #c98a2e;   (辛子色)
   --color-brand-deep:    #2e3b22;
   --color-brand-uplift:  #6f7e54;
   --color-brand-tint:    #e4e8d3;
   --color-gold:          #c98a2e;
   --color-gold-light:    #e0b368;
   --color-gold-lightest: #fbefd9;
   --color-text:          #3a3226;
   --color-text-soft:     #7c7259;
   --color-text-on-dark:      #f8f1e8;
   --color-text-on-dark-soft: rgba(248, 241, 232, 0.72);
   --color-line:          #e7d9b0;

   ========================================================================= */