/* CSS カスタムプロパティ（変数）の定義 */

:root {
  /* フォントファミリー
   * 日本語フォントを含むシステムフォントスタック
   * 各OS/ブラウザで最適なフォントが自動選択される
   */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* カラーパレット */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-success: #22c55e;
  --color-success-dark: #16a34a;
  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;

  /* テキストカラー */
  --color-text-primary: #1e293b;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;

  /* ボーダー・背景カラー */
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-bg-secondary: #f1f5f9;
  --color-bg-muted: #f8fafc;

  /* ステータスカラー */
  --color-status-pending-bg: #fef3c7;
  --color-status-pending-text: #92400e;
  --color-status-confirmed-bg: #dcfce7;
  --color-status-confirmed-text: #166534;
  --color-status-cancelled-bg: #fee2e2;
  --color-status-cancelled-text: #991b1b;
  --color-status-completed-bg: #e0e7ff;
  --color-status-completed-text: #3730a3;
  --color-status-no-show-bg: #f1f5f9;
  --color-status-no-show-text: #475569;

  /* シャドウ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08);

  /* ボーダーラディウス */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* レイアウト幅 */
  --layout-width-compact: 700px;
  --layout-width-form: 800px;
  --layout-width-default: 900px;
  --layout-width-wide: 1000px;

  /* z-index の階層管理
   * 用途に応じて適切な値を使用することで、予期しない表示問題を防ぐ
   */

  /* 基本要素（ヘッダー、ナビゲーション、マップUI等） */
  --z-index-base: 1000;

  /* ドロップダウン、ツールチップ等 */
  --z-index-dropdown: 1010;

  /* モーダル、ダイアログ */
  --z-index-modal: 1100;

  /* 通知、フラッシュメッセージ（最上位） */
  --z-index-notification: 1200;

  /* ローディングオーバーレイ */
  --z-index-loading: 1300;
}