/*  ==========================================================================
    theme.css - Shared Dark Mode Theme
    
    ダークモード対応のための共通CSS変数とメディアクエリ
    複数ページで利用可能なテーマ定義
    ========================================================================== */

/*  --------------------------------------------------------------------------
    テーマ・共通トークン（ライトテーマの基準値）
    -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --page-bg: #f6f3ee;
    --text-color: #242424;
    --text-muted: #4a4a4a;

    --item-color: #ffffff80;
    --item-hover-color: #ffffffcc;
    --border-color: #d8d2c8;
    --button-bg: #ffffff80;
    --button-hover-bg: #eee7dc;
    /* === ここから追加 === */
    --control-bg: var(--item-color);
    --control-hover-bg: var(--item-hover-color);
    --control-border: var(--border-color);
    --card-bg: var(--item-color);
    --card-border: var(--border-color);
    --error-bg: #ffecec;
    --error-text: #a00;
    /* === ここまで追加 === */
}

/*  --------------------------------------------------------------------------
    ダークテーマ
    OS / ブラウザの prefers-color-scheme に追従する
    -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --page-bg: #171717;
        --text-color: #e6e1d8;
        --text-muted: #b8b1a7;

        --item-color: #2a2a2a;
        --item-hover-color: #333333;
        --border-color: #5a544c;
        --button-bg: #242424;
        --button-hover-bg: #303030;
        /* === ここから追加 === */
        --control-bg: var(--item-color);
        --control-hover-bg: var(--item-hover-color);
        --control-border: var(--border-color);
        --card-bg: var(--item-color);
        --card-border: var(--border-color);
        --error-bg: #372424;
        --error-text: #f8b2b2;
        /* === ここまで追加 === */
    }
}

/*  --------------------------------------------------------------------------
    基本的なカラー適用
    -------------------------------------------------------------------------- */
body {
    background-color: var(--page-bg);
    color: var(--text-color);
}