/* ═══════════════════════════════════════════════════════════
   tokens.css — デザイントークン
   ★ このファイルはソル（デザイン担当）の管轄です ★

   実装側（app.js / layout.css）はこの変数しか参照しません。
   ここを書き換えるだけで見た目が全部変わります。
   下の値は「動作確認用の仮」です。遠慮なく全部差し替えてください。
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── 基本 ────────────────────────────────────────────── */
  --km-bg:            #090d09;
  --km-fg:            #f6f1d8;
  --km-fg-dim:        #a8ab8d;
  --km-surface:       rgba(13, 19, 12, 0.94);
  --km-surface-2:     rgba(18, 25, 16, 0.98);
  --km-border:        rgba(222, 187, 104, 0.38);

  --km-font:          "Avenir Next Condensed", "DIN Alternate", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --km-radius:        4px;
  --km-radius-chip:   3px;

  /* フィールドオペレーションUI */
  --km-gold:          #e0b663;
  --km-gold-bright:   #ffd987;
  --km-lime:          #c8f36a;
  --km-olive:         #778655;
  --km-ink:           #090d09;
  --km-danger:        #9d5f46;
  --km-grid:          rgba(200, 243, 106, 0.055);

  /* ── 吉凶の色（地図の扇形）────────────────────────────
     *-fill  : 塗り
     *-stroke: 輪郭
     *-alpha : 塗りの不透明度 0〜1
     見やすさの肝はここ。移動中に一瞥で分かる強さにすること。 */

  --km-daikichi-fill:   #e7ff93;
  --km-daikichi-stroke: #f4ffbd;
  --km-daikichi-alpha:  0.46;

  --km-kichi-fill:      #a9df5c;
  --km-kichi-stroke:    #d4f58e;
  --km-kichi-alpha:     0.32;

  --km-heion-fill:      #72795c;
  --km-heion-stroke:    #a4aa83;
  --km-heion-alpha:     0.10;

  --km-kyo-fill:        #25291f;
  --km-kyo-stroke:      #806f4e;
  --km-kyo-alpha:       0.42;

  --km-daikyo-fill:     #080b08;
  --km-daikyo-stroke:   #654638;
  --km-daikyo-alpha:    0.68;

  --km-sector-weight:        1.5;
  --km-sector-stroke-alpha:  0.78;
  --km-sector-alpha:         0.34;

  /* ── 破の帯（30度の細帯）──────────────────────────── */
  --km-ha-fill:   #a65e3f;
  --km-ha-stroke: #e3945d;
  --km-ha-alpha:  0.28;

  /* ── 距離リング ──────────────────────────────────── */
  --km-ring-stroke: #d9c887;
  --km-ring-weight: 1;
  --km-ring-alpha:  0.42;
  --km-ring-dash:   2 6;

  /* ── ピン ───────────────────────────────────────── */
  --km-pin-origin: #ffd06c;
  --km-pin-me:     #c9ff72;

  /* ── UI パーツ ──────────────────────────────────── */
  --km-chip-bg:        rgba(77, 88, 55, 0.38);
  --km-chip-bg-on:     #d4ef79;
  --km-chip-fg:        #d8d7bb;
  --km-chip-fg-on:     #11170d;
  --km-chip-h:         44px;
  --km-tap-min:        44px;

  --km-safe-top:    env(safe-area-inset-top, 0px);
  --km-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ── コンパス連動の地図回転（app.jsが書き込む）──── */
  --km-heading: 0deg;

  /* ── 地図タイルの調整（暗色UIに合わせる場合）───── */
  --km-tile-filter: grayscale(.9) sepia(.34) hue-rotate(35deg) brightness(.48) contrast(1.22) saturate(.78);
}

/* ライトテーマにする場合はここを埋める（現状は未使用） */
@media (prefers-color-scheme: light) {
  :root {
    /* --km-bg: #fbfbf9; --km-fg: #1a1c1f; ... */
  }
}