/* ========================================
   ICT教育支援アプリ - 色管理CSS
   colors.css (v2.1 - インライン用語解説対応)
   1箇所変更で全自動対応
======================================== */

/* ========================================
   🎨 メインカラーパレット（ここだけ変更すればOK！）
======================================== */
:root {
  /* 🔥 ここを変更するだけで全テーマが自動変更される */
--main-hue: 262;           /* 色相 */
--main-saturation: 69%;   /* 彩度 */
--main-lightness: 44%;     /* 明度 */
    
  /* 🎨 他の色に変更したい場合の参考値：
     紫: --main-hue: 291; --main-saturation: 64%; --main-lightness: 42%;
     青: --main-hue: 207; --main-saturation: 90%; --main-lightness: 54%;
     緑: --main-hue: 160; --main-saturation: 46%; --main-lightness: 34%;
     緑: --main-hue: 122; --main-saturation: 39%; --main-lightness: 49%;
     オレンジ: --main-hue: 36; --main-saturation: 100%; --main-lightness: 50%;
     赤: --main-hue: 4; --main-saturation: 90%; --main-lightness: 58%;
  */
  
  /* === 🤖 自動生成プライマリカラー === */
  --color-primary: hsl(var(--main-hue), var(--main-saturation), var(--main-lightness));
  --color-primary-hover: hsl(var(--main-hue), var(--main-saturation), calc(var(--main-lightness) - 5%));
  --color-primary-light: hsl(var(--main-hue), calc(var(--main-saturation) - 10%), calc(var(--main-lightness) + 15%));
  --color-primary-dark: hsl(var(--main-hue), calc(var(--main-saturation) + 10%), calc(var(--main-lightness) - 15%));
  
  /* === セカンダリカラー === */
  --color-secondary: hsl(var(--main-hue), calc(var(--main-saturation) + 5%), calc(var(--main-lightness) - 10%));
  --color-accent: hsl(calc(var(--main-hue) + 30), 80%, 55%);  /* 色相を30度ずらした補色 */
  
  /* === ステータスカラー === */
  --color-success: #4caf50;              /* 成功グリーン */
  --color-warning: #ff9800;              /* 警告オレンジ */
  --color-danger: #f44336;               /* エラーレッド */
  --color-info: #2196f3;                 /* 情報ブルー */
  
  /* === 🆕 特殊コンポーネント用カラー === */
  --color-key-term: #856404;             /* キーターム用ブラウン */
  --color-parent-accent: #2e7d32;        /* 保護者向けアクセントグリーン */
  --color-educator-accent: #e65100;      /* 教育者向けアクセントオレンジ */
  --color-inclusive-accent: var(--color-primary);  /* インクルーシブアクセント（メイン色） */

  /* === 🆕 拡張カラー（TOC用） === */
  --color-warning-light: #fff3e0;        /* 警告ライト背景 */
  --color-warning-dark: #e65100;         /* 警告ダーク文字 */
  --color-accent-light: hsl(var(--main-hue), 30%, 97%);  /* アクセントライト背景（自動生成） */
  --color-success-light: #f8fff9;        /* 成功ライト背景 */
  --color-error-light: #fff8f8;          /* エラーライト背景 */

  /* === 🆕 インライン用語解説カラー（ライトモード） === */
  --color-inline-term: #2563eb;
  --color-inline-term-border: #2563eb;
  --color-inline-term-hover-bg: #eff6ff;
  --color-inline-term-active-bg: #dbeafe;
  --color-term-explanation-bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  --color-term-explanation-border: #0ea5e9;
  --color-term-explanation-text: #0c4a6e;
  --color-term-explanation-title: #075985;
  --color-term-explanation-content: #164e63;
  --color-term-explanation-icon-bg: #0ea5e9;
  --color-term-explanation-icon-text: #ffffff;
  
  /* === テキストカラー === */
  --color-text-primary: #333333;         /* メインテキスト */
  --color-text-secondary: #666666;       /* サブテキスト */
  --color-text-tertiary: #999999;        /* 補助テキスト */
  --color-text-light: #ffffff;           /* 白文字 */
  --color-text-muted: #777777;           /* ミュートテキスト */
  
  /* === 背景色 === */
  --color-bg-primary: #ffffff;           /* メイン背景 */
  --color-bg-secondary: #f8f9fa;         /* サブ背景 */
  --color-bg-tertiary: #e9ecef;          /* 第三背景 */
  --color-bg-light: #f5f5f7;             /* ライト背景 */
  
  /* === ボーダー色 === */
  --color-border-primary: #e0e0e0;       /* メインボーダー */
  --color-border-secondary: #f0f0f0;     /* サブボーダー */
  --color-border-focus: var(--color-primary);  /* フォーカスボーダー（自動） */
  --color-border-light: #eeeeee;         /* ライトボーダー */
  
  /* === 章別カラー（ライトモード） === */
  --chapter1-primary: #4caf50;           /* 第1章：緑系 */
  --chapter1-secondary: #66bb6a;
  --chapter2-primary: #1976d2;           /* 第2章：青系 */
  --chapter2-secondary: #2196f3;
  --chapter3-primary: #f57c00;           /* 第3章：オレンジ系 */
  --chapter3-secondary: #ff9800;
  --chapter4-primary: #d32f2f;           /* 第4章：赤系 */
  --chapter4-secondary: #f44336;
  --chapter5-primary: #4d11c3;      /* 第5章：メイン色（自動） */
  --chapter5-secondary:#6f27fc;  /* 第5章：明るいメイン色（自動） */

  /* === 🆕 グラデーション定義 === */
  --bg-gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --header-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --success-gradient: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
  --error-gradient: linear-gradient(135deg, #fff8f8 0%, #ffe8e8 100%);
}

/* ========================================
   🌙 ダークモード色設定（完全自動対応）
======================================== */
[data-theme="dark"] {
  /* === 🤖 自動生成プライマリカラー（ダークモード用） === */
  --color-primary: hsl(var(--main-hue), calc(var(--main-saturation) - 5%), calc(var(--main-lightness) + 25%));
  --color-primary-hover: hsl(var(--main-hue), calc(var(--main-saturation) - 10%), calc(var(--main-lightness) + 20%));
  --color-primary-light: hsl(var(--main-hue), calc(var(--main-saturation) - 15%), calc(var(--main-lightness) + 35%));
  --color-primary-dark: hsl(var(--main-hue), var(--main-saturation), var(--main-lightness));
  --color-secondary: hsl(var(--main-hue), var(--main-saturation), var(--main-lightness));
  
  /* === ステータスカラー（ダークモード調整） === */
  --color-success: #66bb6a;              /* 明るい緑 */
  --color-warning: #ffb74d;              /* 明るいオレンジ */
  --color-danger: #ef5350;               /* 明るい赤 */
  --color-info: #29b6f6;                 /* 明るいブルー */
  
  /* === 🆕 特殊コンポーネント用カラー（ダークモード調整） === */
  --color-key-term: #d4a574;             /* より明るいブラウン */
  --color-parent-accent: #4caf50;        /* 明るいグリーン */
  --color-educator-accent: #ffb74d;      /* 明るいオレンジ */
  --color-inclusive-accent: var(--color-primary);  /* メイン色（自動） */

  /* === 🆕 拡張カラー（ダークモード） === */
  --color-warning-light: rgba(255, 152, 0, 0.1);
  --color-warning-dark: #ffb74d;
  --color-accent-light: hsla(var(--main-hue), 30%, 70%, 0.1);  /* 自動生成 */
  --color-success-light: rgba(40, 167, 69, 0.1);
  --color-error-light: rgba(220, 53, 69, 0.1);

  /* === 🆕 インライン用語解説カラー（ダークモード） === */
  --color-inline-term: #60a5fa;
  --color-inline-term-border: #60a5fa;
  --color-inline-term-hover-bg: rgba(96, 165, 250, 0.1);
  --color-inline-term-active-bg: rgba(96, 165, 250, 0.2);
  --color-term-explanation-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  --color-term-explanation-border: #60a5fa;
  --color-term-explanation-text: #e2e8f0;
  --color-term-explanation-title: #f1f5f9;
  --color-term-explanation-content: #cbd5e1;
  --color-term-explanation-icon-bg: #60a5fa;
  --color-term-explanation-icon-text: #1e293b;
  
  /* === 🆕 グラデーション（ダークモード） === */
  --bg-gradient-primary: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  --header-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --success-gradient: rgba(40, 167, 69, 0.1);
  --error-gradient: rgba(220, 53, 69, 0.1);
 
  /* === テキストカラー（ダークモード） === */
  --color-text-primary: #ffffff;         /* 白文字 */
  --color-text-secondary: #e0e0e0;       /* 明るいグレー */
  --color-text-tertiary: #b0b0b0;        /* ミドルグレー */
  --color-text-light: #000000;           /* 黒文字（反転） */
  --color-text-muted: #aaaaaa;           /* ミュートグレー */
  
  /* === 背景色（ダークモード） === */
  --color-bg-primary: #121212;           /* ダーク背景 */
  --color-bg-secondary: #1e1e1e;         /* ダークサブ背景 */
  --color-bg-tertiary: #2a2a2a;          /* ダーク第三背景 */
  --color-bg-light: #181818;             /* ダークライト背景 */
  
  /* === ボーダー色（ダークモード） === */
  --color-border-primary: #404040;       /* ダークボーダー */
  --color-border-secondary: #303030;     /* ダークサブボーダー */
  --color-border-focus: var(--color-primary);  /* フォーカス（自動） */
  --color-border-light: #505050;         /* ダークライトボーダー */
  
  /* === 章別カラー（ダークモード調整） === */
  --chapter1-primary: #66bb6a;           /* 第1章：明るい緑 */
  --chapter1-secondary: #81c784;
  --chapter2-primary: #42a5f5;           /* 第2章：明るい青 */
  --chapter2-secondary: #64b5f6;
  --chapter3-primary: #ffb74d;           /* 第3章：明るいオレンジ */
  --chapter3-secondary: #ffcc02;
  --chapter4-primary: #ef5350;           /* 第4章：明るい赤 */
  --chapter4-secondary: #f48fb1;
  --chapter5-primary: #4d11c3;      /* 第5章：メイン色（自動） */
  --chapter5-secondary:#6f27fc;  /* 第5章：明るいメイン色（自動） */
}

/* ========================================
   📱 システム設定に基づく自動ダークモード対応
======================================== */
@media (prefers-color-scheme: dark) {
  /* data-theme属性がない場合のみ、システム設定に従う */
  :root:not([data-theme]) {
    /* ダークモードの色設定を継承 */
    --color-primary: hsl(var(--main-hue), calc(var(--main-saturation) - 5%), calc(var(--main-lightness) + 25%));
    --color-primary-hover: hsl(var(--main-hue), calc(var(--main-saturation) - 10%), calc(var(--main-lightness) + 20%));
    --color-primary-light: hsl(var(--main-hue), calc(var(--main-saturation) - 15%), calc(var(--main-lightness) + 35%));
    --color-primary-dark: hsl(var(--main-hue), var(--main-saturation), var(--main-lightness));
    --color-secondary: hsl(var(--main-hue), var(--main-saturation), var(--main-lightness));
    
    --color-success: #66bb6a;
    --color-warning: #ffb74d;
    --color-danger: #ef5350;
    --color-info: #29b6f6;
    
    /* インライン用語解説（システムダークモード） */
    --color-inline-term: #60a5fa;
    --color-inline-term-border: #60a5fa;
    --color-inline-term-hover-bg: rgba(96, 165, 250, 0.1);
    --color-inline-term-active-bg: rgba(96, 165, 250, 0.2);
    --color-term-explanation-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --color-term-explanation-border: #60a5fa;
    --color-term-explanation-text: #e2e8f0;
    --color-term-explanation-title: #f1f5f9;
    --color-term-explanation-content: #cbd5e1;
    --color-term-explanation-icon-bg: #60a5fa;
    --color-term-explanation-icon-text: #1e293b;
    
    --color-text-primary: #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-text-tertiary: #b0b0b0;
    --color-text-light: #000000;
    --color-text-muted: #aaaaaa;
    
    --color-bg-primary: #121212;
    --color-bg-secondary: #1e1e1e;
    --color-bg-tertiary: #2a2a2a;
    --color-bg-light: #181818;
    
    --color-border-primary: #404040;
    --color-border-secondary: #303030;
    --color-border-focus: var(--color-primary);
    --color-border-light: #505050;
  }
}

/* ========================================
   🖱️ テキスト選択時の色設定
======================================== */

/* ライトモード時の選択色 */
::selection {
    background: var(--color-primary);
    color: #ffffff;
}

::-moz-selection {
    background: var(--color-primary);
    color: #ffffff;
}

/* ダークモード時の選択色 */
[data-theme="dark"] ::selection {
    background: #60a5fa;
    color: #1e293b; /* 濃い色で読みやすく */
}

[data-theme="dark"] ::-moz-selection {
    background: #60a5fa;
    color: #1e293b;
}

/* システムダークモード時の選択色 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) ::selection {
        background: #60a5fa;
        color: #1e293b;
    }
    
    :root:not([data-theme]) ::-moz-selection {
        background: #60a5fa;
        color: #1e293b;
    }
}

/* 用語解説内での特別な選択色 */
.term-explanation ::selection {
    background: rgba(255, 255, 255, 0.3);
    color: #075985;
}

.term-explanation ::-moz-selection {
    background: rgba(255, 255, 255, 0.3);
    color: #075985;
}

[data-theme="dark"] .term-explanation ::selection {
    background: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

[data-theme="dark"] .term-explanation ::-moz-selection {
    background: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}
/* ========================================
   🔧 後方互換性のためのエイリアス
======================================== */
:root {
  /* 旧変数名のエイリアス */
  --accent-primary: var(--color-primary);
  --accent-secondary: var(--color-secondary);
  --accent-success: var(--color-success);
  --accent-warning: var(--color-warning);
  --accent-error: var(--color-danger);
  
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-tertiary: var(--color-bg-tertiary);
  --bg-light: var(--color-bg-light);
  
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --text-inverse: var(--color-text-light);
  --text-muted: var(--color-text-muted);
  
  --border-primary: var(--color-border-primary);
  --border-secondary: var(--color-border-secondary);
  --border-focus: var(--color-border-focus);
  --border-light: var(--color-border-light);
}

/* ========================================
   🎨 テーマ切り替え用のヘルパークラス
======================================== */

/* 即座のテーマ切り替えサポート */
.theme-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 強制的にライトテーマの色を適用 */
.force-light-theme {
  --color-primary: hsl(var(--main-hue), var(--main-saturation), var(--main-lightness));
  --color-bg-primary: #ffffff;
  --color-text-primary: #333333;
}

/* 強制的にダークテーマの色を適用 */
.force-dark-theme {
  --color-primary: hsl(var(--main-hue), calc(var(--main-saturation) - 5%), calc(var(--main-lightness) + 25%));
  --color-bg-primary: #121212;
  --color-text-primary: #ffffff;
}

/* ========================================
   📱 簡易色変更システム（さらに簡単に）
======================================== */

/* 🔥 1行でテーマ変更（HSL値設定） */
.theme-blue    { --main-hue: 207; --main-saturation: 90%; --main-lightness: 54%; }
.theme-purple  { --main-hue: 291; --main-saturation: 64%; --main-lightness: 42%; }
.theme-green   { --main-hue: 122; --main-saturation: 39%; --main-lightness: 49%; }
.theme-orange  { --main-hue: 36;  --main-saturation: 100%; --main-lightness: 50%; }
.theme-red     { --main-hue: 4;   --main-saturation: 90%; --main-lightness: 58%; }
.theme-pink    { --main-hue: 340; --main-saturation: 82%; --main-lightness: 52%; }

/* 🔥 データ属性による自動切り替え */
[data-color-theme="blue"]   { --main-hue: 207; --main-saturation: 90%; --main-lightness: 54%; }
[data-color-theme="purple"] { --main-hue: 291; --main-saturation: 64%; --main-lightness: 42%; }
[data-color-theme="green"]  { --main-hue: 122; --main-saturation: 39%; --main-lightness: 49%; }
[data-color-theme="orange"] { --main-hue: 36;  --main-saturation: 100%; --main-lightness: 50%; }
[data-color-theme="red"]    { --main-hue: 4;   --main-saturation: 90%; --main-lightness: 58%; }
[data-color-theme="pink"]   { --main-hue: 340; --main-saturation: 82%; --main-lightness: 52%; }

/* ========================================
   💡 使用方法のコメント
======================================== */

/*
🎯 色変更方法：

方法1: CSS変数を直接変更
--main-hue: 291;        (色相: 0-360)
--main-saturation: 64%; (彩度: 0-100%)
--main-lightness: 42%;  (明度: 0-100%)

方法2: HTMLにクラス追加
<body class="theme-green">

方法3: データ属性で切り替え
<html data-color-theme="orange">

方法4: JavaScriptで動的変更
document.documentElement.style.setProperty('--main-hue', '122');

🆕 インライン用語解説対応：
- ライトモード・ダークモード自動対応
- システム設定による自動切り替え対応
- 手動テーマ切り替え対応

これで完全自動でライト・ダークモード両方が変更されます！
*/