/* public/assets/tokens.css — 凍結スタイルキー（共有凍結物・変更禁止）
 *
 * 正典: モック/凍結メモ.md「凍結スタイルキー（全画面共通・変更禁止）」
 *   薄グレー#f4f6f9背景・白カード・青#0f62fe アクセント・会社ごとの細いカラーバー
 *   日本語ゴシック・数字タブラー・密度中・ライトテーマ
 *   ホームのみ濃紺#12263f→青グラデの経営サマリ帯
 *   乖離警告=黄色・未入力=赤バッジ・新規創出=紫チップ・許諾/機密=鍵アイコン
 *
 * ビュー側の CSS（public/assets/views/*.css）はここの変数だけを使い、色を直書きしない。
 */

:root {
  /* ---- 面の色（ライトテーマ固定） ---- */
  --bg: #f4f6f9;            /* 画面背景（薄グレー） */
  --surface: #ffffff;       /* 白カード */
  --surface-2: #fafbfd;     /* 表のゼブラ・入れ子カード */
  --border: #e2e6ee;
  --border-strong: #cbd3e1;

  /* ---- 文字 ---- */
  --text: #12263f;          /* 濃紺。本文もこの色（黒を使わない） */
  --text-muted: #5b6b83;
  --text-faint: #8a97ab;
  --text-on-dark: #ffffff;

  /* ---- アクセント（青） ---- */
  --accent: #0f62fe;
  --accent-hover: #0043ce;
  --accent-weak: #e8f0ff;
  --accent-ring: rgba(15, 98, 254, 0.28);

  /* ---- サマリ帯（ホームのみ・濃紺→青グラデ） ---- */
  --navy: #12263f;
  --band: linear-gradient(100deg, #12263f 0%, #16355c 52%, #0f62fe 100%);

  /* ---- 状態色（凍結の意味づけ） ---- */
  --warn: #b07500;          /* 乖離＝黄色（文字色） */
  --warn-bg: #fff5d6;
  --warn-border: #f0c85a;

  --danger: #b32020;        /* 未入力＝赤バッジ */
  --danger-bg: #ffe9e9;
  --danger-border: #f0a3a3;

  --newvalue: #6a2fbf;      /* 新規創出＝紫チップ */
  --newvalue-bg: #f2eaff;
  --newvalue-border: #cbb0f0;

  --ok: #17643b;            /* 実現・裏取り済み */
  --ok-bg: #e4f5eb;
  --ok-border: #9fd4b7;

  --neutral: #4a5a72;
  --neutral-bg: #eef1f6;
  --neutral-border: #d3dae5;

  /* ---- タイポグラフィ（日本語ゴシック・数字タブラー） ---- */
  --font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo,
               "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "SF Mono", "Consolas", "Roboto Mono", ui-monospace, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --lh: 1.7;

  /* ---- 余白（密度中・8pt基準） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- 形 ---- */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(18, 38, 63, 0.06), 0 4px 12px rgba(18, 38, 63, 0.05);
  --shadow-modal: 0 12px 40px rgba(18, 38, 63, 0.24);
  --bar-w: 4px;             /* 会社ごとの細いカラーバー */

  /* ---- 操作要素の最小寸法（3幅レスポンシブの機械判定に使う） ---- */
  --tap-min: 44px;

  /* ---- レイアウト ---- */
  --header-h: 56px;
  --page-max: 1360px;
  --z-modal: 100;
  --z-header: 50;
}

/* 数字はどこでもタブラー（桁が揃わないと突合ボードが読めない） */
.num,
.tabnum,
td.num,
th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}