/* YsWorks 色の役割（デザイントークン）
   ページは色を数字で書かず、ここの「役割の名前」で書く。
   :root がサイト全体の色。色を変えるときは :root の中身だけを変える（全ページが一緒に変わる）。
   .pal-xxx は試しの案。ページの「調整（Tweaks）」の palette で切り替えて見比べる。
   コントラストはすべての案で WCAG AA（4.5:1）以上を計算で確認済み（2026-10-23）。 */

:root {
  /* 地と面（どの案でも共通） */
  --c-bg: #FFFFFF;            /* 地 */
  --c-surface: #F3F3F1;       /* 面を分けるときの薄いグレー */
  --c-text: #2B2E2B;          /* 本文 */
  --c-text-soft: #5A605A;     /* 補足 */
  --c-line: #E4E2DD;          /* 罫線 */
  --c-line-strong: #C9C6BF;   /* タグなどの枠 */
  --c-field: #8C918B;         /* 入力欄の枠 */
  --c-on-dark: #FFFFFF;       /* 濃い地の上の文字 */

  /* ブランドの色（案ごとに変わる） */
  --c-main: #3D4A3E;          /* 見出し・リンク・濃い帯・線画の線 */
  --c-label: #586455;         /* 小見出しのラベル・番号・バッジ */
  --c-main-dark: #2F3930;     /* フッター */
  --c-tint: #EEF1EC;          /* そっと目立たせる面 */
  --c-cta: #8A6A3E;           /* 相談ボタン（ボタン以外に使わない） */
  --c-cta-hover: #74572F;     /* 相談ボタンのホバー */
  --c-on-dark-soft: #DCE2DA;  /* 濃い地の上の補足文字 */
  --c-on-dark-faint: #C9D1C7; /* フッターの © */
  --c-accent: #B08A5E;        /* ロゴ・イラストの差し色（文字には使わない） */

  /* LINE（案が変わっても変えない。LINEの緑はLINEのもの）。LINEへ誘導するボタンだけに使う */
  --c-chat: #06C755;          /* LINEのボタン */
  --c-chat-hover: #05B04C;    /* LINEのボタン（ホバー） */
  --c-on-chat: #1B1F1B;       /* LINEのボタンの上の文字（白だと読みにくいので濃い色） */
}

/* 案：深緑（今の色） */
.pal-green {
  --c-main: #3D4A3E; --c-label: #586455; --c-main-dark: #2F3930; --c-tint: #EEF1EC;
  --c-cta: #8A6A3E; --c-cta-hover: #74572F; --c-on-dark-soft: #DCE2DA; --c-on-dark-faint: #C9D1C7;
}

/* 案：紺 */
.pal-navy {
  --c-main: #2D3E57; --c-label: #4B5B72; --c-main-dark: #1F2B3D; --c-tint: #EBEFF5;
  --c-cta: #8A6A3E; --c-cta-hover: #74572F; --c-on-dark-soft: #D5DDE8; --c-on-dark-faint: #C3CCDA;
}

/* 案：こげ茶（相談ボタンは茶色に埋もれないよう深い青緑） */
.pal-brown {
  --c-main: #4A3A2E; --c-label: #6B5848; --c-main-dark: #33281F; --c-tint: #F3EDE6;
  --c-cta: #2F6658; --c-cta-hover: #24524A; --c-on-dark-soft: #E4DAD0; --c-on-dark-faint: #D3C6B8;
}

/* 案：えんじ */
.pal-wine {
  --c-main: #5C2F35; --c-label: #7A5157; --c-main-dark: #41211F; --c-tint: #F6EDEE;
  --c-cta: #8A6A3E; --c-cta-hover: #74572F; --c-on-dark-soft: #EADADC; --c-on-dark-faint: #D9C4C6;
}

/* 自分で選ぶ（Tweaks の customMain／customCta から、ページが --u-* を計算して入れる） */
.pal-custom{--c-main:var(--u-main);--c-label:var(--u-label);--c-main-dark:var(--u-dark);--c-tint:var(--u-tint);--c-on-dark-soft:var(--u-ods);--c-on-dark-faint:var(--u-odf);--c-cta:var(--u-cta);--c-cta-hover:var(--u-cta-hover)}