/* 見た目の値 (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;
  /* 教室のタブの帯 (頁の地より少し濃い色. 文字と 4.5:1 以上. 選んでいるタブは白く浮かせ、太字と影でも分かる. design §1.3・D153) */
  --color-tabs-band: #f1e2a8;
  /* 帯の上で指を乗せた選んでいないタブ (白の半透明の地) */
  --color-tabs-hover: rgb(255 255 255 / 55%);
  /* 選んでいるタブの薄い影 (「ボタンは平ら」の例外. 選んでいるタブの形だけ. design §1.3) */
  --shadow-tab: 0 1px 3px rgb(16 24 43 / 25%);
  /* 使い方の頁の写しの上の枠・番号・矢印 (公開ページ. 赤の 1 色と白の縁. どの写しの地の上でも、赤か白の縁のどちらかが 3:1 以上.
     番号の白い字は赤の地と 4.5:1 以上. src/ui/rules.test.ts が測る. abacus の docs/portal-site/design.md §1.4.4) */
  --color-manual-mark: #b00020;
  --color-manual-mark-rim: #ffffff;
  --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-base: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --font-ui: var(--font-ui-base);

  /* 文字の大きさ (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;
  /* 表を出す枠の幅の上限 (枠はいつも画面の幅から左右の余白を引いた幅まで広い. design §1.6) */
  --dialog-width-wide: 1200px;
  --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 §10.1) */
  --table-sticky-column: min(14rem, 40cqi);
  /* 画面の幅いっぱいの表の升の中の説明の文を折る幅 (列を中身の幅で並べても、文で列が広がらない. 文字の大きさに従う. design §1.16・§10.1・D176) */
  --table-note-max: 16em;
  /* 表の太い縦の線 (かたまりの境・留めた列の縁) の幅. 留めた列の中身の上限からも引く (design §10.1) */
  --table-rule-thick: 2px;
  /* 見出しの並べ替えの印の幅 (見出しの字の大きさに対する割合). 留めた列の見出しの上限からも引く */
  --table-sort-mark: 0.5em;
  /* 横に送る表の升の最小の幅 (数が 1 字ずつ縦に並ばない) */
  --table-cell-min: 4.5rem;

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

  color-scheme: light;
}

/*
 * 欧文の引用の符号 (’ ‘ “ ” „ ‚ ‹ › « ») だけを、端末の欧文の書体で描く書体 (design §10・D189).
 * BIZ UDPGothic (日本語の書体) はこれらを全角の幅で描き、「students’ names」「„Speichern“」「“Salvar”」の符号の後ろや前に空きが出る.
 * 字の範囲 (unicode-range) の外の字 (英字・数字・かな・漢字) はこの書体を使わず、続きの書体のまま (見た目が変わらない).
 * 端末の書体を名前で引く (Mac・iPhone → Windows → Android → ほか). どれも無い端末では、続きの書体 (今までと同じ) で描く
 */
@font-face {
  font-family: "Latin Quotes";
  font-weight: 400;
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Segoe UI"), local("SegoeUI"), local("Roboto"), local("Roboto-Regular"), local("Arial"), local("ArialMT");
  unicode-range: U+2018-201F, U+2039-203A, U+00AB, U+00BB;
}

@font-face {
  font-family: "Latin Quotes";
  font-weight: 700;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Segoe UI Bold"), local("SegoeUI-Bold"), local("Roboto Bold"), local("Roboto-Bold"), local("Arial Bold"), local("Arial-BoldMT");
  unicode-range: U+2018-201F, U+2039-203A, U+00AB, U+00BB;
}

/* 自分の言語の Web の書体を持たず BIZ UDPGothic で描く欧文の言語は、引用の符号だけを欧文の書体で描く (画面と公開ページの両方. D189) */
:root:is(:lang(en), :lang(de), :lang(es), :lang(fr), :lang(it), :lang(pt)) {
  --font-ui: "Latin Quotes", var(--font-ui-base);
}

/*
 * 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;
}