/* ============================================================
   デザイントークン（2026 ビジュアルリニューアル版・ライトクローム）
   ------------------------------------------------------------
   方針: 全面ライトクローム。白のサイドナビ＋薄グレーのコンテンツ面。
   - コンテンツ面は白基調＋寒色ニュートラル。主要な面に暖色（赤み > 青み）は使わない
   - サイドナビ・ブランド行・デモ注記バーも明るい面で統一し、暗い大面積を残さない
   - 単色ブルーのプライマリ。紫・グラデーション・発光・半透明ガラスは不使用
   - 文字色はインク／ミュートの2種＋リンク・アクティブのアクセント青のみ
   - カードは角丸14px（モーダルのみ16px）、チップ・タグ・バッジはピル型
   - 左アクセントバー付きのボックスは使わない（フラットな四辺ボーダーのカードで表現）
   - 状態色は必ず文字ラベル・記号と併用する（色だけで意味を伝えない）
   ============================================================ */

:root {
  /* ---- 面・境界（寒色ニュートラル） ---- */
  --c-app-bg:        #f5f7fa;
  --c-surface:       #ffffff;
  --c-surface-sub:   #f8fafc;
  --c-surface-head:  #f2f5f9;
  --c-hover:         #f3f6fb;
  --c-border:        #e4e8ef;
  --c-border-soft:   #edf0f6;
  --c-border-strong: #ccd5e1;

  /* ---- 文字（インク＋ミュートの2種のみ。-2 / -3 は互換のため同値） ---- */
  --c-text:    #0f1a2b;
  --c-text-2:  #556478;   /* ミュート。最も淡い面 #f5f7fa 上でもコントラスト比 4.5:1 以上 */
  --c-text-3:  #556478;   /* ミュート（--c-text-2 と同値。参照互換のため残置） */

  /* ---- ナビゲーション（白のライトサイドバー） ---- */
  --c-nav-bg:      #ffffff;
  --c-nav-line:    #e4e8ef;
  --c-nav-text:    #556478;
  --c-nav-text-hi: #0f1a2b;
  --c-nav-active:  #eef4ff;
  --c-nav-hover:   #f3f6fb;
  --c-nav-dim:     #556478;
  --c-nav-card:    #f8fafc;

  /* ---- デモ注記バー（明るいユーティリティバー＋濃色テキスト） ---- */
  --c-demobar-bg:   #f2f5f9;
  --c-demobar-line: #e4e8ef;
  --c-demobar-text: #556478;

  /* ---- プライマリ（単色ブルー） ---- */
  --c-accent:        #2563eb;
  --c-accent-hover:  #1d4fd8;
  --c-accent-active: #173fb0;
  --c-accent-weak:   #eef4ff;   /* アクセント文字 #2563eb とのコントラスト比 4.6:1 */
  --c-accent-line:   #c5d7fa;
  --c-accent-ondark: #2563eb;   /* 旧ダーククローム用。ライト化に伴いアクセントと同値 */

  /* ---- フォーカス ---- */
  --c-focus: #2f6fee;

  /* ---- 注意・エラー・成功（状態表示専用。面には使わない） ---- */
  --c-danger:      #c33227;
  --c-danger-weak: #fdecea;
  --c-danger-line: #f2c4bf;
  --c-warn:        #7d5300;
  --c-warn-weak:   #fdf1da;
  --c-warn-line:   #ecd9a5;
  --c-ok:          #157a4f;
  --c-ok-weak:     #e3f5ec;
  --c-ok-line:     #b0dfc7;

  /* ---- ステータス色（文字ラベル・記号と必ず併記） ---- */
  --s-draft-bg:#eef1f5; --s-draft-line:#d6dde5; --s-draft-fg:#4b586a; --s-draft-mark:#7b8697;
  --s-recv-bg:#e9f1fe;  --s-recv-line:#c0d5f8;  --s-recv-fg:#124fbe;  --s-recv-mark:#2b6ce4;
  --s-check-bg:#fdf1da; --s-check-line:#ecd99e; --s-check-fg:#795200; --s-check-mark:#af7d09;
  --s-back-bg:#fdeade;  --s-back-line:#f2c8a3;  --s-back-fg:#93440c;  --s-back-mark:#d47a26;
  --s-ship-bg:#e0f3f6;  --s-ship-line:#a9dde5;  --s-ship-fg:#0d6373;  --s-ship-mark:#178fa6;
  --s-done-bg:#e3f5ec;  --s-done-line:#aee0c6;  --s-done-fg:#14764c;  --s-done-mark:#1f9d66;
  --s-void-bg:#fdecea;  --s-void-line:#f2c4bf;  --s-void-fg:#af2a1f;  --s-void-mark:#cf372a;

  /* ---- タイポグラフィ ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo,
               "Noto Sans JP", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15.5px;
  --fs-lg: 18px;
  --fs-xl: 22px;

  /* ---- 余白・寸法 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;

  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --nav-w: 244px;
  --main-x: 32px;       /* メイン領域の左右余白（画面幅に応じて変える） */
  --tap: 44px;          /* タッチ操作の最小サイズ */

  /* 影は下方向のドロップシャドウのみ（発光表現は使わない） */
  --shadow-card:  0 1px 2px rgba(15, 26, 43, .05), 0 2px 6px rgba(15, 26, 43, .04);
  --shadow-pop:   0 8px 24px rgba(15, 26, 43, .13);
  --shadow-modal: 0 24px 64px rgba(15, 26, 43, .28);

  --transition: .15s ease;
}