/* ============================================================
   KOBスイート 共通デザイントークン (design_tokens.css)
   ------------------------------------------------------------
   対象: hitori_inshokuten_kun / hitori_kaikei_kun / hitori_salon_kun / kob_portal
   役割: 4アプリの視覚仕様を統一する「意味的トークン」定義。
         このファイル自体は既存 style.css を上書き/破壊しない。
         各アプリの static/css/style.css より *前* に読み込むこと。

   詳細な設計理由は同ディレクトリの design_tokens.md を参照。
   ダークモードは対象外（本ファイルはライトモードのみ）。
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     1. ニュートラル（背景・テキスト・境界線）
     寒色系スレートグレーに統一（kaikei / kob_portal の既存値を正とする）
     --------------------------------------------------------- */
  --color-neutral-0:   #ffffff; /* サーフェス: カード/入力欄/モーダル */
  --color-neutral-50:  #f8fafc; /* ページ背景 */
  --color-neutral-100: #f1f5f9; /* サブ背景: テーブルヘッダー/非選択タブ */
  --color-neutral-200: #e2e8f0; /* 境界線（標準） */
  --color-neutral-300: #cbd5e1; /* 境界線（強調） */
  --color-neutral-400: #94a3b8; /* プレースホルダー/無効アイコン */
  --color-neutral-500: #64748b; /* テキスト: muted/補足 */
  --color-neutral-600: #475569; /* テキスト: やや強め */
  --color-neutral-700: #334155; /* 見出し補助 */
  --color-neutral-800: #1e293b; /* 本文テキスト（基本） */
  --color-neutral-900: #0f172a; /* 最高コントラスト（印刷時本文など） */

  /* 意味的エイリアス（コンポーネントCSSからはこちらを参照する） */
  --color-bg:            var(--color-neutral-50);
  --color-bg-subtle:     var(--color-neutral-100);
  --color-surface:       var(--color-neutral-0);
  --color-border:        var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-text:          var(--color-neutral-800);
  --color-text-muted:    var(--color-neutral-500);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse:  #ffffff; /* ネイビー/アクセント背景の上の文字 */

  /* ---------------------------------------------------------
     2. ブランドカラー（ネイビー）
     KOBロゴ（ネイビー×シルバー）に由来。全アプリ共通の基調色。
     サイドバー/ヘッダー/フッター/primaryボタン/見出し文字などに使用。
     --------------------------------------------------------- */
  --color-navy-50:  #eef1f7;
  --color-navy-100: #dbe2ee;
  --color-navy-500: #2c4a8c;
  --color-navy-600: #243970;
  --color-navy-700: #1a2f5a; /* ベース色 */
  --color-navy-800: #16223a;
  --color-navy-900: #0f1e3d;

  --color-brand:      var(--color-navy-700);
  --color-brand-dark: var(--color-navy-800);
  --color-brand-hover: var(--color-navy-600);

  /* ---------------------------------------------------------
     3. 製品アクセントカラー
     各製品ロゴ/既存UIと整合させた3色。data-product属性で
     --color-accent* に自動的にエイリアスされる（本ファイル末尾参照）。
     --------------------------------------------------------- */
  /* ひとり飲食店くん = オレンジ */
  --color-accent-inshokuten:       #e08a35;
  --color-accent-inshokuten-dark:  #b96b21;
  --color-accent-inshokuten-light: #fdf1e4;

  /* ひとりサロンくん = ローズゴールド */
  --color-accent-salon:            #b6902f;
  --color-accent-salon-dark:       #96741f;
  --color-accent-salon-light:      #f3e3dd;

  /* ひとり経理くん = ブルー（マスコットは緑だが、成功色=緑との混同回避のため既存の青を正とする） */
  --color-accent-kaikei:           #0077cc;
  --color-accent-kaikei-dark:      #005fa3;
  --color-accent-kaikei-light:     #eaf4fc;

  /* kob_portal（ハブ）自身のCTA/リンク色 */
  --color-accent-portal:           #2563eb;
  --color-accent-portal-dark:      #1d4ed8;
  --color-accent-portal-light:     #dbeafe;

  /* 将来製品向け予約枠（値は仮。新製品追加時にここへ追記していく） */
  --color-accent-reserve-1:        #7c9a5e;
  --color-accent-reserve-1-dark:   #5f7a45;
  --color-accent-reserve-1-light:  #eef3e7;

  /* 既定値（data-product未指定時のフォールバック = kob_portal扱い） */
  --color-accent:       var(--color-accent-portal);
  --color-accent-dark:  var(--color-accent-portal-dark);
  --color-accent-light: var(--color-accent-portal-light);

  /* ---------------------------------------------------------
     4. セマンティックカラー（成功/警告/エラー/情報）
     製品アクセントカラーとは独立。全アプリ・全製品で共通固定。
     --------------------------------------------------------- */
  --color-success:      #16a34a;
  --color-success-dark: #15803d;
  --color-success-bg:   #dcfce7;
  --color-success-text: #166534;

  --color-danger:      #dc2626;
  --color-danger-dark: #b91c1c;
  --color-danger-bg:   #fee2e2;
  --color-danger-text: #991b1b;

  /* 4アプリのbeta-bannerで既に一致している値をそのまま正式トークン化 */
  --color-warning:        #d97706;
  --color-warning-dark:   #b45309;
  --color-warning-bg:     #fff3cd;
  --color-warning-text:   #856404;
  --color-warning-border: #ffe69c;

  --color-info:      #0284c7;
  --color-info-dark: #075985;
  --color-info-bg:   #e0f2fe;
  --color-info-text: #075985;

  /* ---------------------------------------------------------
     5. タイポグラフィ
     --------------------------------------------------------- */
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic",
               Meiryo, "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "MS Gothic", "Hiragino Kaku Gothic ProN", monospace, sans-serif; /* 感熱レシート等 */

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px; /* body既定 */
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  --leading-tight:   1.3;  /* 見出し・大きな数字 */
  --leading-normal:  1.6;  /* ラベル・補足 */
  --leading-relaxed: 1.7;  /* 本文 */
  --leading-loose:   1.9;  /* 長文（利用規約等） */

  --font-weight-regular: 400;
  --font-weight-medium:  600;
  --font-weight-bold:    700;
  --font-weight-black:   800; /* LPの大見出し・金額の最強調のみ */

  /* ---------------------------------------------------------
     6. スペーシングスケール（基準単位 4px）
     --------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------------------------------------------------------
     7. 角丸
     --------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ---------------------------------------------------------
     8. 影（ニュートラル900ベースの半透明。演出過多を避け4段階のみ）
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18);

  /* ---------------------------------------------------------
     9. 境界線幅
     --------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* ---------------------------------------------------------
     10. レイアウト寸法（既存4アプリの実測値を踏襲）
     --------------------------------------------------------- */
  --sidebar-width: 230px;
  --header-height: 64px;
  --container-max-width: 1100px;
  --logo-icon-size: 36px;     /* サイドバーの正方形ロゴ */
  --logo-wide-height: 40px;   /* ヘッダーの横長ロゴ */

  /* ---------------------------------------------------------
     11. ブレークポイント参照値（CSS上の@mediaでは直接使えないため
     JS(matchMedia)用の参照値として提供。@media自体は下記px値を直書きする）
       --bp-sm: 480px
       --bp-md: 640px
       --bp-lg: 860px
       --bp-xl: 1100px
     --------------------------------------------------------- */
  --bp-sm: 480px;
  --bp-md: 640px;
  --bp-lg: 860px;
  --bp-xl: 1100px;
}

/* ============================================================
   製品ごとのアクセントカラー切り替え
   各アプリの <html> または <body> に data-product="..." を付与すると、
   汎用トークン --color-accent* がその製品の値に切り替わる。
   例: <body data-product="inshokuten"> ... </body>
   ============================================================ */
[data-product="inshokuten"] {
  --color-accent:       var(--color-accent-inshokuten);
  --color-accent-dark:  var(--color-accent-inshokuten-dark);
  --color-accent-light: var(--color-accent-inshokuten-light);
}
[data-product="salon"] {
  --color-accent:       var(--color-accent-salon);
  --color-accent-dark:  var(--color-accent-salon-dark);
  --color-accent-light: var(--color-accent-salon-light);
}
[data-product="kaikei"] {
  --color-accent:       var(--color-accent-kaikei);
  --color-accent-dark:  var(--color-accent-kaikei-dark);
  --color-accent-light: var(--color-accent-kaikei-light);
}
[data-product="portal"] {
  --color-accent:       var(--color-accent-portal);
  --color-accent-dark:  var(--color-accent-portal-dark);
  --color-accent-light: var(--color-accent-portal-light);
}

/* ============================================================
   参考実装（任意）: 主要コンポーネントのベーススタイル
   ------------------------------------------------------------
   ここから下は「トークンを使うとこうなる」という実装リファレンス。
   既存アプリの.btn/.card等のクラス名とは衝突しない接頭辞
   (kt- = KOB Token) を付けたスケルトンとして提供する。
   frontend-engineerが既存クラスへ段階移行する際の参照用。
   ============================================================ */

.kt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: var(--border-width-thick) solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.kt-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.kt-btn[disabled],
.kt-btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

.kt-btn-primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-inverse);
}
.kt-btn-primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.kt-btn-primary:active { background: var(--color-brand-dark); border-color: var(--color-brand-dark); }

.kt-btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}
.kt-btn-accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }

.kt-btn-outline {
  background: transparent;
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.kt-btn-outline:hover { background: var(--color-bg-subtle); }

.kt-btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}
.kt-btn-danger:hover { background: var(--color-danger-dark); border-color: var(--color-danger-dark); }

.kt-btn-sm { min-height: 32px; padding: 6px 12px; font-size: var(--text-sm); }
.kt-btn-lg { min-height: 56px; padding: 16px 24px; font-size: var(--text-md); width: 100%; }

/* ---- カード ---- */
.kt-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.kt-card-accent { border-left: 4px solid var(--color-accent); }

.kt-stat-card .kt-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.kt-stat-card .kt-stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-700);
  font-variant-numeric: tabular-nums;
}

/* ---- フォーム ---- */
.kt-field { margin-bottom: var(--space-4); }
.kt-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-600);
  margin-bottom: var(--space-2);
}
.kt-input {
  width: 100%;
  padding: 10px 12px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kt-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.kt-input.is-error { border-color: var(--color-danger); }
.kt-field-error {
  font-size: var(--text-xs);
  color: var(--color-danger-text);
  margin-top: var(--space-1);
}

/* ---- バッジ ---- */
.kt-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
}
.kt-badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.kt-badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.kt-badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.kt-badge-info    { background: var(--color-info-bg);    color: var(--color-info-text); }
.kt-badge-neutral { background: var(--color-neutral-200); color: var(--color-neutral-500); }
.kt-badge-accent  { background: var(--color-accent-light); color: var(--color-accent-dark); }

/* ---- テーブル ---- */
.kt-table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: var(--text-sm); }
.kt-table th,
.kt-table td {
  border: var(--border-width) solid var(--color-border);
  padding: 9px 12px;
  text-align: left;
}
.kt-table th {
  background: var(--color-bg-subtle);
  color: var(--color-navy-700);
  font-weight: var(--font-weight-bold);
}
.kt-table tbody tr:hover { background: var(--color-neutral-50); }
.kt-table td.kt-amount { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- アラート / flash ---- */
.kt-alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.kt-alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success); }
.kt-alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text);  border-color: var(--color-danger); }
.kt-alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning); }
.kt-alert-info    { background: var(--color-info-bg);    color: var(--color-info-text);    border-color: var(--color-info); }

/* ---- 印刷 ---- */
@media print {
  .kt-no-print { display: none !important; }
  body { background: #fff; color: var(--color-neutral-900); }
  .kt-card, .kt-table { box-shadow: none !important; }
}

/* ============================================================
   レスポンシブ ブレークポイント（実値。--bp-*と対応）
   ============================================================ */
@media (max-width: 860px) {
  /* --bp-lg: サイドバー折りたたみ/ハンバーガーメニュー切替の境界 */
  .kt-sidebar-breakpoint-marker { display: block; }
}
@media (max-width: 640px) {
  /* --bp-md: フォーム/グリッドを1カラム化 */
}
@media (max-width: 480px) {
  /* --bp-sm: 小型スマートフォン向け最終調整 */
}