/* =========================================================
   tokens.css — J's 髪質改善 集客LP（HAIR QUALITY SPECIALIST）
   ---------------------------------------------------------
   正本＝見本デザイン S__131063818.jpg（2026-08-01 コーディネーター確定）。
   パレット＝生成り(明るいペーパー地)×モカ×ゴールド暖色。
   ポジション＝「髪質改善スペシャリスト／髪質改善で、うる艶美髪へ。」
     （縮毛矯正も含む広い"髪質改善"。LUXELL一択にしない）
   規律：角丸0・影なし・グラデ最小。ゴールドは塗り/発光に使わず
         大見出し・1px罫・小キャップ・数字のみ。読ませる小文字は濃色。
   構造：色LP姉妹と同型＝450px中央列＋PC左右翼。
   ========================================================= */

:root {
  /* ---- 地：生成り（温かいオフホワイト）---- */
  --bg:          #FBF9F7;
  --bg-2:        #F4F0EC;   /* 面替え（tint）*/
  --bg-3:        #EDE7E1;   /* stage 余白 */
  --bg-ink:      #2A2724;   /* 反転面（closing 等）*/

  /* ---- 文字：黒でなく墨（WCAG実測済）---- */
  --ink:         #2A2724;   /* on bg 12:1超 */
  --ink-2:       #6B625B;   /* on bg 5.68:1 本文副次 */
  --ink-3:       #756C65;   /* on bg 4.89:1 注記・キャプション（AA下限）*/
  --ink-4:       #C3B9B0;   /* 罫線・読ませない用途のみ */
  --ink-paper:   #FBF9F7;   /* 反転面の文字 */
  --ink-paper-2: #D5CCC4;

  /* ---- モカ／ゴールド（暖色アクセント）----
     gold は大見出し・1px罫・数字・小キャップのみ（on bg 3.03:1＝小本文禁止）。
     読ませる小さいゴールド/モカ文字は必ず deep 系（AA合格）を使う。 */
  --mocha:       #A08C7D;   /* 罫・面アクセント（大）*/
  --mocha-deep:  #7C6552;   /* on bg 5.21:1 読ませるモカ文字 */
  --gold:        #B08A4F;   /* 大見出し・1px罫・数字・crown */
  --gold-deep:   #7A5E30;   /* on bg 5.76:1 読ませる小ゴールド文字 */

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

  /* ---- CV：濃モカ塗り＋白字（on bg 9.96:1）---- */
  --cv:          #4A3D34;
  --cv-hover:    #33291F;

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

  /* ---- 書体 ---- */
  --ff-ja:       "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-mincho:   "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-en:       "Cormorant Garamond", "Times New Roman", serif;

  --fs-hero:     clamp(27px, 7.4vw, 36px);
  --fs-h2:       clamp(22px, 5.8vw, 29px);
  --fs-h3:       clamp(16px, 4.2vw, 19px);
  --fs-body:     15px;
  --fs-sm:       13px;
  --fs-label:    11px;
  --fs-note:     11px;   /* 10px禁止：意味テキストは最低11px */

  /* ---- 余白 ---- */
  --sp-section:  clamp(60px, 13vw, 88px);
  --sp-block:    clamp(32px, 8vw, 48px);
  --gut:         22px;

  /* ---- レイアウト：縦列シリーズ型 ---- */
  --col:         450px;
  --wing-min:    1100px;

  --radius:      0;   /* 角丸0 */

  --ease:        cubic-bezier(.22, .61, .36, 1);
  --dur:         700ms;

  --sticky-h:    64px;
}