/*
 * イーロジ出荷ポータル デザインの決まり（第8版 5-3）。値はここだけに書き、部品と画面は var(--…) で使う。
 * 正は画面見本（mockups/）。濃紺 #142B44・緑 #00854A・淡い緑 #E3F2EA。赤は使わない（注意は濃紺の帯）。
 * 文字と面の組は 4.5:1 以上、入力欄・ボタンの枠とフォーカスの輪は 3:1 以上（tests/web/test_static.py が計算して確かめる）。
 * 余白は8の倍数。文字の段は 14・16・20・28・40。角丸は 6（札）・8（入力・ボタン）・12（カード）。
 */
:root {
  /* 色: 見本の3色 */
  --color-navy: #142b44;          /* 文字・見出し・上の帯・止まり */
  --color-green: #00854a;         /* 主ボタン（白文字 4.7:1）・済み */
  --color-green-soft: #e3f2ea;    /* 面・選んだ項目・進行中 */

  /* 色: 役割 */
  --color-text: #142b44;          /* 本文（白地に 14.4:1） */
  --color-text-muted: #556273;    /* 補足（白地に 6.2:1・淡い緑に 5.4:1） */
  --color-green-strong: #00703e;  /* 主ボタンを押している間・押せる文字の上 */
  --color-green-pressed: #005c33;
  --color-green-text: #006b3b;    /* 緑の文字（白地に 6.6:1・淡い緑に 5.7:1） */
  --color-on-green: #ffffff;
  --color-on-navy: #ffffff;
  --color-navy-hover: #1f3b5c;

  /* 色: 面と線 */
  --color-surface: #ffffff;       /* カード・作業の場 */
  --color-canvas: #f4f6f9;        /* 左の列・表の見出し */
  --color-neutral-soft: #eef1f4;  /* 取消・下書きの札 */
  --color-line: #d5dce4;          /* 区切りの細い罫線（飾り。3:1 は要らない） */
  --color-border-strong: #7a8698; /* 入力欄・枠線のボタン（白地に 3.7:1） */
  --color-disabled: #e6e9ee;      /* 押せないボタンの面 */
  --color-disabled-text: #556273; /* 押せないボタンの文字（5.4:1） */
  --color-backdrop: rgba(20, 43, 68, 0.48);

  /* フォーカスの輪 */
  --color-focus: #142b44;
  --color-focus-on-navy: #e3f2ea;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 5px var(--color-focus);
  --focus-ring-on-navy: 0 0 0 3px var(--color-focus-on-navy);

  /* 文字（端末の日本語の書体。外のフォントは読まない） */
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI",
    "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --text-caption: 14px;   /* 補足・表の見出し（最小） */
  --text-body: 16px;      /* 本文・入力・ボタン */
  --text-section: 20px;   /* カードの見出し */
  --text-title: 28px;     /* 画面の見出し */
  --text-figure: 40px;    /* 件数 */
  --weight-regular: 400;
  --weight-bold: 700;
  --leading-body: 1.6;
  --leading-title: 1.3;

  /* 余白（8の倍数） */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;

  /* 大きさ */
  --header-height: 56px;
  --nav-width: 224px;
  --content-max: 1200px;
  --target-min: 44px;     /* 押す場所の最小（タッチの端末は 48px） */
  --control-height: 48px; /* 入力欄・ボタンの高さ */

  /* 角丸（3つだけ） */
  --radius-chip: 6px;
  --radius-control: 8px;
  --radius-card: 12px;

  /* 影（シートだけ。カードは罫線で区切る） */
  --shadow-sheet: 0 16px 48px rgba(20, 43, 68, 0.24);

  /* 動き */
  --duration: 200ms;
}

@media (pointer: coarse) {
  :root {
    --target-min: 48px;
  }
}

/* iPad 横（1024）でも左の列の項目（いちばん長い「指示メールの取り込み」）が1行に収まる幅（点検 HIG 4） */
@media (max-width: 1100px) {
  :root {
    --nav-width: 216px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
}