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

   ★色は Dityca様のLP `site/lp/dityca/css/tokens.css` から写した（2026-09-04）。
     手打ちしていない。照合＝ staff_app_dityca/_calc/check_tokens.py

   ★LPと意図的に変えたもの（この画面だけ）
     LP は接客面のブランドページで `--radius: 0` の硬質ミニマル。
     この画面は**スタッフさんが毎日スマホで触る道具**で、要件が
     「親しみやすくカジュアル・立体的」（岩田さん 2026-09-04）。
     角丸・厚み・影を別体系にする。**色は1つも変えていない。**

   ★書体を2つに絞った理由
     LP は Zen Kaku Gothic New ＋ Zen Old Mincho ＋ Jost の3書体。
     この画面は毎日開くアプリなので読み込みを軽くする。和文＝Zen Kaku Gothic New、
     数字＝Inter（tnum で桁が揃う）。明朝と Jost は1箇所も使わない。
   ========================================================= */

:root{
  /* ── LP から写した色（変更禁止・写し直すときは check_tokens.py を通す）── */
  --paper:       #F6F3EF;   /* 生成りグレージュ（純白でない） */
  --paper-2:     #EFEAE3;
  --ink:         #262320;   /* ソフトチャコール（純黒を避ける） */
  --ink-2:       #5B524A;
  --ink-3:       #6E645B;   /* 注記（AA確保） */
  --line:        #DCD5CC;
  --accent:      #A8846A;   /* スモーキーブラウンゴールド */
  --accent-deep: #785B44;   /* paper上のアクセント文字（AA 4.5:1確保） */
  --rose:        #B89A93;   /* トープローズ */

  /* ── この画面だけの値 ───────────────────────────── */
  --paper-3:     #E6DFD6;   /* カードの縁・沈んだ面 */
  --white:       #FFFFFF;   /* カードの地。paper より一段浮かせる */

  /* 立体（Duolingo系の「押せる厚み」。影はぼかさずオフセットで厚みを作る） */
  --depth:       4px;
  --edge:        #D6CCC0;   /* paper 上の白カード／白ボタンの厚み */
  /* ★白文字を載せる面は --accent(#A8846A) を使わない。白との比が 3.40:1 で AA に届かない。
     --accent-deep(#785B44) は 6.22:1。実測＝staff_app_dityca/_calc/contrast.py */
  --on-accent:   #785B44;   /* 白文字を載せてよい accent 系の面 */
  --edge-accent: #55402F;   /* --on-accent の厚み */
  --edge-ink:    #12100E;   /* ink ボタンの厚み */
  --lift:        0 2px 10px rgba(38, 35, 32, .06);   /* 浮きのやわらかい影 */
  --lift-2:      0 6px 22px rgba(38, 35, 32, .10);

  /* 角丸 */
  --r-card:      18px;
  --r-btn:       16px;
  --r-chip:      999px;
  --r-thumb:     12px;

  /* 書体 */
  --ff-ja:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-num: "Inter", "Zen Kaku Gothic New", system-ui, sans-serif;

  /* 級数（SP前提。本文15〜18px＝WEB_PRODUCTION_BASICS） */
  --fs-hero:  40px;   /* 主役の数字 */
  --fs-h2:    19px;
  --fs-h3:    16px;
  --fs-body:  15px;
  --fs-sm:    13px;
  --fs-label: 11px;

  /* 余白・寸法 */
  --gut:      18px;
  --col:      430px;   /* SP特化型の列幅（実測中央値。MOBILE_FIRST_DESIGN §3） */
  --tap:      48px;    /* タップ48×48以上 */
  --tabbar-h: 60px;

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