/* =============================================================================
   tokens.css — ルーサムAI クライアント管理ワークスペース
   デザイントークン（README §4 / モック 01.DESIGN SYSTEM の確定値）
   ※ ここの値は「確定」。色・余白・タイポを個別ファイルで直書きしないこと。
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     4-1. カラー
     --------------------------------------------------------------------------- */

  /* Brand */
  --navy:        #1F3864;  /* Primary。ヘッダー、見出し、CTA */
  --navy-dark:   #142545;  /* hover / active */
  --gold:        #B8893A;  /* Accent。「試してみる」「次の一手」 */
  --gold-tint:   #F5EBD6;  /* クライアント側コメント欄背景 */

  /* Surfaces */
  --paper:       #F6F4EE;  /* アプリ地色（紙の温度感） */
  --surface:     #FFFFFF;  /* カード・パネル */
  --surface-alt: #FAF8F2;  /* セクション間のグルーピング / インライン編集hover */
  --border:      #E8E2D4;  /* 罫線 */
  --border-soft: #F0EDE3;  /* 行区切り */

  /* 補助サーフェス（モックで繰り返し登場する確定値） */
  --gold-tint-soft: #FBF8F0;  /* 当月セル背景 / 3体目候補カード背景 / クライアント発言帯 */
  --gold-tint-line: #E8DCC0;  /* gold-tint 上のボーダー */

  /* Text */
  --text:        #1A1A1A;  /* 本文（見出し・カードタイトル） */
  --text-body:   #3A3A3A;  /* 段落本文 */
  --text-muted:  #6B6258;  /* メタ・補助 */
  --text-faint:  #9A9286;  /* キャプション・無効 */

  /* Status — 5段階＋やらない（進行段階。優先度とは独立した軸） */
  --status-plan-bg:      #EEF0F4;  --status-plan-fg:     #5B6477;  --status-plan-dot:     #8B95A8;  /* ① 計画中  PLAN */
  --status-dev-bg:       #E8F0F8;  --status-dev-fg:      #2E5B85;  --status-dev-dot:      #4A7BA8;  /* ② 構築中  DEV */
  --status-deliver1-bg:  #EEF3E8;  --status-deliver1-fg: #4B6C3D;  --status-deliver1-dot: #6B8E5A;  /* ③ 一次納品 DELIVER1 */
  --status-improve-bg:   #F7EEDF;  --status-improve-fg:  #8B6420;  --status-improve-dot:  #C68A47;  /* ④ 改善中  IMPROVE */
  --status-done-bg:      #E5ECE7;  --status-done-fg:     #2D5A3D;  --status-done-dot:     #2D5A3D;  /* ⑤ 最終納品 DONE */
  --status-nogo-bg:      #EEEBE4;  --status-nogo-fg:     #7A736A;  --status-nogo-dot:     #B3ADA1;  /* ✕ やらない NO_GO */

  /* Priority — 3段階（注力度合い。ステータスとは独立） */
  --prio-high-bg: #FBEEEC;  --prio-high-fg: #B84A39;  /* 高 */
  --prio-mid-bg:  #F7EEDF;  --prio-mid-fg:  #8B6420;  /* 中 */
  --prio-low-bg:  #EEEBE4;  --prio-low-fg:  #6B6258;  /* 低 */

  /* Semantic */
  --alert-bg:   #FBEEEC;  --alert-fg:   #B84A39;  /* 期限超過・エラー */
  --caution-bg: #F7EEDF;  --caution-fg: #8B6420;  /* 期限間近 */
  --success-bg: #E5ECE7;  --success-fg: #2D5A3D;  /* 完了・保存済 */

  /* コメント帯（発言者で色帯を分ける。§5-6） */
  --thread-client-bg:   #FBF8F0;  --thread-client-bar:  #B8893A;  /* クライアント発言 */
  --thread-en-bg:       #EEF3F8;  --thread-en-bar:      #4A7BA8;  /* エン発言 */
  --thread-cp-bg:       #F7EEDF;  --thread-cp-bar:      #C68A47;  /* CP発言 */

  /* ---------------------------------------------------------------------------
     4-2. タイポグラフィ
     --------------------------------------------------------------------------- */
  --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;  /* 数字・日付・ID は固定幅 */

  /* タイプスケール（size / weight / line-height / letter-spacing） */
  --fs-display: 48px; --lh-display: 1.25; --ls-display: -0.01em;   /* 大見出し（カバー） 700 */
  --fs-section: 28px; --lh-section: 1.4;  --ls-section: -0.005em;  /* セクションタイトル 700 */
  --fs-client:  22px; --lh-client:  1.5;                           /* クライアント名 700 */
  --fs-card:    16px; --lh-card:    1.6;                           /* カードタイトル・AI社員名 600 */
  --fs-body:    13px; --lh-body:    1.8;                           /* 本文・コメント・説明 400 ← 日本語1.7-1.8死守 */
  --fs-meta:    11px; --lh-meta:    1.6;  --ls-meta:   0.04em;     /* メタ・担当者名・日付 500 */
  --fs-label:   10px; --lh-label:   1.6;  --ls-label:  0.15em;     /* CATEGORY LABEL（UPPER） 600 */

  /* ---------------------------------------------------------------------------
     4-3. スペーシング（8px ベース。タイトめ運用 / 主に 12·16·24）
     --------------------------------------------------------------------------- */
  --space-0_5: 4px;
  --space-1:   8px;
  --space-1_5: 12px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-6:   48px;
  --space-8:   64px;

  /* ---------------------------------------------------------------------------
     4-4. 角丸・影・罫線
     --------------------------------------------------------------------------- */
  --radius-sm:     2px;    /* ピル・ボタン（業務ツールの硬さ） */
  --radius-md:     3px;    /* インライン編集枠・小カード */
  --radius-lg:     4px;    /* カード・パネル */
  --radius-pill:   999px;  /* バッジ */
  --radius-mobile: 8px;    /* モバイル要素 */

  --shadow-card:    0 1px 2px rgba(20, 37, 69, 0.06);
  --shadow-mock:    0 8px 32px rgba(20, 37, 69, 0.08);
  --shadow-popover: 0 8px 24px rgba(20, 37, 69, 0.25);
  --shadow-hover:   0 3px 8px rgba(0, 0, 0, 0.08);   /* §6-4 カードhover */

  /* フォーカスリング（§6-3） */
  --focus-ring: 0 0 0 3px rgba(31, 56, 100, 0.12);

  /* ---------------------------------------------------------------------------
     4-5. アイコン（Lucide / 線2px / 14·16·20）— サイズの基準値
     --------------------------------------------------------------------------- */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;

  /* レイアウト（モックの確定値） */
  --layout-max:    1320px;  /* コンテンツ最大幅 */
  --side-col:      320px;   /* ワークスペース サイドカラム幅 */
  --touch-min:     44px;    /* モバイル タッチターゲット最小（§3-4） */
  --transition-card: 0.15s; /* §6-4 */
  --transition-btn:  0.1s;  /* §6-4 ボタンは背景色のみ */
}