/* =========================================================
   tokens.css — J's for WOMEN 韓国っぽヘアカラー 集客LP
   ---------------------------------------------------------
   採用サイト(js_dityca/site) とは別スキン。
   理由：採用の「臙脂・和・実直」は、20代女性の求める
         くすみ／透明感の色域と真逆のため面には使わない。
         臙脂はロゴと極小罫のみブランド同一性の担保として残す。
   ========================================================= */

:root {
  /* ---- 地：温かいオフホワイト（ピンク背景にしない＝髪色が背景に埋もれるため） ---- */
  --bg:          #FBF9F7;
  --bg-2:        #F4F0EC;
  --bg-3:        #EDE7E1;
  --bg-ink:      #2A2724;

  /* ---- 文字：黒でなく墨 ---- */
  --ink:         #2A2724;
  --ink-2:       #6B625B;
  /* --ink-3 は当初 #A79C93 だったが、地(--bg)に対し 2.37:1 で
     WCAG AA(4.5:1)を大きく下回っていたため下げた。
     キャプション・注記・ラベルは小さい文字ほど濃度が要る。 */
  --ink-3:       #756C65;
  /* 罫線など「読ませない」用途にだけ使う淡色 */
  --ink-4:       #C3B9B0;
  --ink-paper:   #FBF9F7;
  --ink-paper-2: #D5CCC4;

  /* ---- くすみの基準色（韓国っぽの現在地＝ニュートラル〜モカ） ---- */
  --mocha:       #A08C7D;
  /* ---- 透明感＝寒色は1点だけ。面積を絞る ---- */
  --glass:       #C9D6DA;

  /* ---- 罫線（影を使わず1px罫線で区切る） ---- */
  --line:        #DFD7CF;
  --line-soft:   rgba(42, 39, 36, 0.08);

  /* ---- CV専用色（採用の臙脂と分離・ピンクにしない） ---- */
  --cv:          #4A3D34;
  --cv-hover:    #33291F;

  /* ---- ブランド固定色（ロゴ・極小罫のみ。面禁止） ---- */
  --brand:       #B23A48;

  /* ---- タイポ ---- */
  --ff-ja:       "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-mincho:   "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-en:       "Jost", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:     clamp(27px, 7.2vw, 34px);
  --fs-h2:       clamp(23px, 6.2vw, 29px);
  --fs-h3:       clamp(17px, 4.4vw, 20px);
  --fs-body:     15px;
  --fs-sm:       13px;
  --fs-label:    11px;
  --fs-note:     10px;

  /* ---- 余白 ---- */
  --sp-section:  clamp(64px, 14vw, 96px);
  --sp-block:    clamp(32px, 8vw, 48px);
  --gut:         22px;

  /* ---- レイアウト：PCでもスマホ幅の縦列を中央に置く ---- */
  --col:         450px;   /* 中央コンテンツ列 */
  --wing-min:    1100px;  /* 左右の固定翼を出す下限幅 */

  /* ---- 角丸0・影なし（テンプレ感/AI感の主因を形式で封じる） ---- */
  --radius:      0;

  /* ---- 動き（速い動き＝安い。ゆっくり） ---- */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --dur:         700ms;

  --sticky-h:    64px;
}