/* 配色などの変数。4画面すべてが読む。ここを変えると全画面に反映される */

:root{
  --red:#d0021b;
  --red-dark:#a00115;
  --red-tint:#fff5f6;
  --red-line:#e39aa4;
  --ink:#1a1a1a;
  --muted:#8a8a8a;

  /* select の矢印アイコン（base.css）。データURIを1か所にまとめておき、
   * 各画面の select が個別に background:#fff（ショートハンド）で上書きした
   * ときも background-color に直すだけでこの変数の image は消えずに残る。 */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238a8a8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ── 自社清掃手配の色 ──
   *
   * 赤は外部の清掃会社を含む画面全体の基調なので、自社清掃手配だけ別の色にして
   * 一覧の中で見分けられるようにする。**この色が出ていたら自社**という意味に
   * そろえてあるので、自社を指すところ以外には使わない。
   *
   * 状態を表す色（緑＝確認済み・橙＝依頼・青＝当日チェックイン）と
   * ぶつからない濃紺を選んである。 */
  --self:#1e3a8a;
  --self-dark:#172e6d;
  --self-tint:#eef3ff;
  --self-line:#93b2ea;

  /* ── 戸建て清掃手配の色 ──
   *
   * 自社清掃手配と同じく、フロントが直接手配する会社なので専用の色にして
   * 区別する（ユーザー指定で緑）。「確認済み」の緑（#059669）とは別の
   * 濃さにして、状態のバッジと取り違えないようにしてある。 */
  --detached:#15803d;
  --detached-dark:#116932;
  --detached-tint:#eafbf0;
  --detached-line:#6bbf89;

  /* ── 枠線 ──
   *
   * 以前の #e8e8e8 は白地に対して薄すぎ、カードの区切りが目で追えなかった。
   * 設定画面の手配先ブロック（.co-block）だけが濃い線を直接書いていて
   * 見やすかったので、その値に全体をそろえた（2026-08-04）。
   *
   * さらに 2026-09-04、「システム全体的に枠線・区切り線が薄く視認性が低い」
   * との指摘で濃くした（#d5d5d5→#949494 / #ececec→#b8b8b8）。事務所の
   * 明るい照明の下や、角度の付いたノートPCの画面では #d5d5d5 は白地に
   * ほぼ溶けていた。白地に対するコントラスト比は 1.47→3.03（--line）、
   * 1.18→1.98（--line-soft）。--line は入力欄・ボタンなど「操作できる部品」
   * の枠にも使うので、WCAG 1.4.11 が非文字コントラストに求める 3:1 を
   * 満たす値まで上げた。ブラウザ標準の入力欄の枠（Chrome は #767676 相当）
   * よりはまだ薄いので、この画面だけ枠が浮いて見えることはない。
   *
   * **枠線の濃さを変えるときは、この2つと下の *-line 系を直せばよい。**
   * 画面ごとの css は原則この変数を見ている。
   *
   * --line      … 枠・区切りの既定。これを使う
   * --line-soft … 同じ箱の中をさらに細かく割るときだけ。濃い線が続くと
   *               うるさくなるところ（表の行の区切りなど）に使う
   *
   * どちらも**線の色**で、塗りつぶしや文字色には使わない。濃くしたので、
   * 塗りに使うと上に載る文字が読めなくなる（読み取り専用の入力欄が実際に
   * そうなりかけたため dashboard.css で個別の色に分けた）。
   *
   * バッジ（.ex-badge / .p-kind / .s-req など）の淡い枠線は、色が状態と
   * 結び付いていて共通化できないので各画面の css に直接書いてある。
   * それらも同じ 2026-09-04 の見直しで、色相はそのままに1段濃くした
   * （#a7f3d0→#10b981、#fde68a→#f59e0b、#f2c890→#d98e33 など）。
   * 下地（バッジの塗り）に対して 1.1〜1.5 しかなく枠の有無すら分からな
   * かったものを 2.0〜2.7 にしてある。新しいバッジを足すときも、塗りに
   * 対して 2 以上になる枠線色を選ぶこと。
   */
  --line:#949494;
  --line-soft:#b8b8b8;

  /* ── 文字 ──
   *
   * 日本語のグリフを持つフォントを、OSごとに必ず1つは当てるための並び。
   * 英数字と日本語は別々のフォントに落ちる（1文字ずつ後ろへ探しに行く）ので、
   * 前半で英数字、後半で日本語が決まる。
   *
   * 以前は Segoe UI → Hiragino Sans → Noto Sans JP → sans-serif だったが、
   * Segoe UI は日本語を持たず、Hiragino は mac 専用、Noto Sans JP は
   * Windows に入っていないため、Windows では日本語が sans-serif（＝ブラウザ
   * まかせ）に落ちて、環境ごとに別のフォントで表示されていた。
   *
   *   Windows … BIZ UDPGothic（Win10 1809 以降に標準搭載）。
   *             UD＝ユニバーサルデザイン。読み違えにくさを目的に作られた書体で、
   *             部屋番号を並べて速く読むこの画面に向く。
   *             無い環境は Yu Gothic UI → Meiryo へ。
   *   mac/iOS … Hiragino Sans
   *   Android … Noto Sans JP
   */
  --font-sans:
    system-ui, -apple-system, "Segoe UI",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "BIZ UDPGothic", "Yu Gothic UI", Meiryo,
    "Noto Sans JP", sans-serif;

  /* URL やコードなど、字形を見分けたいところ用 */
  --font-mono:
    ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
    "BIZ UDGothic", Menlo, monospace;

  /* ── ページの横幅 ──
   *
   * header / main / footer の3つが同じ幅で揃っていないと、ヘッダーと本文の
   * 左端がずれる。以前は3つの max-width を画面ごとに手で書いていて、
   * 8つの css に同じ値が並んでいた（片方だけ直すと footer だけずれる）。
   * base.css がこの変数を見るので、**画面側は幅の1行だけを上書きすればよい。**
   *
   *   1160px … 既定（ダッシュボード・施設管理・自社清掃員管理）
   *   1400px … 横に長い表を出す画面（戸建て・シフト確認・レポート系）
   *    900px … 手配先の画面（vendor.html。1社ぶんだけなので狭くてよい） */
  --page-max: 1160px;
}