/* ============================================================
   tokens-mode2.css — MODE 2（INTERACTIVE_UI）が追加する層
   ------------------------------------------------------------
   docs/06 §2.2 は Semantic のカテゴリとして「状態（成功／注意／エラー／情報）」
   を定義しているが、Phase 5（MODE 1）では状態を持つ UI が無かったため
   実装していなかった。MODE 2 で初めて必要になったため、ここで追加する。

   読み込み順は tokens.css → tokens-mode2.css → brand.css → site.css。
   本ファイルは tokens.css を置き換えない。**追加するだけ**である。

   規律
     ・Semantic は Primitive を参照する（TD-1）。本ファイルは自分が使う
       Primitive も併せて追加する。tokens.css の Primitive は書き換えない。
     ・値は Brand（brand.css）が後から上書きする（TD-2）。ここにある値は
       Brand 未割り当て時のフォールバックである。
     ・Component（site.css）は本ファイルの Semantic 名だけを参照する（TD-3）。

   本ファイルは MODE 2 の案件だけが読み込む。MODE 1 の生成物には含めない。
   ============================================================ */

:root {

  /* ==========================================================
     1. PRIMITIVE（MODE 2 の追加分）
     操作面（コンソール）と状態色。固定列。中間値を発明しない。
     ========================================================== */

  --p-console-950: #0d141b;
  --p-console-900: #131b23;
  --p-console-800: #1a242e;
  --p-console-700: #26323d;

  --p-state-idle: #9fb1bd;
  --p-state-active: #6fcfc2;
  --p-state-hold: #f0b45c;
  --p-state-done: #8ed48c;
  --p-state-over: #ff9384;


  /* ==========================================================
     2. SEMANTIC（MODE 2 の追加分）
     役割で名前を付ける。Primitive だけを参照する（TD-1）。
     ========================================================== */

  /* 2.1 操作面（製品UIが載る面。ページ本体の面とは別に持つ） */
  --color-console: var(--p-console-900);
  --color-console-raised: var(--p-console-800);
  --color-console-track: var(--p-console-700);
  --color-console-deep: var(--p-console-950);

  /* 2.2 業務状態（色だけで伝えない。site.css 側で形と文字を必ず併用する） */
  --color-state-idle: var(--p-state-idle);
  --color-state-active: var(--p-state-active);
  --color-state-hold: var(--p-state-hold);
  --color-state-done: var(--p-state-done);
  --color-state-over: var(--p-state-over);

  /* 2.3 密度（読ませる面より詰める。docs/06 §5 PROFILE B） */
  --space-cell: var(--p-space-2);
  --space-cell-lg: var(--p-space-3);
}