/* =========================================================
   tokens.css — J's様 韓国ヘアLP v3（女性・2026-10-05）
   ---------------------------------------------------------
   流用元＝../../mens_lp_v3/css/tokens.css（構造はそのまま・地を白に反転）
   岩田さん指定：女性向けLPは白ベース（地は白・生成り、文字は黒、アクセントは J's の赤）。
   赤＝ロゴ画素の実測 #E60012／黒＝ロゴの #0F0F0F。赤は面で塗らない（CTA・一語・細線だけ）。
   コントラスト（Python 実測 2026-10-05）：
     #0F0F0F on #FFF = 19.17 ／ --ink-2 #4A4744 on --bg-2 = 8.48 ／ --ink-3 #66625D on --bg-2 = 5.56
     小さい赤文字 on 白 → --red-deep #C8000F = 6.06（on 生成り 5.57）／ 白文字 on 赤 = 4.80
     墨の帯（--night）の上：#F4F2EF = 17.15 ／ #B8B3AD = 9.21 ／ 赤文字は --red-lift #FF4D55 = 5.88
   ========================================================= */

:root {
  color-scheme: light;

  /* ---- 地 ---- */
  --bg:       #FFFFFF;   /* 白 */
  --bg-2:     #F7F5F2;   /* 生成りの白（ブロックの切り替え） */
  --surface:  #EFECE8;
  --night:    #0F0F0F;   /* 墨の帯（共感・6つの形の群見出しだけ） */
  --night-2:  #1A1A1A;

  /* ---- 文字 ---- */
  --ink:      #0F0F0F;
  --ink-2:    #4A4744;
  --ink-3:    #66625D;
  --ink-inv:  #F4F2EF;   /* 墨の帯の上 */
  --ink-inv-2:#B8B3AD;

  /* ---- 赤（1色だけ）---- */
  --red:      #E60012;
  --red-deep: #C8000F;
  --red-lift: #FF4D55;

  --line:      rgba(15, 15, 15, .14);
  --line-2:    rgba(15, 15, 15, .22);
  --line-inv:  rgba(244, 242, 239, .16);

  /* ---- 書体 ---- */
  --ff-ja:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-min:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;   /* 明朝は使わない（ロゴの直線に合わせて太ゴシック） */
  --ff-en:   "Jost", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:  clamp(30px, 8.4vw, 40px);
  --fs-h2:    clamp(23px, 6.2vw, 29px);
  --fs-h3:    clamp(17px, 4.6vw, 20px);
  --fs-body:  15px;
  --fs-sm:    14px;
  --fs-label: 11px;
  --fs-note:  12.5px;   /* 2026-10-05 UI/UX パス：注記・出典は 12px 以上 */
  --fs-cap:   13px;     /* 補足（カード内の小見出し・タグ・条件） */
  --fs-num:   clamp(44px, 13vw, 60px);

  /* ---- 余白（8pxベース） ---- */
  --sp-section: clamp(72px, 16vw, 104px);
  --sp-block:   clamp(32px, 8vw, 48px);
  --gut:        20px;

  /* ---- PCでもスマホ幅の縦列を中央に ---- */
  --col: 480px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  600ms;
  --sticky-h: 76px;

  /* ---- 線アイコン（viewBox24・stroke2）。mask で currentColor に塗る ---- */
  --ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ic-down:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v13M6 13l6 6 6-6'/%3E%3C/svg%3E");
  --ic-ext:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}