/* ============================================================
   BRIGHT 社内システム UIトークン（bright-ui-tokens）
   ------------------------------------------------------------
   ブライトの社内システム共通の「色・文字・余白」の定義。
   このファイル1枚を最初に読み込めば、他のシステムでも同じ見た目になる。
   正本：チームハブ/tools/ui-tokens/bright-ui-tokens.css（同じ内容）
   ルールの説明：チームハブ/business/09_ナレッジ/03_社内システムUI標準.md §9・§10
   初出：bright-core-system（2026-09-06）
   ============================================================ */
:root {
  /* ── 色：温かみのある無彩色（Claude の UI の色合いに寄せた）＋ブランドの黄 ── */
  --bg:        #F4F3EC;   /* 作業エリアの地（アイボリー） */
  --bg-2:      #EDEBE2;   /* サイドバー・一段沈んだ面 */
  --surface:   #FDFCF9;   /* カード・入力欄（真っ白ではなく紙の白） */
  --surface-2: #F1EFE7;   /* 表の見出し・ホバー・チップ */
  --ink:       #1F1E1A;   /* 本文（真っ黒ではなく墨） */
  --ink-2:     #45433C;   /* 少し弱める文字（表の値・お知らせ本文） */
  --ink-3:     #7A776E;   /* トーンダウン：補足・ラベル・メタ情報 */
  --ink-4:     #B5B2A7;   /* プレースホルダー・無効 */
  --border:    #E3E0D5;   /* 罫線・枠 */
  --border-2:  #D2CFC3;   /* 少し強い枠（ホバー・選択） */
  --accent:    #F0C800;   /* ブランドの黄（ボタン・選択中） */
  --accent-dk: #C8A400;
  --accent-bg: #FBF4D2;   /* 選択中メニューの薄背景（黄を温かみの地に馴染ませる） */
  --accent-ink:#7A6200;   /* 黄の濃色文字（白地で読めるように） */
  --dark:      #2A2925;   /* 濃い面（トースト・受注バッジ） */
  --danger:    #C2410C;   /* 警告（赤も温かみ寄りに） */
  --ok:        #3F7D4E;
  /* ── 2026-09-13 色のルール整理（tools/ui-tokens/color-rules/）で足した名前。新しい色は3つだけ（--on-dark --accent-line --sat） ── */
  --on-dark:     #FDFCF9;   /* 濃い面・黄の上の文字（白抜き）。#fff を直書きしない */
  --accent-line: #E9D98A;   /* 選択中の枠（黄の薄い線）。売上カレンダーの濃淡の3段目にも */
  --sat:         #2A6FBB;   /* 土曜。天気の雨・雪もこれ */
  /* 状態バッジ4組（下書き＝灰／進行中＝青／待ち＝琥珀／済み＝緑）。この4色以外の状態色を作らない（UI標準 §12-5） */
  --st-draft-bg:  #F1EFE7; --st-draft-ink:  #7A776E;
  --st-active-bg: #E8F1FF; --st-active-ink: #1D4ED8;
  --st-wait-bg:   #FEF3C7; --st-wait-ink:   #92400E;
  --st-done-bg:   #DCFCE7; --st-done-ink:   #166534;
  /* 人が選ぶ色の共通パレット8（勤務区分・催事・工程表のバー）。この8色以外から選ばせない。文字は --on-dark */
  --p1: #C8A400; --p2: #D9822B; --p3: #D0665A; --p4: #8A6CB0; --p5: #4B7DB8; --p6: #3C8C7E; --p7: #6C9A3F; --p8: #8C8574;
  /* 予約の出どころの印（§12-5 の唯一の例外。Web予約＝--dark） */
  --mark-staff: #A88400; --mark-edit: #B3261E;
  --radius: 12px;
  --shadow:       0 2px 12px rgba(70, 60, 30, 0.06);
  --shadow-hover: 0 8px 28px rgba(70, 60, 30, 0.12);

  /* ── 書体 ── */
  --font: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;

  /* ── 文字サイズ：4段だけ。大小で差をつけず、行間・太さ・色（トーンダウン）で読みやすさを作る ── */
  --fs-xl: 20px;   /* 画面タイトル・数字タイル */
  --fs-lg: 15px;   /* ページ名・カードの見出し・モーダルの題 */
  --fs-md: 13px;   /* 基本：メニュー・本文・表・入力・ボタン */
  --fs-sm: 12px;   /* 補足・ラベル・タグ・メタ情報 */
  /* 互換（旧6段の名前）。新しく書くときは上の4つだけ使う */
  --fs-xs:  var(--fs-sm);
  --fs-num: var(--fs-xl);

  /* ── 太さ：3段 ── */
  --fw-body: 400;
  --fw-mid:  600;  /* 強調・ボタン */
  --fw-head: 700;  /* 見出し */

  /* ── 行間：「1行で読む」か「続けて読む」かで決める ── */
  --lh-tight: 1.3;  /* 1行で読む：見出し・数字・バッジ */
  --lh-ui:    1.5;  /* 操作部品：メニュー・ボタン・入力・表のセル */
  --lh-text:  1.75; /* 続けて読む：説明文・お知らせ本文・手順 */
  --lh-read:  1.9;  /* 長文：マニュアル本文 */

  /* ── 字間：小さい文字ほど開ける ── */
  --ls-body:  .02em; /* 本文・UI */
  --ls-head:  .04em; /* 見出し（palt で詰めた上で少し戻す） */
  --ls-label: .1em;  /* 小さなラベル・区分の見出し */
  --ls-num:   .01em; /* 数字（等幅数字と組み合わせる） */

  /* ── 余白：「ここがセット／開ける（小・中・大）」＋セクション間 ── */
  --sp-s:  4px;  /* 開ける（小）：1つの項目の中（ラベル→値、題→説明） */
  --sp-m:  10px; /* 開ける（中）：同じセットの項目どうし */
  --sp-l:  24px; /* 開ける（大）：タイトル→セット、セット→セット */
  --sp-xl: 40px; /* セクション→セクション */
}

/* ── 文字組みの基本（トークンを実際の要素に結びつける） ── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-body);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-feature-settings: "kern";
}
/* 見出し：プロポーショナル詰め（palt）で約物の余白を詰め、字間を少し戻す。
   行頭の括弧の余白を削り（text-spacing-trim）、改行は文節単位（word-break: auto-phrase）。対応ブラウザだけで効く */
h1, h2, h3, .section-title, .modal-title, .home-title, .notice-title, .home-card-name, .today-date {
  font-feature-settings: "palt", "kern";
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-tight);
  text-spacing-trim: trim-start;
  word-break: auto-phrase;
}
/* 続けて読む文章：行間を広く取り、段落の間は「開ける（中）」 */
p, .text, .notice-body, .hint, .steps, .field-note { line-height: var(--lh-text); }
p + p { margin-top: var(--sp-m); }
/* 数字：等幅数字で桁を揃える */
.num, .tabular, td.num, .kpi-value { font-variant-numeric: tabular-nums; letter-spacing: var(--ls-num); }
input, select, textarea, button { letter-spacing: var(--ls-body); }
input::placeholder, textarea::placeholder { color: var(--ink-4); opacity: 1; }
/* トーンダウン：大きさではなく色で階層をつける */
.muted, .sub, .hint, .field-note, .kpi-label, .kpi-sub, .section-desc { color: var(--ink-3); }