/* ============================================
   共通CSS変数 - variables.css
   全てのbase.htmlで読み込む
   ============================================ */

/* ============================================
   ライトモード（デフォルト）
   ============================================ */
:root {
    /* ブランドカラー */
    --line-green: #00B900;
    --line-green-dark: #009900;
    --line-green-light: #E8F5E9;

    /* 背景色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e8e8e8;
    --chat-bg: #8CABD9;

    /* メッセージ（チャット用） */
    --my-message-bg: #00B900;
    --my-message-text: #ffffff;
    --other-message-bg: #FFFFFF;
    --other-message-text: #333333;

    /* テキスト */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-light: #999999;
    --text-inverse: #ffffff;
    --text-muted: #6b7280;

    /* ボーダー・シャドウ */
    --border-color: #E0E0E0;
    --shadow-color: rgba(0, 0, 0, 0.1);

    /* ナビレール */
    --nav-rail-bg: #F4F6F8;

    /* ヘッダー */
    --header-bg: #ffffff;
    --header-border: #e5e7eb;

    /* サイドバー */
    --sidebar-bg: #3F0E40;
    --sidebar-text: #ffffff;
    --sidebar-hover: rgba(0, 185, 0, 0.08);
    --sidebar-active: rgba(0, 185, 0, 0.15);

    /* モーダル */
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);

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

    /* カード */
    --card-bg: #ffffff;

    /* ステータスカラー */
    --danger-color: #F44336;
    --warning-color: #FF9800;
    --success-color: #4CAF50;
}

/* ============================================
   ダークモード
   ============================================ */
[data-theme="dark"] {
    /* ブランドカラー（ダークモード用に調整） */
    --line-green: #00D900;
    --line-green-dark: #00B900;
    --line-green-light: #1a3a1a;

    /* 背景色 */
    --bg-primary: #1a1d21;
    --bg-secondary: #222529;
    --bg-tertiary: #2c2f33;
    --chat-bg: #1e2124;

    /* メッセージ（チャット用） */
    --my-message-bg: #00B900;
    --my-message-text: #ffffff;
    --other-message-bg: #2c2f33;
    --other-message-text: #e0e0e0;

    /* テキスト */
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-light: #707070;
    --text-inverse: #1a1d21;
    --text-muted: #9ca3af;

    /* ボーダー・シャドウ */
    --border-color: #3a3d41;
    --shadow-color: rgba(0, 0, 0, 0.3);

    /* ナビレール */
    --nav-rail-bg: #1a1d21;

    /* ヘッダー */
    --header-bg: #1a1d21;
    --header-border: #3a3d41;

    /* サイドバー */
    --sidebar-bg: #19171D;
    --sidebar-text: #e0e0e0;
    --sidebar-hover: rgba(0, 185, 0, 0.1);
    --sidebar-active: rgba(0, 185, 0, 0.2);

    /* モーダル */
    --modal-bg: #222529;
    --modal-overlay: rgba(0, 0, 0, 0.7);

    /* 入力フィールド */
    --input-bg: #2c2f33;
    --input-border: #3a3d41;

    /* カード */
    --card-bg: #222529;

    /* ステータスカラー */
    --danger-color: #ff6b6b;
    --warning-color: #ffc107;
    --success-color: #66bb6a;
}

/* ============================================
   ベーススタイル
   ============================================ */
body {
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}