/* variables.css - 共通カラーパレット定義
 * すべてのHTMLで使用する色を一元管理
 * このファイルの値を変更すれば、全ページの色が変わります
 */

:root {
    /* ========================================
       ブランドカラー（パステル調・コントラスト改善）
       ======================================== */
    --color-primary: #7589da;           /* メインブランドカラー（青紫・パステル・明度60%） */
    --color-secondary: #8b6aad;         /* サブブランドカラー（紫・パステル・明度60%） */

    /* グラデーション（パステル調に変更） */
    --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-accent: linear-gradient(135deg, #f5c5f6 0%, #f5b3c0 100%);
    --gradient-cool: linear-gradient(135deg, #b5d9f8 0%, #b3f0f5 100%);

    /* ========================================
       テキストカラー
       ======================================== */
    --color-text-primary: #2d3748;      /* メインテキスト（濃いグレー） */
    --color-text-secondary: #4a5568;    /* サブテキスト（中間グレー） */
    --color-text-muted: #718096;        /* 補足テキスト（薄いグレー） */
    --color-text-white: #ffffff;        /* 白文字 */

    /* ========================================
       背景カラー
       ======================================== */
    --color-bg-white: #ffffff;          /* 白背景 */
    --color-bg-light: #f7fafc;          /* 薄いグレー背景 */
    --color-bg-muted: #edf2f7;          /* 中間グレー背景 */
    --color-bg-page: #f0f2f5;           /* ページ全体の背景 */
    --color-bg-hover: #e8f0f8;          /* ホバー時の背景（書籍カード・読書記録行用） */
    --color-progress-bar-bg: #f0f0f0;   /* 既読率バー背景（未読部分） */

    /* ========================================
       ボーダー・区切り線
       ======================================== */
    --color-border: #e2e8f0;            /* 標準ボーダー */
    --color-border-dark: #cbd5e0;       /* 濃いボーダー */

    /* ========================================
       セマンティックカラー（パステル調・コントラスト改善）
       ======================================== */
    --color-success: #c8e6cf;           /* 成功・完了（淡い緑） */
    --color-success-dark: #6bc799;      /* 成功・濃い（アイコン・テキスト用・パステル・明度70%） */
    --color-info: #cce0f0;              /* 情報・通知（淡い青） */
    --color-info-dark: #6ba8e5;         /* 情報・濃い（アイコン・テキスト用・パステル・明度70%） */
    --color-warning: #f0e4cc;           /* 警告・注意（淡い黄） */
    --color-warning-dark: #e8a864;      /* 警告・濃い（アイコン・テキスト用・パステル・明度70%） */
    --color-error: #f0cccc;             /* エラー・危険（淡い赤） */
    --color-error-dark: #e87373;        /* エラー・濃い（アイコン・テキスト用・パステル・明度70%） */

    /* ========================================
       シャドウ
       ======================================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* ========================================
       プレミアム・特別カラー（パステル調・コントラスト改善）
       ======================================== */
    --color-premium: #e8a864;           /* プレミアムバッジ（パステル・明度70%） */
    --color-trial: #b399dc;             /* トライアル期間（パステル・明度70%） */

    /* ========================================
       フォーム・入力フィールド
       ======================================== */
    --color-input-bg: #ffffff;
    --color-input-border: #cbd5e1;
    --color-input-focus: var(--color-primary);
    --color-input-disabled: #f1f5f9;

    /* ========================================
       ボタンカラー（パステル調・コントラスト改善）
       ======================================== */
    --color-btn-primary: var(--color-primary);
    --color-btn-primary-hover: #5f73c8;
    --color-btn-secondary: var(--color-secondary);
    --color-btn-success: var(--color-success-dark);
    --color-btn-danger: var(--color-error-dark);

    /* ========================================
       ツールバー・ナビゲーション
       ======================================== */
    --color-toolbar-bg: #334155;
    --color-toolbar-border: #1e293b;
    --color-toolbar-text: #e2e8f0;
    --color-toolbar-hover: #475569;

    /* ========================================
       ヘッダ・フッタ
       ======================================== */
    --color-header-bg: #555050;         /* 標準ヘッダ背景色 */
    --color-footer-bg: #555050;         /* 標準フッタ背景色 */
    --color-header-text: #ffffff;       /* ヘッダテキスト色 */
    --color-footer-text: #ffffff;       /* フッタテキスト色 */

    /* ========================================
       後方互換性のためのエイリアス
       （既存コードで使われている変数名）
       ======================================== */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --gradient-1: var(--gradient-brand);
    --gradient-2: var(--gradient-accent);
    --gradient-3: var(--gradient-cool);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --bg-light: var(--color-bg-light);
    --border-color: var(--color-border);
    --bg-primary: var(--color-bg-white);
    --bg-secondary: var(--color-bg-light);
    --bg-tertiary: var(--color-bg-muted);
    --text-tertiary: var(--color-text-muted);

    /* form-pages.css用エイリアス */
    --primary: var(--color-text-secondary);
    --secondary: var(--color-success-dark);
    --accent: var(--color-primary);
    --text: var(--color-text-primary);
    --light-bg: var(--color-bg-light);
    --card-bg: var(--color-bg-white);
    --border: var(--color-border);
    --shadow: rgba(0, 0, 0, 0.1);
    --error: var(--color-error-dark);
    --success: var(--color-success-dark);
    --info: var(--color-info-dark);
    --danger: var(--color-error-dark);

    /* premium用 */
    --premium-color: var(--color-premium);
}

/* ========================================
   ダークモード対応
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* テキストカラー */
        --color-text-primary: #e0e0e0;      /* ダークモード用メインテキスト（明るいグレー） */
        --color-text-secondary: #b0b0b0;    /* ダークモード用サブテキスト（中間の明るいグレー） */
        --color-text-muted: #888888;        /* ダークモード用補足テキスト（薄めのグレー） */
        --color-text-white: #ffffff;        /* 白文字（変更なし） */

        /* 背景カラー */
        --color-bg-white: #1e1e1e;          /* 暗い背景 */
        --color-bg-light: #2a2a2a;          /* 少し明るい暗い背景 */
        --color-bg-muted: #333333;          /* 中間の暗い背景 */
        --color-bg-page: #121212;           /* ページ全体の背景 */
        --color-bg-hover: #2d2d2d;          /* ホバー時の背景（書籍カード・読書記録行用） */
        --color-progress-bar-bg: #252525;   /* 既読率バー背景（未読部分） */

        /* ボーダー・区切り線 */
        --color-border: #444444;            /* 標準ボーダー */
        --color-border-dark: #555555;       /* 濃いボーダー */

        /* シャドウ */
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);

        /* ヘッダ・フッタ */
        --color-header-bg: #1e1e1e;         /* ダークモード用ヘッダ背景色 */
        --color-footer-bg: #1e1e1e;         /* ダークモード用フッタ背景色 */
        --color-header-text: #e0e0e0;       /* ダークモード用ヘッダテキスト色 */
        --color-footer-text: #e0e0e0;       /* ダークモード用フッタテキスト色 */
    }
}

/* アプリ内テーマ設定でダークモードを選択した場合 */
[data-theme="dark"] {
    /* テキストカラー */
    --color-text-primary: #e0e0e0;      /* ダークモード用メインテキスト（明るいグレー） */
    --color-text-secondary: #b0b0b0;    /* ダークモード用サブテキスト（中間の明るいグレー） */
    --color-text-muted: #888888;        /* ダークモード用補足テキスト（薄めのグレー） */
    --color-text-white: #ffffff;        /* 白文字（変更なし） */

    /* 背景カラー */
    --color-bg-white: #1e1e1e;          /* 暗い背景 */
    --color-bg-light: #2a2a2a;          /* 少し明るい暗い背景 */
    --color-bg-muted: #333333;          /* 中間の暗い背景 */
    --color-bg-page: #121212;           /* ページ全体の背景 */
    --color-bg-hover: #2d2d2d;          /* ホバー時の背景（書籍カード・読書記録行用） */
    --color-progress-bar-bg: #252525;   /* 既読率バー背景（未読部分） */

    /* ボーダー・区切り線 */
    --color-border: #444444;            /* 標準ボーダー */
    --color-border-dark: #555555;       /* 濃いボーダー */

    /* シャドウ */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);

    /* ヘッダ・フッタ */
    --color-header-bg: #1e1e1e;         /* ダークモード用ヘッダ背景色 */
    --color-footer-bg: #1e1e1e;         /* ダークモード用フッタ背景色 */
    --color-header-text: #e0e0e0;       /* ダークモード用ヘッダテキスト色 */
    --color-footer-text: #e0e0e0;       /* ダークモード用フッタテキスト色 */
}