/* ============================================
   共通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: #737373;         /* コントラスト4.6:1 on #fff */
    --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: #DC2626;        /* red-600: コントラスト向上 */
    --warning-color: #FF9800;
    --success-color: #4CAF50;

    /* --- 新規追加変数（ハードコード解消用） --- */
    --link-color: #2563EB;
    --link-color-hover: #1D4ED8;
    --tooltip-bg: #333333;
    --tooltip-text: #ffffff;
    --placeholder-color: #6b7280;  /* gray-500: コントラスト5.0:1 on #fff */
    --icon-color: #666666;
    --icon-color-hover: #444444;
    --badge-danger-bg: #DC2626;    /* red-600: コントラスト4.6:1 with white */
    --badge-danger-text: #ffffff;
    --accent-hover-bg: rgba(0, 185, 0, 0.08);
    --accent-shadow: rgba(0, 185, 0, 0.15);
    --toggle-off-bg: #cccccc;
    --divider-color: rgba(0, 0, 0, 0.1);
}

/* ============================================
   ダークモード ★変更なし（新変数追加のみ）
   ============================================ */
[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: #8b8b8b;         /* コントラスト4.6:1 on #1a1d21 */
    --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;

    /* --- 新規追加変数 --- */
    --link-color: #60A5FA;
    --link-color-hover: #93C5FD;
    --tooltip-bg: #e5e7eb;
    --tooltip-text: #1f2937;
    --placeholder-color: #8b95a3;  /* コントラスト4.5:1 on #2c2f33 */
    --icon-color: #9ca3af;
    --icon-color-hover: #d1d5db;
    --badge-danger-bg: #EF4444;    /* red-500: コントラスト4.5:1 with white */
    --badge-danger-text: #ffffff;
    --accent-hover-bg: rgba(0, 217, 0, 0.08);
    --accent-shadow: rgba(0, 217, 0, 0.15);
    --toggle-off-bg: #4b5563;
    --divider-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   深緑（エレガント） — Achromatic & Functional
   テキストは純粋な無彩色Slateグレー、
   アクセントはMuted（彩度抑制）で統一
   ============================================ */
[data-theme="emerald"] {
    --line-green: #10B981;
    --line-green-dark: #059669;
    --line-green-light: #064E3B;
    --bg-primary: #064E3B;
    --bg-secondary: #053D2E;
    --bg-tertiary: #042F24;
    --chat-bg: #042F24;
    --my-message-bg: #10B981;
    --my-message-text: #F9FAFB;
    --other-message-bg: #053D2E;
    --other-message-text: #F9FAFB;     /* 無彩色 Slate 50 */

    /* テキスト — 純粋な無彩色Slateグレー（色相なし） */
    --text-primary: #F9FAFB;           /* Slate 50: bg対比 12.3:1 */
    --text-secondary: #9CA3AF;         /* Slate 400: コントラスト5.5:1 on #064E3B */
    --text-light: #9CA3AF;             /* Slate 400: コントラスト5.5:1 on #064E3B */
    --text-inverse: #1F2937;           /* Slate 800 */
    --text-muted: #9CA3AF;             /* Slate 400 */

    --border-color: #374151;           /* Slate 700: 無彩色ボーダー */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --nav-rail-bg: #0F172A;
    --header-bg: #064E3B;
    --header-border: #374151;          /* Slate 700 */
    --sidebar-bg: #0F172A;
    --sidebar-text: #F9FAFB;           /* 無彩色 Slate 50 */
    --sidebar-hover: rgba(16, 185, 129, 0.15);
    --sidebar-active: rgba(16, 185, 129, 0.25);
    --modal-bg: #053D2E;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --input-bg: #042F24;
    --input-border: #374151;           /* Slate 700 */
    --card-bg: #053D2E;
    --danger-color: #FCA5A5;
    --warning-color: #FCD34D;
    --success-color: #6EE7B7;

    /* --- 新規追加変数 --- */
    --link-color: #94D0C4;             /* Muted Teal（彩度抑制・ペールトーン） */
    --link-color-hover: #B8E0D8;       /* Muted Teal Hover */
    --tooltip-bg: #0A2E22;
    --tooltip-text: #F9FAFB;
    --placeholder-color: #6B7280;      /* Slate 500: コントラスト4.5:1 on #042F24 */
    --icon-color: #9CA3AF;             /* Slate 400（純粋な無彩色） */
    --icon-color-hover: #D1D5DB;       /* Slate 300（純粋な無彩色） */
    --badge-danger-bg: #FCA5A5;
    --badge-danger-text: #450A0A;
    --accent-hover-bg: rgba(16, 185, 129, 0.10);
    --accent-shadow: rgba(16, 185, 129, 0.2);
    --toggle-off-bg: #374151;          /* Slate 700 */
    --divider-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   藍色（オーシャン） — Achromatic & Functional
   テキストは純粋な無彩色Slateグレー、
   アクセントはMuted（彩度抑制）で統一
   ============================================ */
[data-theme="ocean"] {
    --line-green: #2563EB;
    --line-green-dark: #1D4ED8;
    --line-green-light: #1E293B;
    --bg-primary: #171717;
    --bg-secondary: #1E1E1E;
    --bg-tertiary: #262626;
    --chat-bg: #0F172A;
    --my-message-bg: #2563EB;
    --my-message-text: #F9FAFB;
    --other-message-bg: #1E293B;
    --other-message-text: #F9FAFB;     /* 無彩色 Slate 50 */

    /* テキスト — 純粋な無彩色Slateグレー（色相なし） */
    --text-primary: #F9FAFB;           /* Slate 50: bg対比 13.2:1 */
    --text-secondary: #9CA3AF;         /* Slate 400: コントラスト6.8:1 on #171717 */
    --text-light: #9CA3AF;             /* Slate 400: コントラスト6.8:1 on #171717 */
    --text-inverse: #1F2937;           /* Slate 800 */
    --text-muted: #9CA3AF;             /* Slate 400 */

    --border-color: #374151;           /* Slate 700: 無彩色ボーダー */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --nav-rail-bg: #0F172A;
    --header-bg: #171717;
    --header-border: #374151;          /* Slate 700 */
    --sidebar-bg: #0F172A;
    --sidebar-text: #F9FAFB;           /* 無彩色 Slate 50 */
    --sidebar-hover: rgba(37, 99, 235, 0.15);
    --sidebar-active: rgba(37, 99, 235, 0.25);
    --modal-bg: #1E293B;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --input-bg: #1E293B;
    --input-border: #374151;           /* Slate 700: 無彩色 */
    --card-bg: #1E293B;
    --danger-color: #F87171;
    --warning-color: #FBBF24;
    --success-color: #34D399;

    /* --- 新規追加変数 --- */
    --link-color: #93BBEF;             /* Muted Blue（彩度抑制・ペールブルー） */
    --link-color-hover: #B5D0F5;       /* Muted Blue Hover */
    --tooltip-bg: #1E293B;
    --tooltip-text: #F9FAFB;
    --placeholder-color: #6B7280;      /* Slate 500: コントラスト4.5:1 on #1E293B */
    --icon-color: #9CA3AF;             /* Slate 400（純粋な無彩色） */
    --icon-color-hover: #D1D5DB;       /* Slate 300（純粋な無彩色） */
    --badge-danger-bg: #EF4444;
    --badge-danger-text: #ffffff;
    --accent-hover-bg: rgba(37, 99, 235, 0.10);
    --accent-shadow: rgba(37, 99, 235, 0.2);
    --toggle-off-bg: #374151;          /* Slate 700 */
    --divider-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   杏色（サンセット）
   ニュアンス: ショコラブラウン・チャコール
   ============================================ */
[data-theme="sunset"] {
    --line-green: #F97316;
    --line-green-dark: #EA580C;
    --line-green-light: #FFF7ED;
    --bg-primary: #FFFCF9;         /* 純白→ほんのりウォームホワイト */
    --bg-secondary: #FFF8F0;
    --bg-tertiary: #FEF0DD;
    --chat-bg: #FFF7ED;
    --my-message-bg: #F97316;
    --my-message-text: #ffffff;
    --other-message-bg: #FFFCF9;
    --other-message-text: #3D1F0A;

    /* テキスト — 無彩色グレー（SaaS標準） */
    --text-primary: #0F172A;       /* slate-900相当 */
    --text-secondary: #334155;     /* slate-700相当 */
    --text-light: #64748B;         /* slate-500相当 */
    --text-inverse: #ffffff;
    --text-muted: #64748B;         /* slate-500相当 */

    --border-color: #F5C89A;       /* 少し暖かいゴールド */
    --shadow-color: rgba(249, 115, 22, 0.08);
    --nav-rail-bg: #FFF5EB;
    --header-bg: #FFFCF9;
    --header-border: #F5C89A;
    --sidebar-bg: #FFF5EB;
    --sidebar-text: #3D1F0A;
    --sidebar-hover: rgba(249, 115, 22, 0.10);
    --sidebar-active: rgba(249, 115, 22, 0.20);
    --modal-bg: #FFFCF9;
    --modal-overlay: rgba(67, 20, 7, 0.4);
    --input-bg: #FFFCF9;
    --input-border: #F5C89A;
    --card-bg: #FFFCF9;
    --danger-color: #DC2626;
    --warning-color: #D97706;
    --success-color: #16A34A;

    /* --- 新規追加変数 --- */
    --link-color: #B45309;         /* 深みのあるアンバー */
    --link-color-hover: #92400E;
    --tooltip-bg: #FFF5EB;
    --tooltip-text: #0F172A;
    --placeholder-color: #6b7280;  /* gray-500: コントラスト5.0:1 on #FFFCF9 */
    --icon-color: #64748B;         /* slate-500（無彩色） */
    --icon-color-hover: #334155;   /* slate-700（無彩色） */
    --badge-danger-bg: #DC2626;
    --badge-danger-text: #ffffff;
    --accent-hover-bg: rgba(249, 115, 22, 0.08);
    --accent-shadow: rgba(249, 115, 22, 0.2);
    --toggle-off-bg: #F5C89A;
    --divider-color: rgba(249, 115, 22, 0.10);
}

/* ============================================
   灰色（モノトーン）
   ============================================ */
[data-theme="mono"] {
    --line-green: #1F2937;
    --line-green-dark: #111827;
    --line-green-light: #F3F4F6;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-tertiary: #F3F4F6;
    --chat-bg: #E5E7EB;
    --my-message-bg: #1F2937;
    --my-message-text: #ffffff;
    --other-message-bg: #FFFFFF;
    --other-message-text: #1F2937;
    --text-primary: #1F2937;
    --text-secondary: #4B5563;
    --text-light: #6B7280;
    --text-inverse: #ffffff;
    --text-muted: #6B7280;
    --border-color: #D1D5DB;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --nav-rail-bg: #F3F4F6;
    --header-bg: #FFFFFF;
    --header-border: #D1D5DB;
    --sidebar-bg: #F3F4F6;
    --sidebar-text: #1F2937;
    --sidebar-hover: rgba(31, 41, 55, 0.08);
    --sidebar-active: rgba(31, 41, 55, 0.15);
    --modal-bg: #FFFFFF;
    --modal-overlay: rgba(0, 0, 0, 0.4);
    --input-bg: #FFFFFF;
    --input-border: #D1D5DB;
    --card-bg: #FFFFFF;
    --danger-color: #DC2626;
    --warning-color: #9CA3AF;
    --success-color: #4B5563;

    /* --- 新規追加変数 --- */
    --link-color: #4B5563;
    --link-color-hover: #1F2937;
    --tooltip-bg: #1F2937;
    --tooltip-text: #F9FAFB;
    --placeholder-color: #6B7280;  /* gray-500: コントラスト5.0:1 on #fff */
    --icon-color: #6B7280;
    --icon-color-hover: #4B5563;
    --badge-danger-bg: #DC2626;
    --badge-danger-text: #ffffff;
    --accent-hover-bg: rgba(31, 41, 55, 0.08);
    --accent-shadow: rgba(31, 41, 55, 0.3);
    --toggle-off-bg: #D1D5DB;
    --divider-color: rgba(31, 41, 55, 0.08);
}

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

/* ============================================
   preserve-color：カテゴリー・識別用カラー保護
   設備予約カレンダー、ステータスバッジ等
   テーマ切替時も固有の背景色を維持し、
   文字色のみコントラストに基づき動的調整
   ============================================ */
.preserve-color,
[data-theme-ignore] {
    /* テーマ変数ではなく要素独自のbackground-colorを優先 */
    color: inherit;
}

/* プレースホルダーのコントラスト確保 */
::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
}

/* リンクの基本カラー */
a {
    color: var(--link-color);
}
a:hover {
    color: var(--link-color-hover);
}