/*
 * pop-tokens.css — レイアウト/見た目トークンの単一の出どころ。
 *
 * 市場のポップ版(market-pop.css + style.css の #market-* / .market-* ルール)
 * が参照する `--pop-*` 変数をここで定義する。今後ポップ版化する他の UI
 * (注文箱・住人会話など、docs/feedback-2026-09-18.md §4)も同じトークンを
 * 使う契約なので、トークン名はここが唯一の定義元として扱うこと。
 *
 * 2プロファイル:
 *   - デスクトップ(:root の既定値)
 *   - タッチ/狭幅(style.css の市場が使っているのと同じ2条件の内側で上書き:
 *     `@media (max-width: 700px)` と `body.touch` + `@media (max-height: 480px)`)
 *
 * 初期値は「今の市場の見た目そのまま」が原則。例外は
 * docs/feedback-2026-09-18.md 決定の「全 UI で余白を意識する」に沿って
 * デスクトップのグリッド余白/間隔・カード内余白・詳細余白だけ気持ち広げた点。
 *
 * 調整ツールは廃止済み(2026-09-18)。値の調整は Claude との会話でこの
 * ファイルへ直接反映する。
 *
 * §スコープ注記: 市場には他にも多数の細かい px 値(アイコン内 svg サイズ、
 * 個々のボタンの微妙な余白、フォーカスリングのオフセットなど)があるが、
 * このファイルが定義する契約トークンに素直に対応しないものは意図的に
 * リテラルのまま残した(市場の見た目を変えないため)。対応表は
 * このファイルを書いたエージェントの最終報告を参照。
 */

:root {
  /* -- colors (alias target for the existing --mk-* names used by
        market-pop.css / style.css) -- */
  --pop-ink:    #23201c;
  --pop-cream:  #fff3d6;
  --pop-paper:  #fffdf4;
  --pop-turq:   #3fd6cf;
  --pop-yellow: #ffd23f;
  --pop-coral:  #ff6f5e;
  --pop-lime:   #a7e34f;
  --pop-muted:  #6f6353;

  /* -- borders / radii / shadow -- */
  --pop-border:       3px;
  --pop-border-thin:  2px;
  --pop-radius-lg:    18px;
  --pop-radius-md:    14px;
  --pop-radius-sm:    12px;
  --pop-shadow-y:     4px;

  /* -- spacing scale -- */
  --pop-space-1: 4px;
  --pop-space-2: 8px;
  --pop-space-3: 12px;
  --pop-space-4: 16px;
  --pop-space-5: 24px;
  --pop-space-6: 32px;

  /* -- modal -- */
  --pop-modal-w:       880px;
  --pop-modal-max-h:   84vh;
  --pop-modal-inset:   24px;

  /* -- header / tabs / rail -- */
  --pop-header-h:  auto;
  --pop-tab-h:     auto;
  --pop-tab-gap:   4px;
  --pop-rail-w:    128px;

  /* -- card grid -- */
  --pop-grid-pad:     16px; /* §余白: was 14px on desktop, bumped per 決定 */
  --pop-grid-gap:     12px; /* §余白: was 8px on desktop, bumped per 決定 */
  --pop-card-min-w:   112px; /* §2026-09-18 shrink: was 118px */
  --pop-card-max-w:   140px; /* §2026-09-18 shrink: caps card width so auto-fill no longer stretches cards to fill the row */
  --pop-card-min-h:   96px;  /* §2026-09-18 shrink: was auto */
  --pop-card-pad:     10px;  /* §2026-09-18 shrink: was 12px */
  --pop-card-gap:     4px;
  --pop-card-icon:    32px;  /* §2026-09-18 shrink: was 42px */

  /* -- detail panel -- */
  --pop-detail-w:    240px;
  --pop-detail-h:    auto;
  --pop-detail-pad:  16px; /* §余白: already 16px, kept (matches 決定 target) */

  /* -- buttons / stepper -- */
  --pop-btn-h:      auto;
  --pop-btn-min-w:  auto;
  --pop-step-size:  28px;

  /* -- §mk-variant (2026-09-18 market redesign): species-card detail's
        variant rows (market-pop.css's mk-variant-*) — row height keeps
        generous whitespace on desktop, and clears the 44px a11y floor on
        touch/narrow where every row already has real tap targets. -- */
  --pop-variant-row-min-h: 60px;
  --pop-variant-row-gap:   14px;
  --pop-variant-row-pad:   10px 4px;

  /* -- small icons / pips (§fix review item8: orderbox.css's box-header icon,
        fly-to-wallet fish icon, and per-progress pips were hard-coded px —
        pulled out here as tokens like every other size) -- */
  --pop-icon-sm:  32px;
  --pop-pip-size: 16px;
  --pop-pip-gap:  6px;

  /* -- type scale -- */
  --pop-fs-title: 17px;
  --pop-fs-tab:   12px;
  --pop-fs-name:  13px;
  --pop-fs-price: 12px;
  --pop-fs-meta:  10.5px;
  --pop-fs-btn:   14px;

  /* -- fonts -- */
  --pop-font-display: "Mochiy Pop One", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  --pop-font-body:     "M PLUS Rounded 1c", system-ui, "Hiragino Sans", sans-serif;
}

/* ---------------------------------------------------------------- touch profile
   Same two conditions style.css's market rules use for the compact/narrow
   layout — see style.css's own long comment near "§5/§10 width breakpoint"
   for why both legs exist (width-only vs. touch+short-height). */
@media (max-width: 700px) {
  :root {
    --pop-header-h: 44px;
    --pop-tab-h:    44px;
    --pop-tab-gap:  10px;

    --pop-grid-pad:   16px;
    --pop-grid-gap:   12px;
    --pop-card-min-w: 112px; /* §2026-09-18 shrink: was 150px */
    --pop-card-max-w: 132px; /* §2026-09-18 shrink: new cap, was implicit 1fr */
    --pop-card-min-h: 72px;  /* §2026-09-18 shrink: was 100px */
    --pop-card-pad:   8px;   /* §2026-09-18 shrink: was 10px */
    --pop-card-icon:  20px;  /* §2026-09-18 shrink: was 22px */

    --pop-detail-h:   76px;
    --pop-detail-pad: 12px;

    --pop-btn-h:     44px;
    --pop-btn-min-w: 150px;
    --pop-step-size: 32px;

    --pop-icon-sm:  36px;
    --pop-pip-size: 20px;
    --pop-pip-gap:  8px;

    --pop-fs-title: 15px;
    --pop-fs-tab:   15px;
    --pop-fs-name:  13px;
    --pop-fs-price: 13px;  /* §2026-09-18 shrink: was 14px */
    --pop-fs-meta:  10.5px; /* §2026-09-18 shrink: was 11px */
    --pop-fs-btn:   15px;

    --pop-variant-row-min-h: 48px;
    --pop-variant-row-gap:   10px;
    --pop-variant-row-pad:   8px 2px;
  }
}

body.touch {
  @media (max-height: 480px) {
    & { /* body.touch 自身に定義(入れ子の :root は body.touch :root になり無効だった) */
      --pop-header-h: 44px;
      --pop-tab-h:    44px;
      --pop-tab-gap:  10px;

      --pop-grid-pad:   16px;
      --pop-grid-gap:   12px;
      --pop-card-min-w: 112px; /* §2026-09-18 shrink: was 150px */
      --pop-card-max-w: 132px; /* §2026-09-18 shrink: new cap, was implicit 1fr */
      --pop-card-min-h: 72px;  /* §2026-09-18 shrink: was 100px */
      --pop-card-pad:   8px;   /* §2026-09-18 shrink: was 10px */
      --pop-card-icon:  20px;  /* §2026-09-18 shrink: was 22px */

      --pop-detail-h:   76px;
      --pop-detail-pad: 12px;

      --pop-btn-h:     44px;
      --pop-btn-min-w: 150px;
      --pop-step-size: 32px;

      --pop-icon-sm:  36px;
      --pop-pip-size: 20px;
      --pop-pip-gap:  8px;

      --pop-fs-title: 15px;
      --pop-fs-tab:   15px;
      --pop-fs-name:  13px;
      --pop-fs-price: 13px;  /* §2026-09-18 shrink: was 14px */
      --pop-fs-meta:  10.5px; /* §2026-09-18 shrink: was 11px */
      --pop-fs-btn:   15px;

      --pop-variant-row-min-h: 48px;
      --pop-variant-row-gap:   10px;
      --pop-variant-row-pad:   8px 2px;
    }
  }
}