/* 見た目の値 (abacus の docs/portal-web/design.md §1.4・§2)。色・大きさの値はここだけに書く。
   アプリの延長の見た目 (青い帯・クリーム色の紙・橙の押す所) を、ご高齢の先生の基準 (WCAG 2.2) に合わせた */
:root {
  /* 色。文字と地の組は 4.5:1 以上、枠線・欄の縁は 3:1 以上 (src/ui/rules.test.ts が測る) */
  --color-band: #2a5599;
  --color-on-band: #ffffff;
  /* 帯の上のボタンの縁 (帯の色との差 3:1 以上) */
  --color-on-band-border: #c9d6ec;
  --color-on-band-hover: #3466b4;
  /* ログインの画面の青い地に置く大きな丸 (飾り。アプリのホームと同じ) */
  --color-band-circle: #3466b4;
  --color-accent: #ff9700;
  --color-accent-hover: #ffa827;
  --color-accent-press: #d27c00;
  /* 橙の地の字は濃い紺 (白では 2.17:1 で足りない。decisions D17) */
  --color-on-accent: #10182b;
  --color-page: #fef8e0;
  --color-surface: #ffffff;
  --color-text: #10182b;
  --color-text-muted: #5b6474;
  /* 文字のリンク (帯と同じ青。地 6.9:1・白 7.35:1。design §1.4・D76) */
  --color-link: #2a5599;
  /* 進み具合の表の見出しの上の段の、かたまりごとのうっすらした地 (灰色の文字と 5.18:1 以上。design §1.11・D79) */
  --color-group-1: #fdf0f0;
  --color-group-2: #fdf6e6;
  --color-group-3: #eef7ea;
  --color-group-4: #e9f3f8;
  --color-group-5: #f1edf9;
  --color-group-6: #f9eef5;
  --color-group-7: #eef0f4;
  /* 同じ表の、かたまりの無い見出し (ログイン ID など。表示名の列は除く) の地. かたまりのどの色とも違う灰色 (灰色の文字と 4.9:1) */
  --color-group-none: #e9e9e9;
  --color-heading-small: #8a6d1d;
  --color-rule: #f0e3b8;
  /* 欄・ボタンの縁 (地との差 3:1 以上) */
  --color-border: #a08a4a;
  --color-focus: #2a5599;
  /* 青い帯の上のフォーカスの印 (帯の色と同じ青では見えない) */
  --color-focus-on-band: #ffffff;
  --color-ok-bg: #e3f4e6;
  --color-ok-text: #1d6b34;
  --color-warn-bg: #fff0c7;
  --color-warn-text: #7a5200;
  --color-done-bg: #e4ecf8;
  --color-done-text: #1f4580;
  --color-bad-bg: #fde6e1;
  --color-bad-text: #a3291a;
  --color-on-danger: #ffffff;
  --color-danger-press: #75190d;
  --color-muted-bg: #f1ede0;
  /* 役割のラベル (先生・生徒). 状態の色を使わない. 先生は青の塗りに青の枠、生徒は白地に灰の枠 (状態のバッジはどれも塗りなので形でも分かる.
     abacus の docs/portal-web/design.md §2・decisions.md D106・D112). 枠の線は白地とも頁の地とも 3:1 以上 */
  --color-role-teacher-bg: #e4ecf8;
  --color-role-teacher-text: #1f4580;
  --color-role-teacher-border: #5a7bb0;
  --color-role-student-bg: #ffffff;
  --color-role-student-text: #3b4555;
  --color-role-student-border: #7d8696;
  --color-backdrop: rgb(16 24 43 / 50%);
  --color-backdrop-light: rgb(16 24 43 / 25%);
  /* 柘植の珠 (アプリの既定の珠の色。珠の輪) */
  --color-bead-dark: #8a5018;
  --color-bead-body: #d7a33c;
  --color-bead-light: #f8e6a6;

  /* 書き込みの覆いを見せるまでの遅れと、見せるときの動き (design §1.8。1 秒未満の回る絵は出さない) */
  --busy-reveal-delay: 1s;
  --busy-reveal-duration: 150ms;

  /* 書体 (太さは 400 と 700 の 2 つだけ。design §10・D101) */
  --font-ui: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif;

  /* 文字の大きさ (rem。本文 16px・注記も 14px より小さくしない) */
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-h1: 1.75rem;
  --text-h2: 1.25rem;
  --text-h3: 1rem;
  /* 受付の画面の名前と [きた] [かえる] (同じ大きさ。abacus の docs/portal-attendance/design.md §1.3) */
  --text-kiosk: 2.25rem;

  /* 押す所の大きさ (44×44 CSS ピクセル以上。WCAG 2.2 の 2.5.5) */
  --target-min: max(44px, 2.75rem);

  /* 余白・角の丸み */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  /* 箱・ボタンの左右の余白. 文字を大きくしても広げない (幅 320px・文字 200% で字の入る幅を残す。design §10) */
  --space-inline-1: min(var(--space-1), 4px);
  --space-inline-2: min(var(--space-2), 8px);
  --space-inline-4: min(var(--space-4), 16px);
  --space-inline-5: min(var(--space-5), 24px);
  /* 角の丸みは控えめ (業務の画面。D44)。完全な丸は状態の札だけ */
  --radius-control: 8px;
  --radius-field: 8px;
  --radius-notice: 8px;
  --radius-box: 12px;
  /* 頁の地の上の白い面の枠の幅 (design §1.8.1・D109) */
  --box-border: 1px;
  --radius-dialog: 12px;
  --radius-pill: 999px;

  /* 枠の幅 */
  --dialog-width: 480px;
  --dialog-width-wide: 760px;
  --gutter: 16px;
  /* 画面の端の余白 (切り欠きのある端末では、切り欠きの分より狭くしない) */
  --gutter-safe: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  /* 中身の幅: 画面の帯の中身・1 列の画面 (設定・作成・契約)・教室の作成の欄・ログインの札 */
  --content-max: 1080px;
  /* 進み具合のカレンダーのまとまりの幅の上限 (日の四角 7 つと間が、ふつうの文字でゆとりを持って入る広さ. design §1.11・D110) */
  --calendar-max: 28rem;
  --content-form: 40rem;
  --content-narrow: 36rem;
  --content-card: 25rem;
  /* 横に送る表で留める列 (行の見出し) の幅. cqi は滑らせる枠の外の箱 (容器) の幅に対する割合. 文字を大きくしても 4 割まで (design §1.11) */
  --table-sticky-column: min(14rem, 40cqi);
  /* 横に送る表の升の最小の幅 (数が 1 字ずつ縦に並ばない) */
  --table-cell-min: 4.5rem;

  /* フォーカスの印 */
  --focus-ring: 3px solid var(--color-focus);

  color-scheme: light;
}

/*
 * BIZ UDPGothic に字の無い 4 言語は、その言語の Web の書体を先に使う (読み込むのは src/fonts.json の表の 1 つだけ。D101).
 * 続きは Web の書体を読めないときの端末の書体 (Mac・iPhone → Windows → Android) と、ほかの言語の名前のための BIZ UDPGothic.
 * 中国語は中国語の書体を先に使う (日本と共通の漢字だけ日本の字形になって 1 語の中で混ざらないように)
 */
:root:lang(zh) {
  --font-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "BIZ UDPGothic", sans-serif;
}

:root:lang(ko) {
  --font-ui: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "BIZ UDPGothic", sans-serif;
}

:root:lang(hi) {
  --font-ui: "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", "BIZ UDPGothic", sans-serif;
}

:root:lang(ar) {
  --font-ui: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "BIZ UDPGothic", sans-serif;
}