/*
 * Gazelle 顧客向け画面のデザイントークン（docs/spec/12_web_ui.md）。
 *
 * **カラーコードを書いてよいのはこのファイルだけである。** 他の CSS・テンプレート・
 * インラインスタイルは、ここで定義したカスタムプロパティを参照すること。色を 1 箇所に
 * 集約するのは、配色を変えるときに全画面を追いかけずに済ませるためである。
 *
 * 色の設計は「メインカラー 1 色の濃淡 6 段 + 状態色 3 色 + 中立色」である。濃淡の段は
 * 数字が大きいほど暗い。900 / 700 / 500 は白文字が、300 / 100 / 50 は黒文字が本文の
 * コントラスト基準（4.5:1）を満たす。**この境界をまたぐ組み合わせを使わないこと。**
 *
 * 印刷用の QR コード発行画面（S-06）はこのファイルを読み込まない。用紙とインクの制約から
 * 黒の文字と白の地に限定するためで、当該テンプレート内に印刷用のスタイルを持つ。
 */

:root {
  /* ========== メインカラーの濃淡 ========== */
  /* 括弧内は白文字 / 黒文字（--gz-ink-900）とのコントラスト比 */
  --gz-main-900: #422100; /* 14.49 / 1.20  見出しテキスト、ヘッダ内の押下状態 */
  --gz-main-700: #613000; /* 10.87 / 1.60  ヘッダ背景、主要ボタンのホバー */
  --gz-main-500: #804000; /*  7.92 / 2.20  主要ボタン背景、リンク、フォーカスリング */
  --gz-main-300: #ca9e72; /*  2.43 / 7.16  表の見出し行の罫線、区切り線 */
  --gz-main-100: #eee0d3; /*  1.29 / 13.46 表の見出し行の背景、行のホバー */
  --gz-main-50: #f9f5f1; /*   1.08 / 16.04 ページ背景、検索条件パネルの背景 */

  /* ========== 状態色 ========== */
  /*
   * カラーユニバーサルデザインに配慮した 3 色。いずれも白文字とのコントラスト比が
   * 4.5 に届かないため、**上に載せる文字は --gz-ink-900（黒）とする**。白文字を
   * 載せる必要がある箇所（削除ボタン等）は --gz-danger-strong を使う。
   */
  --gz-success: #03af7a; /* 2.83 / 6.15  正常・予定通り・処理の成功 */
  --gz-warning: #f6aa00; /* 1.97 / 8.84  警告・予定からの逸脱（NG） */
  --gz-danger: #ff4b00; /*  3.36 / 5.19  危険・誤搬送・入力エラー */
  --gz-danger-strong: #d63a00; /* 4.70 / 3.71  白文字を載せる危険色（削除ボタン等） */

  /* ========== 中立色 ========== */
  --gz-ink-900: #1f1c19; /* 本文テキスト、状態色の上に載せる文字 */
  --gz-ink-600: #6e665e; /* 補助テキスト、説明文（白背景で 5.64） */
  --gz-ink-300: #d8d1ca; /* 罫線、フォームの枠線 */
  --gz-ink-100: #f1f0ee; /* 無効状態の背景 */
  --gz-surface: #ffffff; /* カード・表・フォームの背景 */
  /*
   * モーダルの背後を覆う膜。本文色を透かして使う。**黒の半透明にしない**のは、他の中立色と
   * 同じ色相を保ち、画面全体の色調を揃えるためである。不透明度は、背後の内容が「そこに
   * あるが操作できない」と読めるだけ薄く、かつモーダルの白い面が浮き上がるだけ濃くする
   */
  --gz-overlay: rgb(31 28 25 / 60%);

  /* ========== 面の上に載せる文字色 ========== */
  /* 面の色と文字の色を対で参照させ、コントラスト基準を満たさない組み合わせを作らせない */
  --gz-on-main: #ffffff; /* メインカラー 900 / 700 / 500 の上 */
  --gz-on-status: var(--gz-ink-900); /* 状態色の上 */

  /* ========== 余白 ========== */
  /* 8px の倍数で統一する。中間値を足さないこと（画面ごとに間隔がずれる原因になる） */
  --gz-space-1: 8px;
  --gz-space-2: 16px;
  --gz-space-3: 24px;
  --gz-space-4: 32px;

  /* ========== 文字 ========== */
  /*
   * Web フォントは読み込まない。外部ネットワークへ出られない配備先でも表示を崩さない
   * ためである。端末標準のゴシック体を優先順に指定する
   */
  --gz-font-family:
    'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', 'Meiryo', system-ui,
    sans-serif;
  --gz-font-body: 16px; /* 本文。事務作業で長時間読むため下げない */
  --gz-font-small: 14px; /* 補助テキスト、件数表示 */
  --gz-font-section: 20px; /* セクション見出し */
  --gz-font-title: 24px; /* ページ見出し */
  --gz-line-height: 1.6;

  /* ========== レイアウト ========== */
  --gz-content-max-width: 1440px;
  --gz-radius: 4px;

  /* ========== フォーカス ========== */
  /* キーボード操作の到達位置を示す輪郭線。どの画面でも消さないこと */
  --gz-focus-width: 3px;
  --gz-focus-offset: 2px;
}