/* tokens.css — つまみUI LP デザイントークン
   世界観: 夜のMacデスクトップ(深い藍インク)に、アプリ実物のグループ色=キャンディカラーのガム。
   金はキングつまみ専用。 */
:root {
  /* 色 */
  --ink: #0d0e1c;          /* 夜の机 */
  --ink-2: #14163a;        /* 机の照り返し */
  --card: #191b2e;         /* 浮かぶ面 */
  --line: rgba(242, 243, 248, .08);
  --fog: #f2f3f8;          /* 文字 */
  --muted: #9fa3b8;        /* 補足 */
  --coral: #ff5f6d;        /* ガム(主役) */
  --coral-dark: #2a0d12;
  --sky: #58a6ff;          /* グループ色2 */
  --gold: #f5c76a;         /* キング専用 */

  /* タイプ */
  /* ⚠ 2026-08-30: このLPだけ **Windows 用の和文フォントを1つも並べていなかった**
     ［測定: ハブ index.html と magtext.html は Yu Gothic / BIZ UDPGothic / Meiryo を持っている］。
     Windows では総称 sans-serif に落ちるので、何で描かれるかがブラウザ任せになる。
     ⚠ **実害は確認できていない**（Windows Chrome は lang="ja" から和文の既定を選ぶので、
       落ちても読める可能性が高い）。これは事故の修理ではなく、家の作法に揃える予防。
     Mac 側の指定（-apple-system / Hiragino Sans）は先頭のまま＝主戦場の見え方は変えない。 */
  /* ★ 2026-09-04 組版の底上げ。実測（1440px）: 本文の大半が 12.5〜13.8px の灰色で、サイズが約50種類、
     書体は OS 任せのゴシック1種だけ＝「安っぽい」の正体。競合（Raycast: Inter / CleanShot: Google Sans）は
     webfont で全OS同じ見え方。家の他のページ（ハブ・MAGTEXT）は明朝の見出し。⇒ 揃える。
     ⚠ webfont は index.html の <link> で読む（Google Fonts・SIL OFL＝商用可）。ここは指定順だけ。
     ⚠ 中国語ページは html[data-page-lang="zh"] で SC 系へ差し替える（JP 書体は簡体字が欠けて混植になる）。 */
  --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif SC", Georgia, serif;
  --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Yu Gothic UI", "Yu Gothic Medium", "Yu Gothic", "BIZ UDPGothic", Meiryo, sans-serif;

  /* 寸法の型（8段）。⛔ これ以外の font-size を新しく書かない（型が無かったから50種類に散った）。
     床: PC 13px（--t-micro）／携帯 12px。本文 17px（競合の本文は 18px・和文は 17 で釣り合う）。 */
  --t-display: clamp(2rem, 5vw, 3.9rem);      /* H1: 1440px で 62px（Raycast 64 / CleanShot 60） */
  --t-h2:      clamp(1.7rem, 3.4vw, 2.6rem);   /* 節見出し: 41.6px（CleanShot H2 40） */
  --t-h3:      1.3rem;                          /* カード見出し: 20.8px（競合 20〜24） */
  --t-lede:    clamp(1.0625rem, 1.6vw, 1.3rem); /* リード: 20.8px */
  --t-body:    1.0625rem;                       /* 本文: 17px */
  --t-ui:      .9375rem;                        /* ナビ・ボタン・脚注リンク: 15px */
  --t-small:   .875rem;                         /* 注記・キャプション: 14px */
  --t-micro:   .8125rem;                        /* ラベル（等幅・字間広め）: 13px＝PCの床 */
  --t-brand:   1.35rem;                         /* 屋号: 21.6px */
  /* ⚠ 2026-08-30: `.eyebrow` など**日本語を含む要素がこの等幅指定を使う**のに、和文フォントが
     1つも無かった。Windows では総称 monospace（Courier New）に落ち、CJK は
     ブラウザのフォールバック任せになる。⇒ 欧文は等幅（Cascadia/Consolas）、
     和文は BIZ UDGothic / MS ゴシックで拾わせる。
     ⚠ 上と同じく**実害は未確認**（検証に使ったヘッドレス環境は CJK フォントを1つしか持たず、
       どのフォント名を指定しても同じ字形になったため、この場では違いを観測できない）。 */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas,
               "BIZ UDGothic", "MS Gothic", Meiryo, monospace;

  /* 動き */
  --ease-gum: cubic-bezier(.34, 1.56, .64, 1);  /* ぷにっと跳ねる */
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* 寸法 */
  --radius: 16px;
  --measure: 40rem;
}
/* 中国語ページ: 簡体字の字形と字種が揃う SC 系へ（JP 系は「窗・组・动・个」等が無く混植になる） */
html[data-page-lang="zh"] {
  --font-display: "Noto Serif SC", "Noto Serif JP", "PingFang SC", "Microsoft YaHei", serif;
  --font-body: "Noto Sans SC", "Noto Sans JP", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(88, 166, 255, .12), transparent 60%),
    radial-gradient(900px 560px at 12% 4%, rgba(255, 95, 109, .10), transparent 55%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 46%);
  background-color: var(--ink);
  color: var(--fog);
  font-family: var(--font-body);
  font-size: var(--t-body);          /* 明示しない文字は全部 17px（以前は 16px、実際は多くが 13px 前後に落とされていた） */
  font-feature-settings: "palt";
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--coral); color: var(--coral-dark); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}