/**
 * 統一CSS変数定義
 * 全アプリケーション共通のデザイントークン
 * 
 * 命名規則:
 * - 色: --color-{用途}
 * - 背景: --bg-{階層}
 * - テキスト: --text-{重要度}
 * - 境界線: --border-{用途}
 * - その他: --{カテゴリ}-{詳細}
 */

:root {
  /* ===========================
     カラーパレット（セマンティック）
     =========================== */
  
  /* ブランド・アクション色 */
  --color-primary: #4a9eff;        /* メインブランドカラー */
  --color-primary-hover: #3a8eef;  /* ホバー時 */
  --color-primary-light: #e3f2fd;  /* 薄い背景用 */
  --color-primary-alpha: rgba(74, 158, 255, 0.1); /* 半透明版 */
  
  --color-success: #10b981;        /* 成功・完了 */
  --color-success-hover: #0ea471;
  
  --color-warning: #f59e0b;        /* 警告・注意 */
  --color-warning-hover: #e58e00;
  
  --color-danger: #ef4444;         /* エラー・削除 */
  --color-danger-hover: #dc2626;
  
  --color-info: #17a2b8;           /* 情報・ヒント */
  --color-info-hover: #138496;
  
  /* 特殊用途 */
  --color-favorite: #f44336;       /* お気に入り */
  --color-accent: #6366f1;         /* アクセント */
  
  /* ===========================
     背景色（階層別）
     =========================== */
  
  --bg-primary: #1a1a1a;           /* メイン背景 */
  --bg-secondary: #2d2d2d;         /* カード・セクション */
  --bg-tertiary: #3a3a3a;          /* 入力欄・サブ要素 */
  --bg-elevated: #404040;          /* ホバー・選択状態 */
  --bg-modal: #222222;             /* モーダル背景 */
  --bg-overlay: rgba(0, 0, 0, 0.6); /* オーバーレイ */
  --bg-elevated-alpha: rgba(255, 255, 255, 0.1); /* 半透明の浮き上がり */
  --bg-surface: #2a2a2a;           /* サーフェス（カード等） */
  --bg-card: #2d2d2d;             /* カード背景 */
  --bg-skeleton: #3a3a3a;         /* スケルトンローディング */
  --bg-hover: #4a4a4a;            /* ホバー状態（より明るい） */
  --bg-disabled: #666666;         /* 無効状態 */
  
  /* ===========================
     テキスト色
     =========================== */
  
  --text-primary: #ffffff;         /* メインテキスト */
  --text-secondary: #cccccc;       /* サブテキスト */
  --text-muted: #999999;          /* 補助・無効 */
  --text-disabled: #666666;       /* 無効状態 */
  --text-inverse: #1a1a1a;        /* 反転（明るい背景用） */
  
  /* ===========================
     境界線
     =========================== */
  
  --border-default: #404040;       /* 通常の境界線 */
  --border-light: rgba(255, 255, 255, 0.1);  /* 薄い境界線 */
  --border-hover: rgba(255, 255, 255, 0.2);  /* ホバー時 */
  --border-focus: var(--color-primary);      /* フォーカス時 */
  --border-divider: #333333;       /* 区切り線 */
  --border-elevated: #555555;      /* より濃い境界線 */
  
  /* ===========================
     影
     =========================== */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  
  /* ===========================
     スペーシング
     =========================== */
  
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */
  
  /* ===========================
     タイポグラフィ
     =========================== */
  
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===========================
     角丸
     =========================== */
  
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;  /* 完全な円 */
  
  /* ===========================
     トランジション
     =========================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* ===========================
     z-index
     =========================== */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;
}

/* ===========================
   後方互換マッピング
   既存コードとの互換性を保つ
   =========================== */

:root {
  /* base.css の変数をマッピング */
  --primary-bg: var(--bg-primary);
  --secondary-bg: var(--bg-secondary);
  --tertiary-bg: var(--bg-tertiary);
  --card-bg: var(--bg-secondary);
  --modal-bg: var(--bg-modal);
  --hover-bg: var(--bg-elevated);
  
  --primary-text: var(--text-primary);
  --secondary-text: var(--text-secondary);
  --muted-text: var(--text-muted);
  
  --primary-accent: var(--color-primary);
  --secondary-accent: var(--color-accent);
  
  --border-color: var(--border-default);
  --border-color-base: var(--border-default);
  --divider-color: var(--border-divider);
  
  /* ui-components.css の変数をマッピング */
  --primary-color: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-light: var(--color-primary-light);
  
  --success-color: var(--color-success);
  --success-hover: var(--color-success-hover);
  
  --warning-color: var(--color-warning);
  --warning-hover: var(--color-warning-hover);
  
  --danger-color: var(--color-danger);
  --danger-hover: var(--color-danger-hover);
  
  --info-color: var(--color-info);
  --info-hover: var(--color-info-hover);
  
  --bg-color: var(--bg-secondary);
  --surface-bg: var(--bg-tertiary);
  
  --text-primary: var(--text-primary);
  --text-secondary: var(--text-secondary);
  --text-disabled: var(--text-disabled);
  
  --favorite-active: var(--color-favorite);
  --favorite-inactive: var(--text-muted);
  
  /* その他の互換性 */
  --shadow-light: var(--shadow-sm);
  --shadow-medium: var(--shadow-md);
  --shadow-heavy: var(--shadow-lg);
}