/* ============================================================
   給与計算・シフト管理ツール — デザイントークン（単一の真実）
   ============================================================
   ◆◆◆ デザイン指定（厳守ルール・ここを基準に全画面を揃える）◆◆◆

   1. 色は「決まった4色」のみを基本とする（くすんだ・落ち着いたトーン）：
        ① 背景/白    --surface / --bg
        ② グレー     --border / --ink-3,4 など無彩色の濃淡
        ③ 文字インク  --ink / --ink-2
        ④ アクセント  --accent（くすんだディープグリーン #40605A）
      → 状態色（承認/差戻し/超過）だけは、彩度を大きく落とした
        success / warning / danger を「最小限」許可（くすみトーン）。
      → 色を変えるときは、この :root の該当変数を差し替えるだけで全画面に反映。
      → 原色・鮮やかな色は使わない。直書き(hex/rgb)を各HTMLに置かない。

   2. 角丸は完全丸（--r-pill）以外すべて小さい固定px（2/3/5/6px）。
      大きい角丸は使わない。

   3. 【禁止】左に縦線を入れるデザインは使わない。
      （サイドバーのツリー縦線・アクティブ項目の左縦バー・
        左ボーダーのアクセント帯・タイムラインの左縦線 等は不可）
      強調は「背景の塗り」「文字の太さ/濃さ」「小さな点」で表現する。

   4. トーンは業務効率重視で洗練。影は最小限（過剰装飾なし）。
      数値は等幅(.num)。フォントは Noto Sans JP + Inter。
   ============================================================ */

:root {
  /* ---- ④ アクセント（くすんだディープグリーン／後からここだけ変更可） ---- */
  --accent:          #40605A;   /* くすんだディープグリーン（落ち着いたトーン） */
  --accent-hover:    #375551;   /* hover/active */
  --accent-press:    #2C4642;   /* 押下 */
  --accent-soft:     #EAEFED;   /* アクセントの淡い背景（バッジ/選択行） */
  --accent-softer:   #F3F6F5;   /* さらに淡い背景（hover地） */
  --accent-on:       #FFFFFF;   /* アクセント上の文字色 */
  --accent-ring:     rgba(64,96,90,.22); /* フォーカスリング */

  /* ---- ①② ベース/グレー（無彩色スレート系・くすみ） ---- */
  --bg:              #F4F5F7;   /* アプリ背景 */
  --surface:         #FFFFFF;   /* カード/パネル */
  --surface-2:       #F8F9FB;   /* 副次パネル/ヘッダ地 */
  --surface-3:       #EFF1F4;   /* テーブルhover/ゼブラ */
  --border:          #E5E8EC;   /* 標準境界線 */
  --border-strong:   #D3D8DF;   /* 強調境界線 */

  /* ---- ③ 文字インク ---- */
  --ink:             #232A35;   /* 見出し/主要数値 */
  --ink-2:           #434C59;   /* 本文 */
  --ink-3:           #6B7480;   /* 補助/ラベル */
  --ink-4:           #9AA2AD;   /* 最も淡い/プレースホルダ */

  /* ---- 曜日の地色（カレンダー・シフト表で共用） ---- */
  --sat:             #5F7C93;   /* 土曜の文字 */
  --sat-bg:          #FAFBFC;   /* 土曜のセル地 */
  --sun-bg:          #FCFAFA;   /* 日曜・祝日のセル地 */

  /* ---- 状態色（最小限・彩度を落としたくすみトーン） ---- */
  --success:         #5E7E6E;  --success-soft: #EAF0EC;
  --warning:         #AE8447;  --warning-soft: #F5EFE4;
  --danger:          #A6584E;  --danger-soft:  #F3E8E6;
  --info:            var(--accent);  --info-soft: var(--accent-soft);

  /* ---- 角丸（完全丸 --r-pill 以外は小さい固定px・もう少し小さく） ---- */
  --r-xs:   2px;
  --r-sm:   3px;
  --r:      5px;    /* 標準（カード/入力/ボタン） */
  --r-lg:   6px;    /* 大きめカード/モーダル */
  --r-pill: 9999px; /* バッジ/アバター/円のみ */

  /* ---- 影（過剰装飾なし・最小限） ---- */
  --shadow-xs: 0 1px 2px rgba(35,42,53,.04);
  --shadow-sm: 0 1px 2px rgba(35,42,53,.04), 0 1px 3px rgba(35,42,53,.06);
  --shadow-md: 0 4px 12px -2px rgba(35,42,53,.08), 0 2px 6px -2px rgba(35,42,53,.06);
  --shadow-lg: 0 16px 40px -12px rgba(35,42,53,.16), 0 6px 16px -8px rgba(35,42,53,.10);

  /* ---- レイアウト寸法 ---- */
  --sidebar-w:        248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:         60px;
  --content-max:      1320px;

  /* ---- タイポ ---- */
  --font-sans: "Noto Sans JP","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:  "Inter","Noto Sans JP",system-ui,sans-serif;

  /* ---- モーション ---- */
  --ease: cubic-bezier(.2,.6,.3,1);
  --dur:  .18s;
}