/**
 * コマログ - テーマ定義
 * 
 * CSS変数を使用して複数のテーマを定義
 * data-theme属性で切り替え可能
 */

/* デフォルトテーマ: ミルクティー × くすみピンク */
:root,
[data-theme="milktea"] {
    /* 背景色 */
    --bg-gradient-from: #f5f1ed;
    --bg-gradient-to: #f4e4dd;
    
    /* メインカラー */
    --primary: #d4a5a5;
    --primary-dark: #c08f8f;
    --primary-light: #e8c9c9;
    
    /* アクセントカラー */
    --accent: #b89a8a;
    
    /* ボタンカラー */
    --btn-start: #a8b89a;
    --btn-start-hover: #96a688;
    --btn-stop: #d4a5a5;
    --btn-stop-hover: #c08f8f;
    
    /* テキストカラー */
    --text-primary: #4a4a4a;
    --text-secondary: #6b6b6b;
    --text-muted: #9ca3af;
    
    /* 背景・枠線 */
    --bg-card: #ffffff;
    --bg-section: #faf7f5;
    --bg-session: #fdfbf9;
    --bg-session-hover: #f9f5f2;
    --border-color: #e5ddd8;
    
    /* 削除ボタン */
    --btn-delete: #d4a5a5;
    --btn-delete-hover: #fae8e8;
}

/* テーマ2: グレージュ × ペールブルー */
[data-theme="greyge"] {
    --bg-gradient-from: #f5f3f1;
    --bg-gradient-to: #e8eef2;
    
    --primary: #8fa8b8;
    --primary-dark: #7a93a3;
    --primary-light: #b4c9d6;
    
    --accent: #9fa6a0;
    
    --btn-start: #8fa8b8;
    --btn-start-hover: #7a93a3;
    --btn-stop: #a8b8c8;
    --btn-stop-hover: #93a3b3;
    
    --text-primary: #3d4a52;
    --text-secondary: #5c6872;
    --text-muted: #9ca3af;
    
    --bg-card: #ffffff;
    --bg-section: #f8fafb;
    --bg-session: #fafbfc;
    --bg-session-hover: #f4f6f8;
    --border-color: #dfe3e6;
    
    --btn-delete: #a8b8c8;
    --btn-delete-hover: #e8eef2;
}

/* テーマ3: ナチュラルグリーン × クリーム */
[data-theme="natural"] {
    --bg-gradient-from: #faf8f3;
    --bg-gradient-to: #e8f0e8;
    
    --primary: #9fb19f;
    --primary-dark: #8a9c8a;
    --primary-light: #b8c8b8;
    
    --accent: #b8a890;
    
    --btn-start: #9fb19f;
    --btn-start-hover: #8a9c8a;
    --btn-stop: #b8a890;
    --btn-stop-hover: #a39578;
    
    --text-primary: #3d4a3d;
    --text-secondary: #5c6a5c;
    --text-muted: #9ca3af;
    
    --bg-card: #ffffff;
    --bg-section: #f7faf7;
    --bg-session: #fbfdfb;
    --bg-session-hover: #f3f7f3;
    --border-color: #dfe6df;
    
    --btn-delete: #b8a890;
    --btn-delete-hover: #f0ebe0;
}

/* テーマ4: モカ × アプリコット */
[data-theme="mocha"] {
    --bg-gradient-from: #f5f1ed;
    --bg-gradient-to: #f4e8dd;
    
    --primary: #b89a8a;
    --primary-dark: #a38576;
    --primary-light: #d2b8a8;
    
    --accent: #d4a88a;
    
    --btn-start: #a8b89a;
    --btn-start-hover: #93a385;
    --btn-stop: #d4a88a;
    --btn-stop-hover: #bf9376;
    
    --text-primary: #4a3d37;
    --text-secondary: #6b5c56;
    --text-muted: #9ca3af;
    
    --bg-card: #ffffff;
    --bg-section: #faf7f3;
    --bg-session: #fdfbf8;
    --bg-session-hover: #f9f4ef;
    --border-color: #e8dfd8;
    
    --btn-delete: #d4a88a;
    --btn-delete-hover: #f4ece0;
}

/* テーマ名の日本語表示用データ */
.theme-label[data-theme-name="milktea"]::after {
    content: "ミルクティー";
}

.theme-label[data-theme-name="greyge"]::after {
    content: "グレージュ";
}

.theme-label[data-theme-name="natural"]::after {
    content: "ナチュラルグリーン";
}

.theme-label[data-theme-name="mocha"]::after {
    content: "モカ";
}