/* ============================================
   デザイントークン（CSS変数定義）
   全ページで共通の値を定義
   ============================================ */

:root {
   /* ==========================================
     カラー
     ========================================== */

   /* プライマリーカラー */
   --color-primary: #2563eb;
   --color-primary-hover: #1d4ed8;
   --color-primary-light: #eff6ff;

   /* 背景色（白基調） */
   --color-bg-primary: #ffffff;
   --color-bg-secondary: #f9f9f9;
   --color-bg-hover: #f3f4f6;
   --color-bg-card: #f9f9f9;

   /* テキストカラー */
   --color-text-primary: #1f2937;
   --color-text-secondary: #6b7280;
   --color-text-muted: #9ca3af;
   --color-text-inverse: #ffffff;

   /* ボーダー */
   --color-border: #e5e7eb;
   --color-border-hover: #d1d5db;

   /* ステータスカラー */
   --color-success: #10b981;
   --color-warning: #f59e0b;
   --color-error: #ef4444;
   --color-info: #3b82f6;
   --color-success-light: #d1fae5;
   --color-warning-light: #fef3c7;
   --color-error-light: #fee2e2;
   --color-info-light: #dbeafe;

   /* ==========================================
     レイアウト
     ========================================== */

   --header-height: 44px;
   --action-bar-height: 48px;
   --sidebar-width: 280px;
   --max-content-width: 1200px;

   /* ==========================================
     スペーシング
     ========================================== */

   --space-xs: 4px;
   --space-sm: 8px;
   --space-md: 16px;
   --space-lg: 24px;
   --space-xl: 32px;
   --space-2xl: 48px;

   /* ==========================================
     タイポグラフィ
     ========================================== */

   --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      'Helvetica Neue', Arial, 'Noto Sans JP', sans-serif;

   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-md: 16px;
   --font-size-lg: 18px;
   --font-size-xl: 20px;
   --font-size-2xl: 24px;

   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* ==========================================
     ボーダーラディウス
     ========================================== */

   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-full: 9999px;

   /* ==========================================
     シャドウ
     ========================================== */

   --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

   /* ==========================================
     トランジション
     ========================================== */

   --transition-fast: 150ms ease-in-out;
   --transition-normal: 250ms ease-in-out;
   --transition-slow: 350ms ease-in-out;

   /* ==========================================
     z-index
     ========================================== */

   --z-dropdown: 1000;
   --z-sticky: 1100;
   --z-overlay: 1999;
   --z-mobile-menu: 2000;
   --z-modal: 3000;

   /* ==========================================
     ボタン
     ========================================== */

   --btn-height-sm: 28px;
   --btn-height-md: 32px;
   --btn-height-lg: 40px;
   --btn-height-xl: 48px;

   --btn-padding-sm: 4px 12px;
   --btn-padding-md: 6px 16px;
   --btn-padding-lg: 8px 20px;
   --btn-padding-xl: 10px 24px;

   --btn-font-size-sm: 12px;
   --btn-font-size-md: 14px;
   --btn-font-size-lg: 16px;

   --color-btn-primary: #0d0d0d;
   --color-btn-primary-text: #f3f3f3;

   /* キャンセルボタン */
   --color-btn-cancel: #f9f9f9;
   --color-btn-cancel-text: #0d0d0d;

   /* 入力フィールド */
   --color-bg-input: #ffffff;
}

/* ==========================================
   ダークモード
   ========================================== */

[data-theme="dark"] {
   /* プライマリーカラー */
   --color-primary: #3b82f6;
   --color-primary-hover: #2563eb;
   --color-primary-light: #1e3a8a;

   /* 背景色（黒基調） */
   --color-bg-primary: #212121;
   --color-bg-secondary: #181818;
   --color-bg-hover: #2A2A2A;
   --color-bg-card: #181818;

   /* テキストカラー */
   --color-text-primary: #f1f5f9;
   --color-text-secondary: #cbd5e1;
   --color-text-muted: #94a3b8;
   --color-text-inverse: #0f172a;

   /* ボーダー */
   --color-border: #475569;
   --color-border-hover: #64748b;

   /* シャドウ（ダークモード用） */
   --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);

   /* ボタン */
   --color-btn-primary: #f9f9f9;
   --color-btn-primary-text: #0d0d0d;

   /* キャンセルボタン */
   --color-btn-cancel: #0d0d0d;
   --color-btn-cancel-text: #f3f3f3;

   /* 入力フィールド */
   --color-bg-input: #303030;
}

/* ==========================================
   基本スタイル適用
   ========================================== */

body {
   background-color: var(--color-bg-primary);
   color: var(--color-text-primary);
   font-family: var(--font-family);
   margin: 0;
   padding: 0;
   line-height: 1.6;
}

/* user-form.js の classList.toggle('dark-mode') との互換性維持 */
body.dark-mode {
   background-color: #1E1E1E;
   color: #f9fafb;
}