/* MODO 視覚系トークン — 唯一の正本
 *
 * なぜ作るか:
 *   2026-08-05 の実測で、CSS 17ファイルに色96種・font-size 94種（固定値のみ）が散り、
 *   14ファイルがそれぞれ独自に :root を定義していた。
 *   色を「目で見分けられる距離」でまとめ直すと 96種 → 40群。うち21群は
 *   同じ色に見えるのに別の値が使われていた。生成り色は13種類、黒は6種類あった。
 *   font-size は94種が1px以内で16段に収まり、8〜15pxの帯は47種類が見た目1段だった。
 *
 *   1画面ずつ見ても原因が分からないのは当然で、別ファイルに散った同義の値が
 *   隣り合った時だけズレて見える。これが「絶妙に紫の色が違う」の正体。
 *
 * 使い方:
 *   各CSSは :root を自前で定義せず、このファイルを読み込んで var(--modo-*) を参照する。
 *   新しい値が要ると思ったら、まず既存トークンで足りないかを疑う。
 *   増やす時は scripts/audit-visual-system.mjs の上限も一緒に見直し、理由をここへ書く。
 */

:root {
  /* ---- 面 ----------------------------------------------------------------
     paper = ページの地。panel = その上に乗るカード面。
     実測で生成り系が13種あったので、役割で2つに割り切る。 */
  --modo-paper: #f4f0e8;
  --modo-panel: #fffdf8;

  /* ---- 文字 --------------------------------------------------------------
     ink = 本文と見出し。ink-soft = 補助。muted = 弱い説明文。
     黒が6種・グレーが6種あったのを、濃さの3段だけにする。 */
  --modo-ink: #110f16;
  --modo-ink-soft: #403c47;
  --modo-muted: #67616d; /* 紙地(#f4f0e8)で4.5:1を切っていたため微暗化（axe実測・service-spec §7.2 AA） */
  --modo-muted-on-ink: #948da9; /* 暗地(#110f16)用の muted。実測5.7:1 */
  --modo-line: #c9c4ce;

  /* ---- 主色 --------------------------------------------------------------
     violet = 主要な操作と強調。acid = 現在地・注意を引く面。
     violet-pale / acid は面として使い、文字色には使わない（コントラスト不足）。 */
  --modo-violet: #5740c8;
  --modo-violet-pale: #ece8ff;
  --modo-acid: #d7ff45;

  /* ---- 紙の世界 ----------------------------------------------------------
     TOPは16体をカードへ分断せず、同じ空と地形に住む一枚絵として見せる。
     遠景から手前へ紙色を少しずつ変え、虹の同心円ではなく非対称の丘を作る。 */
  --modo-world-sky: #f8f3e7;       /* あたたかい紙の空 */
  --modo-world-sun: #f3e6c8;       /* 紙の太陽 */
  --modo-world-hill-far: #e9e2f4;  /* 遠い丘: SOLO系の薄紫の紙 */
  --modo-world-hill-mid: #dfeee6;  /* 中の丘: LINK系の薄緑の紙 */
  --modo-world-hill-near: #f7e5da; /* 近い丘: DASH系の薄珊瑚の紙 */
  --modo-world-ground: #f3ead3;    /* 手前の原っぱ: FLOW系の薄琥珀の紙 */
  --modo-world-soft: #6d6579;      /* 世界の中の補助文 */
  --modo-world-door-deep: #43309f; /* CTAを押せる厚みに見せる下端 */

  /* ---- 状態 --------------------------------------------------------------
     警告と危険は別物として扱う。coral は注意喚起、danger は不可逆操作のみ。 */
  --modo-coral: #d46955;
  --modo-danger: #9b2434;
  --modo-good: #22a06b;

  /* ---- 影 ----------------------------------------------------------------
     MODOの箱は「ずらした黒い影」で立体を出す。距離は3段だけ。
     小=補助的な浮き、中=カード、大=最前面の主役。 */
  --modo-shadow-s: 3px 3px 0 var(--modo-ink);
  --modo-shadow-m: 6px 6px 0 var(--modo-ink);
  --modo-shadow-l: 10px 10px 0 var(--modo-ink);

  /* ---- 型階段 ------------------------------------------------------------
     比率1.333の8段。実測で固定値94種が実質16段しか無く、うち8〜15pxの帯は
     47種類が見た目1段だったため、8段へ収束させても情報の階層は失われない。

     日本語の見出しは clamp の下限が狭い画面で張り付くと、keep-all により
     合法な改行位置が消え、緊急改行が禁則を破る（2026-08-05 実測・10箇所で発生）。
     そのため見出し段は固定値ではなく vw 比例で持ち、下限は
     「その幅で枠に入る最大」から決める。段の値は上限として使う。 */
  --modo-text-2xs: 0.75rem;   /* 12.0px  ラベル・注釈 */
  --modo-text-xs:  0.813rem;  /* 13.0px  補助文 */
  --modo-text-s:   0.875rem;  /* 14.0px  小さめ本文 */
  --modo-text-m:   1rem;      /* 16.0px  本文 */
  --modo-text-l:   1.333rem;  /* 21.3px  小見出し */
  --modo-text-xl:  1.777rem;  /* 28.4px  見出し */
  --modo-text-2xl: 2.369rem;  /* 37.9px  大見出し */
  --modo-text-3xl: 3.157rem;  /* 50.5px  ヒーロー */

  /* ---- 行送り ------------------------------------------------------------
     日本語の字面はほぼ正方形なので、行高が級数を下回ると行同士が物理的に接触する。
     欧文前提の .82〜.95 を使わない（2026-08-04 に390px幅で衝突を実測）。 */
  --modo-leading-tight: 1.02;  /* 見出し */
  --modo-leading-snug: 1.3;    /* 小見出し */
  --modo-leading-body: 1.7;    /* 本文 */

  /* ---- 余白 --------------------------------------------------------------
     4の倍数の6段。中間値を足したくなったら、まず既存段で組めないかを疑う。 */
  --modo-space-1: 4px;
  --modo-space-2: 8px;
  --modo-space-3: 16px;
  --modo-space-4: 24px;
  --modo-space-5: 40px;
  --modo-space-6: 64px;
}

/* ============================================================
   日本語の行頭禁則を厳密にする（全ページ共通・2026-08-09）
   ------------------------------------------------------------
   既定の line-break では、小書き仮名「っ ゃ ゅ ょ」や長音符「ー」が
   行頭へ落ちる。実測では組織パイロットの本文で「っ」が、利用規約と
   プライバシーの本文で「ー」が行頭に出ていた（幅390・全42画面検査）。
   strict にすると JIS の行頭禁則をブラウザが適用する。
   検査は `cd scripts && node kinsoku-all.mjs <URL> <幅>`。
   ============================================================ */
html[lang="ja"] { line-break: strict; }