/* ============================================================================
   UIデザイントークン(正本: docs/ui_design_system.md)
   ----------------------------------------------------------------------------
   このファイルはトークン定義のみを行う。どこからも <link> / @import されて
   いない = 現状の表示に影響ゼロ(フェーズ1で初めて読み込みが入る、
   docs/ui_design_system.md §6 移行計画を参照)。

   各トークンの「値・用途・使ってよい場面/使ってはいけない場面」の説明文は
   このファイルではなく docs/ui_design_system.md §1 に置く(正本を1箇所に
   保つため、ここにはコメントを増やさない)。値を変えるときは必ずdocs側の
   説明文とセットで更新すること。
   ============================================================================ */

:root {
  /* --- 背景(近黒4段) --- */
  --ui-bg-deepest: #07090d;
  --ui-bg-panel:   #14181f;
  --ui-bg-inset:   #202938;
  --ui-bg-raised:  #3a4152;

  /* --- 金属グレー(4段) --- */
  --ui-metal-1: #4a5364;
  --ui-metal-2: #6b7688;
  --ui-metal-3: #8b93a5;
  --ui-metal-4: #c3ccdb;

  /* --- 金(3段のみ) --- */
  --ui-gold:        #ffcf4a;
  --ui-gold-bright: #ffe36a;
  --ui-gold-dim:    #6a5121;

  /* --- アクセント --- */
  --ui-accent-cyan: #79f5e7;
  --ui-danger:      #ff645c;
  --ui-heal:        #79f5a8;
  --ui-poison:      #b8d94a;
  /* ワームの毒の痕(2026-08-28 ディレクター指示: プレイヤーの毒と区別する紫)。
     canvas側(game/worm-behaviors.js rebuildSlimeChunk)はこの値を写して使う。
     レアリティepic(#b777ff)と喧嘩しないやや濃い紫。 */
  --ui-poison-worm: #a04ad4;

  /* --- レアリティ6色(既存 --rarity-color の実値を正とする) --- */
  --ui-rarity-common:    #aeb7c5;
  --ui-rarity-uncommon:  #5ad17f;
  --ui-rarity-rare:      #58b9ff;
  --ui-rarity-epic:      #b777ff;
  --ui-rarity-legend:    #ffd35a;
  --ui-rarity-mythic:    #c9a7ff;

  /* --- ブランチ色(既定値。個別ブランチは要素側のインラインstyleで上書きする) --- */
  --ui-branch-color: #79f5e7;

  /* --- 文字(3段) --- */
  --ui-text:       #f1e9cf;
  --ui-white:      #ffffff; /* 数値強調など純白が仕様の箇所専用 */
  --ui-text-dim:   #c8c0ad;
  --ui-text-faint: rgba(241, 233, 207, 0.45);

  /* --- 移行フェーズ1(2026-09-03)で追加: styles/*.css の生値置換に伴う新設トークン。
     直書き禁止・追加はここへ、の運用は docs/ui_design_system.md §7 参照。 --- */

  /* ゲームパッドABXYグリフ色(.ui-glyph.is-a/b/x/y, .hud-pad-key.is-a/b/x/y)。
     実機ボタン配色を彩度・明度だけ一段落として使う。 */
  --ui-pad-a: #3a7429;
  --ui-pad-b: #8e2716;
  --ui-pad-x: #1c3d78;
  --ui-pad-y: #9c8420;

  /* 2P識別色(1P=金/2P=この青)。深度メーターのマーカー色と対応させる。 */
  --ui-player2: #5cd6ff;

  /* ミシックレアリティの多色縁取り(--ui-rarity-mythicと組み合わせて使う)。 */
  --ui-mythic-glow-a: #ff7ac6;
  --ui-mythic-glow-b: #6fd7e6;

  /* スキルツリー「改造(蒼)/増幅(橙)」の識別色(base-and-skill-tree.css の
     .skill-node--mod / .skill-node--overclock)。レアリティ専用配色とは別軸なので
     既存のrarity-*トークンへ寄せない。増幅側は下の --ui-ember-glow を共用する。 */
  --ui-skill-mod: #8fd8ff;

  /* --- 熱/警告アクセント(蒸気ドリル系の"焦げ"演出、脱出マーカー、ボム残数、
     過積載インライン表示、一時カード枠などで共通使用) --- */
  --ui-ember:       #ff9f5a;
  --ui-ember-glow:  #ffa84a;
  --ui-ember-glow2: #ff8a3c;
  --ui-ember-bright: #ffb36f;
  --ui-ember-pale:  #ffd9a8;
  --ui-ember-dim:   #2a160c;

  /* --- 破壊的操作(セーブスロット消去)の状態ランプ --- */
  --ui-danger-ramp-border:     #7a4a4a;
  --ui-danger-ramp-bg:         #241a1c;
  --ui-danger-ramp-text:       #d99a9a;
  --ui-danger-ramp-hover-text: #ffb3aa;
  --ui-danger-armed-bg:        #4a1d1d;
  --ui-danger-armed-text:      #ffd9d4;
  --ui-danger-select-bg:       #5c2222;
  --ui-danger-select-text:     #fff1ee;

  /* --- danger系グラデーション端点(HPゲージ・残り1分の点滅警告) --- */
  --ui-danger-dim:  #7a1c1c;
  --ui-danger-pale: #ffb0ac;
  --ui-danger-2:    #ff5d63;

  /* --- accent-cyan系グラデーション端点(シフトゲージ・タイムライン完了マーカー) --- */
  --ui-accent-cyan-dim:   #146066;
  --ui-accent-cyan-dim-2: #367980;

  /* --- 「信用」依頼ボードの古紙テーマ(.trust-card / .trust-quest 専用の
     独立配色。メインのUI配色とは別軸の挿絵表現なので混ぜない) --- */
  --ui-parchment-ink:           #2b1d12;
  --ui-parchment-glow-1:        #d6c199;
  --ui-parchment-glow-2:        #997c52;
  --ui-parchment-paper-1:       #cbb68d;
  --ui-parchment-paper-2:       #bda77c;
  --ui-parchment-paper-3:       #a88e63;
  --ui-parchment-fold:          #b09571;
  --ui-parchment-goal-ink:      #4a3524;
  --ui-parchment-step-ink:      #6b533a;
  --ui-parchment-bar-1:         #6b3b1c;
  --ui-parchment-bar-2:         #8c3b1f;
  --ui-parchment-done-ink:      #7d1c14;
  --ui-parchment-accent:        #9b2418;
  --ui-parchment-seal-1:        #d1452f;
  --ui-parchment-seal-2:        #a52a1c;
  --ui-parchment-seal-3:        #c0392b;
  --ui-parchment-seal-glow:     #d24a35;
  --ui-parchment-seal-shadow:   #6f150e;
  --ui-parchment-seal-text:     #f6e2c8;
  --ui-parchment-seal-highlight: #ff9a7f;
  --ui-parchment-seal-dark:     #4a0a06;

  /* --- RGB分解(半透明合成用)。 rgb(var(--x-rgb) / a) の形で使う。
     元トークンの値と必ず一致させる(値を変えたら両方更新)。 --- */
  /* 空白区切り(カンマ不可): rgb(var(--x-rgb) / a) は CSS Color 4 のスラッシュ構文なので
     コンポーネント側をカンマ区切りにすると構文エラーになり background 等の宣言ごと
     ブラウザに無視される(2026-09-03 実機で発覚・混入直後に是正)。 */
  --ui-bg-deepest-rgb:   7 9 13;
  --ui-bg-panel-rgb:     20 24 31;
  --ui-bg-inset-rgb:     32 41 56;
  --ui-gold-rgb:         255 207 74;
  --ui-gold-bright-rgb:  255 227 106;
  --ui-accent-cyan-rgb:  121 245 231;
  --ui-danger-rgb:       255 100 92;
  --ui-heal-rgb:         121 245 168;
  --ui-rarity-legend-rgb: 255 211 90;
  --ui-rarity-mythic-rgb: 201 167 255;
  --ui-text-rgb:         241 233 207;
  --ui-text-dim-rgb:     200 192 173;
  --ui-player2-rgb:      92 214 255;
  --ui-mythic-glow-b-rgb: 111 215 230;
  --ui-skill-mod-rgb:    143 216 255;
  --ui-ember-glow-rgb:   255 168 74;
  --ui-ember-glow2-rgb:  255 138 60;
  --ui-parchment-ink-rgb: 43 29 18;
  --ui-parchment-seal-highlight-rgb: 255 154 127;
  --ui-parchment-seal-dark-rgb: 74 10 6;

  /* --- タイポグラフィ: フォントファミリー(2系統) --- */
  --ui-font-mono:    "Courier New", ui-monospace, monospace;
  --ui-font-display: "Copperplate", "Trajan Pro", "Palatino", serif;

  /* --- タイポグラフィ: 固定ラダー(6段, px) --- */
  --ui-font-size-1: 11px;
  --ui-font-size-2: 13px;
  --ui-font-size-3: 16px;
  --ui-font-size-4: 20px;
  --ui-font-size-5: 26px;
  --ui-font-size-6: 34px;

  /* --- タイポグラフィ: 流動見出し(clampプリセット2種) --- */
  --ui-font-flow-hero:  clamp(1.7rem, 5vw, 2.7rem);
  --ui-font-flow-label: clamp(0.8rem, 0.85vw, 0.92rem);

  /* --- タイポグラフィ: weight / letter-spacing --- */
  --ui-weight-normal: 400;
  --ui-weight-bold:   700;
  --ui-tracking-normal: 0;
  --ui-tracking-wide:   0.08em;
}