/* ============================================================
   ReAM インセンティブ計算システム — デザイントークン v1.0
   社内業務ツール / 高密度 / 可読性重視 / 落ち着いた配色
   ============================================================ */

:root {
  /* --- Neutrals (cool-neutral ramp) --------------------------- */
  --bg:            #f3f4f6;   /* app background            */
  --surface:       #ffffff;   /* cards, tables             */
  --surface-2:     #f8f9fb;   /* zebra rows, subtle panels */
  --surface-3:     #eef0f3;   /* inset / header fill       */
  --border:        #e3e6ec;   /* hairlines                 */
  --border-strong: #cdd2db;   /* dividers, inputs          */

  --ink-1: #1b1e25;  /* primary text     */
  --ink-2: #565d6b;  /* secondary text   */
  --ink-3: #888e9b;  /* muted / captions */
  --ink-on: #ffffff; /* text on dark/brand */

  /* --- Brand (calm indigo-blue, primary action) -------------- */
  --brand:        #2f56c8;
  --brand-hover:  #2545a8;
  --brand-weak:   #eef2fd;
  --brand-border: #c8d6f6;

  /* --- 金額3状態 (money states) ------------------------------ */
  /* 確定 FINALIZED / PAID — settled green                        */
  --ok:        #1f7a4d;
  --ok-bg:     #e7f4ec;
  --ok-border: #b6dec8;
  --ok-strong: #166a41;   /* PAID solid fill */

  /* 暫定 PROVISIONAL — soft slate, not yet locked                */
  --prov:        #5a6883;
  --prov-bg:     #eef1f6;
  --prov-border: #d2d9e6;

  /* 保留 HELD — amber, frozen / unconfirmed                      */
  --hold:        #b0760c;
  --hold-bg:     #fbf2dd;
  --hold-border: #eed7a3;

  /* SLA超過 / danger — escalation red                            */
  --alert:        #c0392b;
  --alert-bg:     #fbe9e6;
  --alert-border: #f0c3bc;

  /* --- Radius / shadow / spacing ----------------------------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(20,24,33,.06);
  --shadow-md: 0 4px 14px rgba(20,24,33,.08);

  /* --- Type ------------------------------------------------- */
  --font-sans: "Noto Sans JP", system-ui, sans-serif;
  /* 金額・数値フォント（tabular-nums で桁揃え）— Space Grotesk */
  --font-mono: "Space Grotesk", ui-monospace, monospace;
  --font-num: "Space Grotesk", ui-monospace, monospace;
}

/* tabular figures helper for all money / numeric columns (Space Grotesk) */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}