/* ==========================================================================
   theme.css — デザイン層（テーマ・トークン集約）／読み込み順の最後に置く
   --------------------------------------------------------------------------
   このファイルが「サイトの見た目」を決める唯一の場所。
   reset/site/top/page/home の各CSSは“構造（レイアウト・余白・骨組み）”だけを持ち、
   色・フォント・角丸・影・装飾は すべて下の変数（トークン）から受け取る。

   ■ 雰囲気を変えるとき
     原則 この1枚（:root の値）を書き換えるだけでサイト全体の雰囲気が変わる。
     ページHTML・他CSSは触らない。下部に「プリセット例（ポップ/レトロ/スタイリッシュ）」を
     コメントで同梱。使うときは :root の該当値を差し替える（or プリセットの中身を貼り替える）。

   ■ 既定値 = 中立クリーン（まっさら）
     現行テーマ = 寿限無 JUGEM（和紙色・墨・金茶／明朝主体）。
     MVP `_mvp/top-jugem.html` の世界観を全ページへ展開したもの。
   ========================================================================== */

/* フォント: 明朝（見出し=Shippori Mincho B1／本文=Zen Old Mincho）＋欧文=Cormorant Garamond。
   theme.css は最後に読み込まれるため、ここで @import すれば全ページに書体が行き渡る（HTMLは触らない）。 */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;600;700;800&family=Zen+Old+Mincho:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&display=swap');

:root{

  /* ---- 基本パレット（寿限無 JUGEM：和紙色・墨・金茶） --------------------- */
  --paper:#f4efe3;     /* 背景（地）＝和紙色 */
  --paper-2:#efe7d6;   /* 薄い面・セクション交互背景・カード地 */
  --sumi:#2b2a26;      /* 見出しの濃色＝墨 */
  --ink:#3a382f;       /* 本文 */
  --mut:#6d6a5e;       /* 補足・キャプション */
  --line:#d9cdb0;      /* 罫線（細） */
  --line-d:#c4ad84;    /* 罫線（濃） */

  /* ---- アクセント（金茶＝ブランド色） ------------------------------------ */
  /* サイトのブランド色は、原則ここ（--accent / --accent-d / --gold）だけ変える。 */
  --gold-l:#c9a85c;    /* 明るい金（暗色面のアクセント文字・グラデ上側） */
  --gold-d:#9a7a30;    /* 濃い金（主役色） */
  --accent:#9a7a30;    /* ボタン・印章・強調・ホバー下線・リンク等の主役色＝金茶 */
  --accent-d:#7d6225;  /* アクセントの濃い側（hover） */
  --on-accent:#ffffff; /* アクセント面の上に乗る文字色 */
  --gold:#b08d3e;      /* 副アクセント（.ey の線・装飾） */

  /* 旧トークン名の別名（HTML内 inline の var(--shu) 等を生かすため。値はアクセントに同期） */
  --shu:var(--accent);
  --shu-d:var(--accent-d);
  --moss:var(--accent);   /* フォーカスリング色（reset.css が参照） */

  /* ---- フォント（明朝主体・欧文はガラモン） ------------------------------ */
  --fb:"Zen Old Mincho",serif;        /* 本文 */
  --fh:"Shippori Mincho B1",serif;    /* 見出し */
  --fl:"Cormorant Garamond",serif;    /* 欧文アクセント（.ey 等） */
  --fz:"Zen Old Mincho",serif;        /* 透かし・装飾用 */
  --fw-body:400;   /* 本文ウェイト */
  --fw-head:600;   /* 見出しウェイト */
  --fw-bold:700;   /* 強調ウェイト */

  /* ---- 字間・行間（雰囲気の調整代） -------------------------------------- */
  --ls-head:.06em; /* 見出しの字間（明朝で広めに） */
  --ls-ey:.26em;   /* 英字ラベル(.ey)の字間 */
  --ls-body:.01em; /* 本文の字間 */
  --lh-body:1.9;   /* 本文の行間 */

  /* ---- かたち・質感（角丸・影・動き） ------------------------------------ */
  --radius:12px;      /* 共通の角丸（ボタン/カード/入力） */
  --radius-sm:6px;    /* 小要素の角丸 */
  --shadow:0 4px 12px rgba(120,95,40,.18);   /* 通常の影（金茶の柔らかい落ち） */
  --shadow-card:0 3px 18px rgba(120,95,40,.08); /* カードの影 */
  --ease:cubic-bezier(.2,.7,.2,1); /* トランジションのイージング */

  /* ---- ヘッダー -------------------------------------------------------- */
  --hd-bg:transparent;                  /* 通常時のヘッダー背景 */
  --hd-bg-on:rgba(244,239,227,.92);     /* スクロール後のヘッダー背景＝和紙色 */
  --hd-ink:var(--ink);                  /* ヘッダー文字 */

  /* ---- フッター（暗色：墨） -------------------------------------------- */
  --ft-bg:#22211d;
  --ft-ink:rgba(244,239,227,.72);
  --ft-head:var(--gold-l);
  --ft-mut:rgba(244,239,227,.6);
  --ft-line:rgba(244,239,227,.14);
  --ft-link-hover:#ffffff;

  /* ---- CTA帯（暗色：墨＋金） ------------------------------------------- */
  --cta-bg:var(--sumi);
  --cta-ink:#f4efe3;
  --cta-mut:rgba(244,239,227,.75);
  --cta-line:rgba(197,168,128,.4);
  --cta-accent:var(--gold-l);
}

/* ==========================================================================
   雰囲気プリセット例（コピーして :root の値を差し替えて使う）
   ※ いずれも「色・フォント・角丸・影」を変えるだけ。HTML/他CSSは触らない。
   下のブロックの中身を上の :root にマージするか、該当変数だけ上書きする。
   ========================================================================== */

/* ---- 中立クリーン（旧既定：無彩色・サンセリフ・角丸ゼロ。別サイト複製時の素に戻す用） ----
:root{
  --paper:#ffffff; --paper-2:#f6f6f7; --sumi:#16161a; --ink:#26262b; --mut:#71717a;
  --line:#e6e6e9; --line-d:#d6d6db;
  --accent:#1b1b1f; --accent-d:#000000; --on-accent:#ffffff; --gold:#71717a;
  --fb:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --fh:var(--fb); --fl:var(--fb); --fz:var(--fb); --fw-head:600;
  --ls-head:.01em; --ls-ey:.12em; --ls-body:0;
  --radius:0px; --radius-sm:0px; --shadow:none; --shadow-card:none;
  --hd-bg-on:rgba(255,255,255,.92);
  --ft-bg:var(--paper-2); --ft-ink:var(--ink); --ft-head:var(--sumi); --ft-link-hover:var(--accent);
  --cta-bg:var(--paper-2); --cta-ink:var(--sumi); --cta-mut:var(--mut); --cta-line:var(--line-d); --cta-accent:var(--accent);
}
（書体を素に戻すときは <head> の @import を外し、上の --f* を有効化する）
*/

/* ---- POP（ポップ：明るい原色・丸み・軽い影・親しみ） ----------------------
:root{
  --paper:#fffdf7; --paper-2:#fff4e0; --sumi:#1f2937; --ink:#33373f; --mut:#7b8294;
  --line:#ffe2b8; --line-d:#ffcf8a;
  --accent:#ff5a5f; --accent-d:#e23d52; --on-accent:#ffffff; --gold:#ffb400;
  --fh:var(--fb); --fw-head:800; --fw-bold:800;
  --radius:16px; --radius-sm:10px;
  --shadow:0 6px 0 rgba(31,41,55,.12); --shadow-card:0 10px 24px rgba(255,90,95,.18);
}
*/

/* ---- RETRO（レトロ：くすみ暖色・セリフ見出し・太罫・角丸控えめ） ----------
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;700&display=swap');
:root{
  --paper:#f7f1e3; --paper-2:#efe6d2; --sumi:#3a2b1b; --ink:#4a3a28; --mut:#8a7757;
  --line:#d9c9a8; --line-d:#c4ad84;
  --accent:#b4532a; --accent-d:#8f3d1c; --on-accent:#f7f1e3; --gold:#a8862f;
  --fh:"Zen Old Mincho",serif; --fl:"Zen Old Mincho",serif;
  --ls-head:.06em; --radius:2px; --shadow-card:0 2px 0 var(--line-d);
}
*/

/* ---- STYLISH（スタイリッシュ：暗色基調・余白広め・細字・無彩アクセント） --
:root{
  --paper:#0e0e10; --paper-2:#161619; --sumi:#fafafa; --ink:#e4e4e7; --mut:#9a9aa3;
  --line:#2a2a30; --line-d:#3a3a42;
  --accent:#fafafa; --accent-d:#d4d4d8; --on-accent:#0e0e10; --gold:#9a9aa3;
  --fw-head:500; --fw-bold:600; --ls-head:.04em; --ls-ey:.22em;
  --radius:0px; --shadow-card:none;
  --hd-bg-on:rgba(14,14,16,.85);
  --ft-bg:#0a0a0b; --ft-ink:#9a9aa3; --ft-head:#fafafa; --ft-line:#2a2a30;
  --cta-bg:#161619; --cta-ink:#fafafa; --cta-mut:#9a9aa3; --cta-line:#3a3a42;
}
*/