/* =========================================================
   tokens.css — Dityca スタッフ投稿サポート（この画面が使う値だけ）

   ★2026-09-04 デザイン変更：ニューモーフィズム（Soft UI）へ。
     岩田さん提示のモックアップ（Uber ウィジェット／Welcome Back ダッシュボード／
     クリプト系ダッシュボード）に合わせた。

   ★2026-09-04 配色変更：茶系をやめ、女性寄りのブラッシュ（くすみローズ）へ。
     出発点は Dityca様LPに元からある `--rose: #B89A93`（トープローズ）。
     ゼロから発明せず、ブランドにある色相を持ってきて濃度だけ上げている。
     LPの茶（--accent #A8846A）はこの画面では使わない。

   ★ニューモーフィズムの弱点を承知のうえで採用している
     「地と同じ色＝境界のコントラストが無い」ため、WCAG 2.2 SC 1.4.11（UI部品の境界 3:1）を
     素では満たせない。明るいサロンの店内では、押せるかどうかが見えなくなる。
     → **主要な操作だけ塗りつぶしの高コントラストにする**（2026年の定石）。
       質感はニューモーフィズム、押すものは塗り。両立させる。
   ========================================================= */

:root{
  /* ── ニューモーフィズムの地と影 ───────────────────── */
  --nm-bg:      #F0E7E8;   /* 地。カードもボタンもこの色。ブラッシュ・グレージュ */
  --nm-light:   #FFFFFF;   /* 左上からの光 */
  --nm-dark:    #CEC7C8;   /* 右下の影。地から約14%暗い */
  --nm-sunk:    #E9DFE0;   /* 沈んだ面（溝・トラック） */

  /* 影の型。角丸を14pxへ詰めたので、距離も5px／3pxへ寄せた（距離は角丸の約1/3）*/
  --nm-up:      5px 5px 11px var(--nm-dark), -5px -5px 11px var(--nm-light);
  --nm-up-sm:   3px 3px 7px var(--nm-dark), -3px -3px 7px var(--nm-light);
  --nm-in:      inset 4px 4px 8px var(--nm-dark), inset -4px -4px 8px var(--nm-light);
  --nm-in-sm:   inset 3px 3px 6px var(--nm-dark), inset -3px -3px 6px var(--nm-light);

  /* ── 文字と線（すべて --nm-bg 上で実測。AA 4.5:1 以上）────── */
  --ink:         #2B2427;   /* 見出し・本文。12.50:1 */
  --ink-2:       #574C50;   /* 本文の補足。6.77:1 */
  --ink-3:       #6D6165;   /* 注記。4.88:1 */
  --accent-deep: #8E4F63;   /* ローズ深。地の上 5.02:1 ／ 白文字を載せて 6.09:1 */
  --line:        #DFD4D6;

  /* 🔴 LPの --rose(#B89A93) を色相の出発点にしたが、そのままでは使えない。
        地の上 2.14:1・白文字を載せても 2.60:1 で、どちらもAAに遠い。
        同じ色相のまま濃度を上げた --accent-deep(#8E4F63) に一本化した。
        LPの --accent(#A8846A・茶) はこの画面では使わない（2026-09-04 岩田さん指示で茶系を外した）*/
  --on-accent:   #8E4F63;
  --on-ink:      #2B2427;
  --white:       #FFFFFF;

  /* ── 角丸（ニューモーフィズムは大きめが要る）─────────── */
  --r-card:      14px;
  --r-btn:       12px;
  --r-chip:      999px;   /* ポイントの丸バッジだけ。意図した錠剤形 */
  --r-thumb:     12px;

  /* ── 書体 ─────────────────────────────────── */
  --ff-ja:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;  /* 源ノ角ゴシック */
  --ff-num: "Inter", "Noto Sans JP", system-ui, sans-serif;

  /* ── 級数（SP前提。本文15〜18px＝WEB_PRODUCTION_BASICS）── */
  --fs-hero:  44px;
  --fs-h2:    20px;
  --fs-h3:    17px;
  --fs-body:  16px;   /* 15→16。低コントラストの地なので下限は使わない */
  --fs-sm:    14px;   /* 13→14 */
  --fs-label: 12px;   /* 11→12。11pxは検査の下限ぎりぎりで、実機で細い */

  /* ── 余白・寸法 ───────────────────────────── */
  --gut:      22px;
  --col:      430px;
  --tap:      48px;

  /* ── 動き ─────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .15, 1);
  --dur:  220ms;
}