/**
 * tokens.css — サイト共通のデザイントークン（色・書体・イージング）の正本
 *
 * ここが tomekaro.jp の見た目の基準。色や書体を変えるときは**このファイルだけ**を直す。
 *
 * 読んでいるところ:
 *   - public/profile/index.html    … head で <link> して読む（インラインCSSの前）
 *   - public/tracks/<slug>/*.html  … 同上（生成物。テンプレートは ops/build_track_pages.mjs）
 *   - src/style.css（本体3Dサイト） … index.html の head で読む（2026-08-18 に対応済み）
 *
 * **3系統とも、このファイルの値を参照している。** 色・書体・イージング・ヘッダの字面を
 * 変えるときは、ここだけを直せば本体3Dサイト・PROFILE・楽曲ページのすべてに効く。
 * リテラル直書きへ戻すと `npm run verify:style` が食い違いを検出する。
 *
 * 外から見て分からない事情:
 *   - public/ 配下に置いてあるのは、**Vite のバンドルを通さず素のURL（/tokens.css）で
 *     配信させるため**。楽曲ページと PROFILE は Vite の管理外（public 直置き）なので、
 *     src/ に置くと参照できない。本体3Dサイトからも同じURLで読める。
 *   - 変数は「意味」で名前を付けている（--bg / --ink / --accent …）。用途が増えるときは
 *     ここに足す。ページ固有の値はページ側に置く（ここに入れるのは3系統で共有するものだけ）。
 *   - キャッシュは Cloudflare のゾーン設定で効く。トークンを変えたら**キャッシュをパージ**する
 *     （認証まわりと同じ注意。docs/access-control.md）。
 */

:root {
  /* 面 */
  --bg: #08040f; /* 本体と同じ「黒に近い紫」（空間ベース） */

  /* 文字 */
  --ink: #e8e4f2; /* 見出し・本文の基準色 */
  --body: rgba(232, 228, 242, 0.8); /* 長文の本文（読み疲れを避けて少し落とす） */
  --accent: #f2f0fa; /* 展示会型ミニマルUIのアクセント（ほぼ白） */
  --dim: rgba(242, 240, 250, 0.4); /* ラベル・補助情報 */

  /* 線 */
  --hair: rgba(242, 240, 250, 0.16); /* 罫線・枠線 */

  /* ネオン（ジャケットから採色。使いすぎない） */
  --neon: #b57bff; /* ネオン紫 */
  --neon2: #ff4fa3; /* Night Taxi のテールランプ */

  /* 動き（opacity / transform にのみ使う。filter はカクつくため使わない） */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 書体 */
  --serif: 'Shippori Mincho', 'Yu Mincho', serif;
  --dot: 'DotGothic16', 'MS Gothic', monospace;

  /* ヘッダ中央の「透明回路」。**本体3Dサイトとページで同じ字面にする必要がある値**。
     色や書体と違ってレイアウト値だが、ここに置くのは「本体（src/style.css の #site-title）と
     PROFILE・楽曲ページ（common.css の .topbar .site-title）が同じ値を使わないと、
     ページを行き来したときに中央の文字が動いてしまう」ため。
     片方だけ直す事故を防ぐには、両方がこの変数を読むのが唯一の形になる。 */
  --site-title-size: 21px;
  --site-title-tracking: 0.5em;
  --site-title-top: 18px; /* 明朝21pxはインクが6px下がるぶんを見込んだ位置（本体の指定に由来） */
}