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

   ★2026-09-04：アプリの形（横スワイプ5面）に合わせて作り直した。
     立体はニューモーフィズム（Soft UI）。地と同じ色の面に、
     左上＝明るい影／右下＝暗い影 を掛けて凸を作る。押した状態は inset で凹ませる。

   ★色は KINGDOM様のまま。臙脂 #980B12 は旧版・管理画面・ワイヤーと同じ値。
     ほかのクライアント様の配色は1つも持ち込んでいない（生成器が assert で検算）。

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

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

  /* 影の型。距離は角丸の約1/3、ぼかしは距離の2倍 */
  --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);

  /* ── 文字と線（すべて地の上で実測。AA 4.5:1 以上・生成器が assert で検算）── */
  --ink:         #1F1E1B;   /* 見出し・本文 */
  --ink-2:       #57534B;   /* 本文の補足 */
  --ink-3:       #666158;   /* 注記 */
  --accent-deep: #980B12;   /* KINGDOM様の臙脂 */
  --line:        #DEDACF;
  --on-accent:   #980B12;   /* 白文字を載せられる塗り */
  --on-ink:      #1F1E1B;
  --white:       #FFFFFF;

  /* ── 解説オーバーレイ（_notes.py）が使う旧名の別名 ──
        向こうは管理画面と共有の部品なので、名前だけこちらで受ける */
  --bg:    var(--nm-bg);
  --soft:  var(--nm-sunk);
  --soft2: var(--nm-sunk);
  --muted: var(--ink-3);
  --accent: var(--accent-deep);

  /* ── 角丸（ニューモーフィズムは大きめが要る）─────────── */
  --r-card:  14px;
  --r-btn:   12px;
  --r-chip:  999px;
  --r-thumb: 12px;

  /* ── 書体（2つだけ。毎日開く道具なので読み込みを軽くする）── */
  --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;
  --fs-sm:    14px;
  --fs-label: 12px;

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

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