/*!
 * サワディ POS デザイントークン（配色の一元管理）
 * 2026-06-12 着手。kitchen.html でパイロット → 全画面展開 → SaaS テナント別テーマ上書き。
 * 原則: 「状態を示す色」は維持し、意味の名前で一元管理する。
 * マルチテナント時はこの :root をテナント別に上書き注入すれば全画面の配色が変わる。
 */
:root {
  /* ===== 中立（店員ダーク画面の下地） slate系 ===== */
  --bg:          #0f172a;  /* 画面背景 */
  --surface:     #1e293b;  /* カード・ヘッダ */
  --surface-2:   #253347;  /* hover */
  --border:      #334155;  /* 枠線 */
  --border-2:    #475569;  /* 強い枠線 */
  --text:        #f1f5f9;  /* 主テキスト */
  --text-2:      #e2e8f0;  /* 副テキスト */
  --text-soft:   #cbd5e1;  /* やや淡い */
  --text-muted:  #94a3b8;  /* 補助 */
  --text-dim:    #64748b;  /* 最も淡い */

  /* ===== ブランド / プライマリ（緑） ===== */
  --primary:      #166534;
  --primary-2:    #15803d;
  --primary-deep: #14532d;

  /* ===== 状態色（success / danger / warning / info / accent） ===== */
  --success:       #22c55e;
  --success-2:     #16a34a;
  --success-light: #4ade80;
  --success-bg:    #dcfce7;

  --danger:        #dc2626;
  --danger-2:      #ef4444;
  --danger-strong: #b91c1c;
  --danger-deep:   #991b1b;
  --danger-light:  #f87171;
  --danger-soft:   #fca5a5;
  --danger-bg:     #fee2e2;
  --danger-bg-deep:#7f1d1d;

  --warning:       #fbbf24;
  --warning-2:     #f59e0b;
  --warning-3:     #d97706;
  --warning-deep:  #92400e;
  --warning-light: #fde68a;
  --warning-bg:    #fef3c7;

  --info:          #2563eb;
  --info-2:        #1d4ed8;
  --info-light:    #60a5fa;
  --info-deep:     #2b5a8f;  /* 落ち着いた青ネイビー（staff人数入力帯など 色面の青） */

  --accent:        #ea580c;  /* 時間 / ラストオーダー オレンジ */
  --accent-light:  #fb923c;

  /* ===== 放題（teal） ===== */
  --nomi:   #14b8a6;
  --nomi-2: #0d9488;
  --nomi-3: #10b981;

  /* ===== 決済カテゴリ色（色での即時識別＝機能の色） ===== */
  --pay-cash: #166534;
  --pay-card: #1d4ed8;
  --pay-qr:   #7c3aed;
  --pay-dpay: #db2777;

  /* ===== ライト要素（モーダル白背景内・客画面で多用） ===== */
  --light-text:   #111827;
  --light-text-2: #374151;
  --light-muted:  #6b7280;
  --light-border: #e5e7eb;
  --light-bg:     #f3f4f6;
  --white:        #ffffff;
}

/* ===== 店舗用ライトモード（端末ごと・:root.light-staff で中立だけライト反転） =====
   状態色(success/danger/warning/info/nomi/pay)・ブランドカラー(primary系)は維持＝ダークと共通。
   documentElement(:root)にクラスを付けるので head 適用で FOUC なし。 */
:root.light-staff {
  --bg:          #f8f9fa;  /* 画面背景 */
  --surface:     #ffffff;  /* カード・ヘッダ */
  --surface-2:   #eef1f4;  /* hover */
  --border:      #a3aebd;  /* 枠線(さらに濃く) */
  --border-2:    #6b7785;  /* 強い枠線(さらに濃く) */
  --text:        #0a101c;  /* 主テキスト(さらに濃く) */
  --text-2:      #111827;  /* 副テキスト(さらに濃く) */
  --text-soft:   #1f2937;  /* やや淡い(さらに濃く) */
  --text-muted:  #374151;  /* 補助(さらに濃く) */
  --text-dim:    #4b5563;  /* 最も淡い(さらに濃く) */
}