/* tokens.css
 * 凍結モック mock/案3_ソフトポータル調.png から抽出したデザイントークン。
 * 色はモックからのスポイト値（PNG 実測）。ここ以外に生の色コードを書かないこと。
 */

:root {
  /* ---- 面（サーフェス）: 温かみのあるオフホワイト ---- */
  --bg:              #FDFCFA;  /* ページ地。ほんのり温かい白 */
  --bg-sidebar:      #FAF6F0;  /* サイドバー地。クリーム寄り */
  --surface:         #FFFFFF;  /* カード */
  --surface-sunken:  #FAF8F5;  /* カード内のへこみ・入力欄 */
  --hero-wash:       #B6E0E1;  /* ヘッダー右上の波形装飾（薄いミント） */

  /* ---- 文字 ---- */
  --text:            #1C202A;  /* 見出し・数値 */
  --text-body:       #3A414D;
  --text-muted:      #78808C;  /* 補助文・ラベル */
  --text-faint:      #A2A9B4;

  /* ---- 罫・境界 ---- */
  --line:            #ECE7E0;  /* カード枠・区切り */
  --line-soft:       #F3EFEA;
  --line-strong:     #E2E2E4;  /* 進捗の未通過コネクタ */

  /* ---- プライマリ（やわらかい緑） ---- */
  --primary:         #38B16E;
  --primary-strong:  #279C5E;
  --primary-tint:    #E1F0E8;  /* アイコンタイル */
  --primary-soft:    #E8F3EF;  /* ナビのアクティブ地 */
  --primary-line:    #B4DAC6;  /* 緑の下線 */

  /* ---- アクセント: オレンジ（作業中） ---- */
  --accent-orange:        #FCAF12;
  --accent-orange-text:   #B76017;
  --accent-orange-soft:   #FEF0DA;
  --accent-orange-line:   #FDD996;
  --accent-orange-tint:   #FDE9D4;

  /* ---- アクセント: 青（計画承認済・情報） ---- */
  --accent-blue:        #457ED3;
  --accent-blue-text:   #2B54AA;
  --accent-blue-soft:   #E2EBF9;
  --accent-blue-line:   #B1CCF1;
  --accent-blue-tint:   #E4F2F8;

  /* ---- アクセント: 朱（確認待ち・通知） ---- */
  --accent-red:        #EB6D4B;
  --accent-red-text:   #C4472A;
  --accent-red-soft:   #FDE5DB;
  --accent-red-line:   #FABEA8;
  --notify:            #F2645E;  /* 通知バッジ */

  /* ---- 無効・未通過 ---- */
  --muted-dot:       #BCBCBF;

  /* ---- KPI カードの淡色地とチップ ---- */
  --kpi-green-bg:    #F3F8F7;
  --kpi-green-chip:  #E6F2EF;
  --kpi-amber-bg:    #FEFAF2;
  --kpi-amber-chip:  #FDF4E5;
  --kpi-amber-text:  #5B4027;
  --kpi-pink-bg:     #FEF5F3;
  --kpi-pink-chip:   #FDEBE8;

  /* ---- チャート（ドーナツ）配色 ---- */
  --chart-1:         #91B5EA;  /* 青 */
  --chart-2:         #F8BD7C;  /* オレンジ */
  --chart-3:         #99CBAF;  /* 緑 */

  /* ---- 角丸: 大きめ ---- */
  --radius-xl:       20px;   /* カード外枠 */
  --radius-lg:       16px;   /* カード内の行ブロック */
  --radius-md:       12px;   /* ボタン・入力・アイコンタイル */
  --radius-sm:       8px;
  --radius-pill:     999px;  /* バッジ・ステップ円 */

  /* ---- 影: 弱く柔らかく ---- */
  --shadow-card:     0 1px 2px rgba(28, 32, 42, .04), 0 8px 24px rgba(28, 32, 42, .05);
  --shadow-row:      0 1px 2px rgba(28, 32, 42, .04);
  --shadow-pop:      0 8px 28px rgba(28, 32, 42, .12);

  /* ---- 余白（8pt グリッド） ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---- タイポ ---- */
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: 34px;  /* 会社名見出し */
  --fs-hero:    44px;  /* 大きな数値 */
  --fs-h2:      19px;
  --fs-h3:      16px;
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-xs:      11px;
  --lh-tight:   1.25;
  --lh-body:    1.7;

  /* ---- レイアウト ---- */
  --sidebar-w:  232px;
  --content-max: 1440px;
}