/* =========================================================
   デザイントークン

   設計の方針:
   - 背景は白一色。ブロックの区切りは背景色ではなく余白と 1px 罫線で作る
   - 有彩色は損益（赤／青）だけに使う。資産クラスは紺のトーン8段階で表す
     → 画面上で色を持つのは「増えたか減ったか」だけになる
   - 紺（#002F6C）は v1 から据え置き
   ========================================================= */

:root {
  /* --- 紺（アクセント） --- */
  --navy:       #002F6C;   /* 基準色。ヘッダー・アクティブ状態・主ボタン */
  --navy-deep:  #001B40;   /* ヘッダー最上部・見出し */
  --navy-mid:   #1D4E96;   /* リンク・副次強調 */
  --navy-pale:  #E9EEF6;   /* 選択行・淡い面 */
  --navy-hair:  #C9D6E8;   /* 紺系の細い罫線 */

  /* --- 面と文字 --- */
  --paper:      #FFFFFF;   /* 背景 */
  --ink:        #0B1B33;   /* 本文。純黒を避け紺に寄せる */
  --ink-sub:    #4A5768;   /* 補足 */
  --ink-mute:   #8A94A3;   /* 三次情報・単位 */
  --rule:       #E6E9EF;   /* 罫線 */
  --rule-soft:  #F1F3F7;   /* 内側の弱い罫線 */
  --on-navy:    #FFFFFF;   /* 紺の上の文字 */
  --on-navy-sub: rgba(255, 255, 255, .62);

  /* --- 損益（画面上で唯一の有彩色） --- */
  --up:         #C8102E;   /* 上げ */
  --down:       #1F6FB2;   /* 下げ */
  --flat:       #8A94A3;

  /* --- 状態 --- */
  --ok:         #1A7F37;
  --warn:       #A8620C;
  --mask:       rgba(0, 15, 38, .42);

  /* --- 資産クラス8分類（紺トーン） ---
     data.js は var(--chart-N) を参照するだけなので、配色はここだけで決まる */
  --chart-1: #001B40;
  --chart-2: #0B3A78;
  --chart-3: #1D57A0;
  --chart-4: #3A76BE;
  --chart-5: #6595D2;
  --chart-6: #93B4E1;
  --chart-7: #BACEEC;
  --chart-8: #DBE5F4;

  /* --- タイポグラフィ ---
     Noto Sans JP を使う。Windows には可変フォント（NotoSansJP-VF）が同梱されており、
     ローカルから解決できるため Web フォントの読み込みは不要。
     可変フォントなので 400 / 500 / 700 の中間ウェイトが実際に出る。
     金額は tabular-nums で桁を揃える */
  --font: "Noto Sans JP", sans-serif;
  --font-num: "Noto Sans JP", sans-serif;

  --fs-hero:  42px;   /* 総資産 */
  --fs-3xl:   30px;   /* 画面の主数値 */
  --fs-2xl:   22px;
  --fs-xl:    17px;
  --fs-lg:    15px;
  --fs-md:    14px;   /* 本文 */
  --fs-sm:    12.5px;
  --fs-xs:    11.5px;
  --fs-label: 11px;   /* 字間を空けて使う小見出し */

  --lh-body: 1.7;
  --ls-label: .08em;  /* ラベルの字間。Noto は元の字間が広いため控えめにする */

  /* --- 余白 ---
     セクション間は 32〜40px を基準にする */
  --pad:      20px;   /* 画面の左右 */
  --gap-xs:   6px;
  --gap-sm:   12px;
  --gap:      20px;
  --gap-lg:   32px;   /* セクション間 */
  --gap-xl:   36px;   /* 大きな段落の切れ目 */

  --header-h: 52px;
  --tabbar-h: 60px;

  --radius: 10px;     /* 使うのはボタンとチップだけ。面には使わない */

  /* --- svg.js 向けの別名 ---
     js/svg.js の waterfall / spark / stackBar は
     --plus / --minus / --navy-700 / --navy-100 を関数内で直に参照する。
     svg.js を触らずに配色を効かせるため、ここで読み替える */
  --plus:      var(--up);
  --minus:     var(--down);
  --navy-700:  var(--navy);
  --navy-500:  var(--navy-mid);
  --navy-100:  var(--navy-pale);
  --navy-050:  #F4F7FB;
  --navy-300:  var(--navy-hair);
  --navy-800:  var(--navy-deep);
  --navy-900:  var(--navy-deep);
  --navy-600:  var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: none; }
}