/* デザインの値（トークン）。色・文字・行の高さ・余白・角・線・影・動き・部品の寸法は、ここ1か所で決める。
   部品の css はこの変数だけを使い、値を直に書かない。案件ごとに色を変える時は --hk-accent* だけを上書きする。
   名前は --hk- で始める（案件の画面の変数とぶつからないように）。
   元：Rootline の static/ui/tokens.css（26/10/15）を寄せ、動きの値と「動きを減らす」設定を足した。

   薄く見せない（visual-design-iteration の点検の観点 4b・メモ ui-not-too-pale-pro-designer）。白との比：
     本文・数字・見出し 7 以上（--hk-text 16.3）／補足の文字 4.5 以上（--hk-muted 8.5・--hk-text-2 8.9）
     入力欄・ボタンの枠・意味のある印 3 以上（--hk-line-ctl 3.4）／区切りの線 1.5 以上（--hk-line 1.6）
     色付きの背景は背景の差だけに頼らず、文字の色と組にする（淡い背景の上の --hk-ok・warn・danger・info は 7.6〜7.9、sky は 6.6）。
   増減の色 --hk-up 6.9・--hk-down 5.7。
   --hk-mark（4.1）は文字に使わず、印・アイコンだけに使う。
   左だけの色の線は使わない（メモ avoid-colored-left-border-ui）。面の区別は余白・文字・背景・全周の細い線で作る。 */
:root {
  /* 色：面 */
  --hk-bg: #f2f3f6; --hk-surface: #fff; --hk-surface-2: #f7f8fa; --hk-surface-3: #eef0f4;
  /* 色：線（飾りの区切り・強い区切り・入力欄とボタンの枠） */
  --hk-line: #c9ced8; --hk-line-strong: #aab1bc; --hk-line-ctl: #858d9a;
  /* 色：文字（本文・2番目・補足・印） */
  --hk-text: #182031; --hk-text-2: #3f4a5e; --hk-muted: #454d5b; --hk-mark: #767f8c;
  /* 色：案件の色（主ボタン・選んでいる印・リンク）。案件ごとに差し替えるのはここだけ */
  --hk-accent: #1f3fb3; --hk-accent-strong: #1c3aa8; --hk-accent-soft: #e8eeff; --hk-on-accent: #fff;
  /* 色：状態（文字・淡い背景・点と枠） */
  --hk-ok: #08553f; --hk-ok-soft: #e1f4ec; --hk-ok-dot: #13865f;
  --hk-warn: #6e4000; --hk-warn-soft: #fff1d6; --hk-warn-dot: #b86e00;
  --hk-danger: #8a1f1a; --hk-danger-soft: #fde9e7; --hk-danger-dot: #c4372f;
  --hk-info: #4a35a8; --hk-info-soft: #eeebfd; --hk-info-dot: #5b45c4;
  --hk-sky: #0b5a7a; --hk-sky-soft: #e0f2fb;
  --hk-neutral-soft: #eceef2;
  /* 色：数の増減。増えた＝青、減った＝朱色（真っ赤は避ける。資料の台帳 deck.md D040 と同じ決まり）。状態の色（ok・danger）とは分ける */
  --hk-up: #1558b0; --hk-down: #b93a0a;

  /* 文字：大きさ。本文は 14px 以上、12px は札・表の見出しなどの短い言葉だけ */
  --hk-font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  --hk-fs-xs: 12px; --hk-fs-sm: 13px; --hk-fs-md: 14px; --hk-fs-lg: 15px; --hk-fs-h3: 16px; --hk-fs-h2: 18px; --hk-fs-h1: 22px;
  --hk-fs-num-sm: 22px; --hk-fs-num: 28px;
  /* 文字：太さ・行の高さ */
  --hk-fw-md: 600; --hk-fw-bold: 700; --hk-fw-heavy: 800;
  --hk-lh: 1.6; --hk-lh-snug: 1.45; --hk-lh-tight: 1.3; --hk-lh-num: 1.25;

  /* 余白（4・6・8・10・12・16・20・24・32） */
  --hk-sp-1: 4px; --hk-sp-2: 6px; --hk-sp-3: 8px; --hk-sp-4: 10px; --hk-sp-5: 12px; --hk-sp-6: 16px; --hk-sp-7: 20px; --hk-sp-8: 24px; --hk-sp-9: 32px;

  /* 角・線・影 */
  --hk-radius-sm: 4px; --hk-radius: 6px; --hk-radius-md: 8px; --hk-radius-lg: 10px; --hk-radius-pill: 999px;
  --hk-bw: 1px;
  --hk-shadow-1: 0 1px 2px rgba(16,24,40,.06); --hk-shadow-2: 0 12px 32px rgba(16,24,40,.18);
  --hk-focus: 2px solid var(--hk-accent);
  /* 開いた画面（フィードバック・書き込み）の後ろを暗くする色 */
  --hk-backdrop: rgba(16, 24, 40, .5);

  /* 部品の寸法（入力欄・ボタンの高さ、札の高さ、i の印の大きさ、ボタンの中のアイコンの大きさ） */
  --hk-ctl-h: 36px; --hk-ctl-h-sm: 30px; --hk-tag-h: 26px; --hk-tag-h-sm: 24px; --hk-info-size: 22px; --hk-icon-size: 16px;
  /* 塗りや枠の線を持つ四角の中の字・印の上下の空き（字の見える上端・下端から枠の内側まで）。上と下の差は --hk-box-gap-diff 以内、どちらも --hk-box-gap-min 以上。決まりは web/README.md の「四角の中の上下の空き」 */
  --hk-box-gap-min: 5px; --hk-box-gap-diff: 1px;

  /* 動き：業務の画面は 0.15〜0.25 秒の短い物だけ（メモ business-ui-motion-feel） */
  --hk-t-fast: .15s; --hk-t-mid: .2s;
  --hk-ease-out: cubic-bezier(.2,.8,.2,1);
}

/* 狭い画面（スマホ。390・412 の幅）では、押せる物の高さを 44px 以上にする（~/.codex/guidance/development.md の13行・台帳 C2-076）。
   入力欄・ボタン・選ぶ欄・日付の欄・ファイルの選択は全部この値を使うので、並べた時の高さ・下端のそろいは崩れない。小さい形（sm）も同じ 44px。 */
@media (max-width: 480px) {
  :root { --hk-ctl-h: 44px; --hk-ctl-h-sm: 44px; }
}

/* 動きを減らす設定の時は、動きを止める（部品の JS も同じ設定を見て動きを出さない） */
@media (prefers-reduced-motion: reduce) {
  :root { --hk-t-fast: 0s; --hk-t-mid: 0s; }
}