/* ============================================================
   魚住式スピーチメソッド ─ デザイントークン
   すべての色・余白・書体はここだけで定義する。
   画面側で色コードを直書きしないこと。
   ============================================================ */

:root {
  /* --- 色 ------------------------------------------------- */
  /* 現行サイト（#FFF6ED / #EE952F）の温かみを残しつつ、
     彩度を落として「品格」側へ寄せた配色 */
  --c-ink:        #1A1A1A;  /* 主役。見出し・濃い面 */
  --c-body:       #3E3832;  /* 本文 */
  --c-mute:       #8A8078;  /* 補助・キャプション */
  --c-line:       #E3DCD2;  /* 罫線 */
  --c-line-soft:  #EFEAE3;
  --c-paper:      #FBF8F4;  /* 基調（生成り） */
  --c-paper-2:    #F4F0E9;
  --c-white:      #FFFFFF;

  --c-accent:     #C2661C;  /* 朱橙。CTA・強調 */
  --c-accent-ink: #8A4310;  /* 濃い朱。ホバー */
  --c-accent-soft:#EE952F;  /* 現行オレンジ。細部の差し色のみ */
  --c-accent-bg:  #FDF3EA;  /* 淡い朱の面 */

  --c-ok:         #3F7A55;
  --c-warn:       #B8791B;
  --c-bad:        #A8452F;

  /* --- 書体 ------------------------------------------------ */
  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", YuMincho,
             "ヒラギノ明朝 ProN W3", serif;
  --f-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic,
             "Helvetica Neue", Arial, sans-serif;
  --f-num:   "Helvetica Neue", Arial, var(--f-sans);

  /* --- 文字サイズ（本文16px・行間1.9 を基準） ----------------- */
  --t-xs:   1.1rem;   /* 11px 相当 ─ 注記 */
  --t-sm:   1.3rem;   /* 13px ─ キャプション */
  --t-base: 1.6rem;   /* 16px ─ 本文 */
  --t-md:   1.8rem;
  --t-lg:   2.2rem;
  --t-xl:   2.8rem;
  --t-2xl:  3.6rem;
  --t-3xl:  4.8rem;
  --t-hero: 6.4rem;

  --lh-tight: 1.45;
  --lh-base:  1.9;
  --lh-loose: 2.1;

  --ls-tight: 0.02em;
  --ls-base:  0.04em;
  --ls-wide:  0.14em;

  /* --- 余白（8px グリッド） --------------------------------- */
  --s-1: 0.4rem;   --s-2: 0.8rem;   --s-3: 1.2rem;  --s-4: 1.6rem;
  --s-5: 2.4rem;   --s-6: 3.2rem;   --s-7: 4.8rem;  --s-8: 6.4rem;
  --s-9: 9.6rem;   --s-10: 12.8rem;

  /* --- レイアウト ------------------------------------------ */
  --w-max:    120rem;  /* 1200px */
  --w-narrow: 78rem;   /* 読み物の行長 */
  --w-gutter: var(--s-4);

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(26, 22, 18, .06);
  --shadow-md: 0 4px 20px rgba(26, 22, 18, .08);

  --dur: 180ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 768px) {
  :root { --w-gutter: var(--s-6); }
}