/* ==========================================================================
   tokens.css — デザイントークン
   このファイル以外に生の色コード・生のpx値を書かないこと。
   仕様は DESIGN.md を参照。
   ========================================================================== */

:root {
  /* --- ブランド（宝州亭 www.daiichihotel.com/hosyutei/ に準拠） ---------
     本サイトの焦茶＝#412615 / 銅＝#A4785F / ベージュ＝#ECE6E0 が原典。
     ただし銅 #A4785F は白地とのコントラストが 3.9:1 で AA に届かず、
     --c-brand は白文字を載せるボタンと白地のリンク文字の両方に使うため、
     濃度を上げた #7A5238（6.8:1）を業務UI用のブランド色とする。 */
  --c-brand: #7a5238;
  --c-brand-dark: #5e3e2a;
  --c-brand-pale: #f3e6db;
  --c-header-bg: #412615;
  --c-header-bg-dark: #2e1a0e;

  /* --- ニュートラル ---------------------------------------------------
     灰は青みではなく茶みに寄せ、焦茶のヘッダーと地続きにする。 */
  --c-text: #262220;
  --c-text-sub: #6b625a;
  --c-text-mute: #9a9188;
  --c-text-inv: #ffffff;

  --c-border: #cbc4bc;
  --c-border-strong: #a3998e;
  --c-border-light: #e5e0da;

  --c-bg: #ffffff;
  --c-bg-sub: #f3f4f1;   /* 宝州亭・豊洋亭に共通する地色。そのまま採用 */
  --c-th-bg: #e9e6e0;
  --c-row-hover: #f8f5f1;

  /* --- ステータス（全機能で意味を統一） -------------------------------- */
  /* 意味を持つ色（緑=OK / 赤=NG / 橙=下書き / 紫=AI）は判別を優先し、
     トンマナ変更の対象外とする。無彩色の2つ（未・不要）だけ茶みに寄せ、
     審査中の青は彩度を落として土色の画面に馴染ませる。 */
  --c-st-none: #8f887f;      /* 未 / 未処理 / 未突合 */
  --c-st-skip: #bdb7af;      /* 不要 */
  --c-st-draft: #d98c00;     /* 仮登録 / 下書き */
  --c-st-progress: #2f6690;  /* 審査中 / 処理中 */
  --c-st-ok: #1b7f4b;        /* 承認済 / 決裁完了 / 一致 */
  --c-st-ng: #c0392b;        /* 差戻 / 不一致 */
  --c-st-ai: #7b4fa8;        /* AI推奨（要確認） */

  /* 淡色背景の上に載せる濃い文字色（注記ボックス用） */
  --c-st-draft-ink: #8a5a00;
  --c-st-ai-ink: #5c3a80;

  --c-st-none-bg: #f1efec;
  --c-st-skip-bg: #f4f2ef;
  --c-st-draft-bg: #fdf4e3;
  --c-st-progress-bg: #e8eef3;
  --c-st-ok-bg: #e6f3ec;
  --c-st-ng-bg: #fbeceb;
  --c-st-ai-bg: #f2ecf8;

  /* --- グラフパレット --------------------------------------------------- */
  /* 主系列2つをブランド側に寄せ、3〜6は意味を持つため据え置く。
     ch-2 は ch-4（橙）と同じ円グラフに同居する（bi.js の費目構成）ため、
     茶系ではなく本サイト共通の差し色である青灰 #6E7A7D を当てて色相を離す。 */
  --c-ch-1: #8c5f45;
  --c-ch-2: #6e7a7d;
  --c-ch-3: #1b7f4b;
  --c-ch-4: #d98c00;
  --c-ch-5: #7b4fa8;
  --c-ch-6: #c0392b;
  --c-ch-1-alt: #c09383;
  --c-ch-2-alt: #9baaae;
  --c-ch-3-alt: #6cb08e;
  --c-ch-4-alt: #e8bd6b;
  --c-ch-5-alt: #b092cd;
  --c-ch-6-alt: #dd8b81;
  --c-ch-prev: #c9c2ba;   /* 前年系列は必ずこの灰色の破線 */

  /* --- タイポグラフィ --------------------------------------------------- */
  --ff-base: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
             Meiryo, system-ui, -apple-system, sans-serif;
  --ff-num: "Helvetica Neue", Arial, var(--ff-base);

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  --lh-body: 1.6;
  --lh-table: 1.35;

  /* --- 空間 ------------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* --- 形 -------------------------------------------------------------- */
  --r-sm: 2px;
  --r-md: 3px;
  --shadow-pop: 0 2px 8px rgba(0, 0, 0, 0.15);
  --c-shade: rgba(0, 0, 0, 0.4);   /* モーダルの背面 */
  --c-ink: #0a0a0a;                /* スマホ枠のノッチなど、装飾用の黒 */

  /* 焦茶のヘッダーの上に重ねる白（透過度違い） */
  --c-on-dark-sep: rgba(255, 255, 255, 0.18);
  --c-on-dark-line: rgba(255, 255, 255, 0.7);
  --c-on-dark-stroke: rgba(255, 255, 255, 0.35);
  --c-on-dark-fill: rgba(255, 255, 255, 0.1);
  --c-on-dark-fill-hover: rgba(255, 255, 255, 0.2);

  /* --- 密度 ------------------------------------------------------------ */
  --h-row: 30px;
  --h-input: 30px;
  --h-btn: 34px;
  --h-btn-lg: 40px;
  --h-btn-sm: 26px;
  --h-header: 44px;
  /* ページ見出しの高さ。ボタンの有無で高さが変わらないよう固定する
     （ボタン34px + 下余白8px + 下罫線2px + 微調整2px） */
  --h-pagehead: 46px;
  --w-sidebar: 208px;
  --w-sidebar-min: 56px;   /* たたんだときの幅（アイコンのみ） */
  --w-aipanel: 380px;      /* AIパネルの幅 */
  --w-aitab: 38px;         /* 右端に貼り付くAIタブの幅 */
  --w-deflabel: 160px;
  --sz-navicon: 20px;
  --wboard-row: 8px;   /* ダッシュボードの行の刻み。home.js の ROW_UNIT と揃えること */

  /* --- レイアウト ------------------------------------------------------ */
  --w-page-min: 1000px;
  --z-modal: 100;
  --z-dropdown: 50;
  --z-toast: 200;
}