/* assets/css/academy-tokens.css — ウルスタ アカデミーのデザイントークン（値だけ）
 *
 * [reno 2026-09-04g] **規則を1つも書かない**。`:root` の変数だけを置く。
 *
 * なぜ別ファイルにするか:
 *   最初は共通CSS（academy.css）の中に置いたが、**そのCSSを読んでいるのは11画面中4画面だけ**だった。
 *   ログイン・パスワード再設定・1分ノート・サンクス・申込は自前の <style> で完結していて、
 *   共通CSSを読んでいない。そこへ var(--…) を書いたので、
 *   **ログイン画面が真っ白になった**（背景も帯もボタンも全部消えた。前後の画素比較で気づいた）。
 *   規則の入っていない小さな1枚にしておけば、どの画面から読んでもレイアウトを動かさない。
 *
 * 色はすべて design/palette.json（611色）の中から選んでいる。勝手に足さない。
 * LP（academy/index.html）も同じこのファイルを読む。**2つの面で語彙を分けない**。
 */
:root {
  /* 紙と面 */
  --paper: #f3efe6; --paper-2: #efe9dc; --card: #fbfaf5; --inset: #f7f3e9;
  --line: #e6ddcb; --line-2: #eae2d2; --line-3: #d6cdb9; --tint: #e6f6ef;
  /* 文字 */
  --ink: #211f1a; --ink-2: #3d3a32; --ink-3: #262420; --body: #57513f;
  --muted: #6f685a; --muted-2: #8a8270;
  /* 深緑（構造と行動） */
  --forest: #0f2a20; --forest-2: #123a2c; --forest-3: #124030;
  --line-d: #1d4d3a; --line-d-2: #2c5544;
  --on-d: #dbe8e0; --on-d-2: #a9c4b7; --on-d-3: #8fae9f;
  /* 緑（読ませる緑と、印としての緑） */
  --green: #0d5c44; --green-2: #0d6b4c; --mint: #10b981; --mint-l: #6ee7b7;
  /* 朱（数字・否定・不正解） */
  --clay: #8a3d1f; --clay-2: #a5432a; --clay-3: #c15f3c;
  --clay-tint: #f7eae3; --clay-line: #eccdc0;
  /* 黄土（注意・現在地） */
  /* [reno 2026-09-04i] --amber は #96682a で定義されていたが、**どこからも使われていなかった**。
     実際に画面が使っていたのは #b08a2e（マイページの注意）なので、そちらを --amber とする。
     使わない値を残すと、次に読む人が「どっちを使うのか」を毎回考えることになる。 */
  --amber: #b08a2e; --amber-l: #f5c451; --amber-tint: #f7f0dc;
  /* 正解・達成 */
  --ok-tint: #eafff5; --ok-tint-2: #f2f9f5; --ok-line: #bfe6d3; --ok-line-2: #cbe8d8;

  /* [reno 2026-09-04i] LPの直書き56箇所をここへ寄せたときに、足りなかった3色。
     どれも「面ではなく部品の色」なので、紙・文字・深緑のどれにも入れない。 */
  --phone-body: #0e1512;   /* 端末モックの筐体。紙の上に置く黒なので --ink より暗い */
  --line-d-3: #2f5445;     /* 端末モック内側のリング（深緑の面の上に出る線） */
  --muted-3: #9a927f;      /* 「向いていない人」側の印。--muted-2 より一段弱い */

  /* [reno 2026-09-04i] 会員7画面の直書き108箇所も同じようにここへ寄せた。
     そのうち89箇所は既にあるトークンと**まったく同じ値**だった（＝ただの直書き）。
     残り19箇所は色差 ΔE で判定し、ΔE<2.5 の5色は見分けがつかないので統合、
     役割が違う3色だけ新しく足した。「近いから」ではなく「見分けられるか」で決める。 */
  --mint-d: #0d9668;       /* 規約ページの緑。--mint より一段沈める（ΔE 14.3 で別物） */
  --line-chip: #5c7d6e;    /* 1分ノートの分野チップの枠。紙の上で 3.97:1 を満たすために選んだ値。
                              ここを他の線と揃えると、チップの枠が見えなくなる */

  /* 角丸。LPで実測13種類あったものを、4段＋端末モックの2つに畳む。
     [reno 2026-09-04i] 🔴 ここまで --r-* は **リポジトリ全体で参照0回** だった。
     トークンを書いただけで、画面は全部 px を直書きしていた（ウルスタくん側で
     `u-tokens.css` が `index.css` から0回参照だったのと同じ形が、ここでも起きていた）。
     実際に使われている値へ定義し直し、LP側を var() へ寄せた。
     会員7画面には別に18種類あったので、そちらも同じ段へ寄せた（academy 全体で 21種類 → 6段）。 */
  --r-xs: 2px; --r-s: 6px; --r-m: 12px; --r-l: 14px; --r-xl: 18px; --r-full: 999px;
  --r-phone: 40px; --r-phone-in: 31px;  /* 端末の角。ここを畳むと「板」に見えるので別扱い */

  /* 影。LPで実測8種類あったものを、役割ごとに畳む。--sh-1 / --sh-2 も参照0回だった。 */
  --sh-1: 0 1px 1px rgba(0,0,0,.02), 0 20px 34px -32px rgba(0,0,0,.30);  /* 紙の上のカード */
  --sh-2: 0 26px 46px -34px rgba(0,0,0,.45);                             /* 少し浮かせる */
  --sh-3: 0 1px 1px rgba(0,0,0,.02), 0 34px 62px -44px rgba(0,0,0,.5);   /* いちばん大きい面 */
  --sh-d: 0 26px 46px -34px rgba(15,42,32,.8);                           /* 深緑の面 */
  --sh-d-2: 0 40px 70px -46px rgba(15,42,32,.9);                         /* 深緑の面（強） */
  --sh-up: 0 -14px 34px -24px rgba(0,0,0,.5);                            /* 下から生える帯 */
  --sh-phone: 0 18px 34px -20px rgba(15,42,32,.75), inset 0 1px 0 rgba(255,255,255,.06);
  --sh-screen: inset 0 0 0 1px var(--line-d-3), 0 44px 74px -34px rgba(0,0,0,.55), 0 8px 18px -12px rgba(0,0,0,.35);

  /* 文字の段。LPで実測24種類（12.5 / 13.5 / 14.5 / 15.5 のような0.5px刻みを含む）あった。
     目分量で1pxずつ足した跡で、これが「安っぽさ」の出どころのひとつ。
     会員7画面も同じで、academy 全体では29種類あった。15段に畳んだ（10px と 10.5px は
     和文には小さすぎるので 11px へ引き上げている）。
     ここは段を宣言するだけで、画面側は px のまま書く（そのほうが読める）。
     段から外れた値が増えないことは scripts/check_academy_design_tokens.js が見張る。 */
  --fs-scale: 11 12 13 14 15 16 18 20 24 26 28 30 34 52 72;
}