/**
 * カラー定数定義ファイル
 * 
 * このファイルでCSS変数を一元管理することで、
 * サイト全体の色を一括で変更できます。
 * 
 * 使用方法:
 *   background-color: var(--color-primary);
 *   color: var(--color-primary-dark);
 *   box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
 */

:root {
    /* ========================================
     * プライマリカラー（メインブランドカラー）
     * ヘッダー、ナビバー、サイドバー、カードヘッダー等
     * ======================================== */
    --color-primary: #002c5b;           /* メインカラー（紺色） */
    --color-primary-dark: #001e40;      /* ホバー時などの暗め色 */
    --color-primary-light: #005983;     /* グラデーション用の明るめ色 */
    --color-primary-pale: #e6f0fa;      /* 背景に使う薄い色 */
    --color-primary-hover-bg: #f0f6ff;  /* ホバー時の背景色 */
    
    /* RGB形式（box-shadow等のrgba()で使用） */
    --color-primary-rgb: 0, 44, 91;
    
    /* ========================================
     * ボタン（プライマリ）カラー ★色変更はここだけでOK★
     * 「押すボタン」「ビュー/課金トグルの選択状態」に使用。
     * ヘッダ/サイドバー/カードヘッダ等の紺色(--color-primary)とは独立管理。
     * ======================================== */
    --color-btn-primary: #f09d2e;            /* 通常時の背景（オレンジ） */
    --color-btn-primary-hover: #d98517;      /* ホバー時の背景 */
    --color-btn-primary-text: #ffffff;       /* ボタン文字色（白） */
    --gradient-btn-primary: linear-gradient(135deg, var(--color-btn-primary), var(--color-btn-primary-hover));
    --gradient-btn-primary-90: linear-gradient(90deg, var(--color-btn-primary), var(--color-btn-primary-hover));

    /* ========================================
     * アクセントカラー
     * ボタンのシャドウ、アクティブ状態の強調等
     * ======================================== */
    --color-accent: #0047a3;            /* アクセント色 */
    --color-accent-light: #1a5cb8;      /* 明るめのアクセント */
    
    /* ========================================
     * グラデーション
     * ヘッダー背景、サービス電話番号表示等
     * ======================================== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    --gradient-primary-90: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    
    /* ========================================
     * フォーム関連
     * フォーカス時のボーダー、シャドウ等
     * ======================================== */
    --color-focus-border: var(--color-primary);
    --color-focus-shadow: rgba(var(--color-primary-rgb), 0.25);
    
    /* ========================================
     * テキストカラー
     * ======================================== */
    --color-text-primary: var(--color-primary);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);
    
    /* ========================================
     * ボタンホバー時のテキストカラー
     * 紺色（--color-primary）の補色として使用
     * ======================================== */
    --color-button-hover-text: #ffd700;     /* ホバー時のテキスト色（黄色・補色） */
    
    /* ========================================
     * 旧カラーの参照（移行用コメント）
     * ======================================== */
    /* 旧: #ea580c → 新: var(--color-primary) */
    /* 旧: #d04a0a → 新: var(--color-primary-dark) */
    /* 旧: #ff6b35 → 新: var(--color-primary-light) */
    /* 旧: #ff6100 → 新: var(--color-accent) */
    /* 旧: #ffba76 → 新: var(--color-primary-pale) */
    /* 旧: #de6220 → 新: var(--color-accent) */
}

/* ========================================
 * 共通プライマリボタン（塗りオレンジ）
 * 各ページのボタンに class="btn btn-app-primary" を付けるだけで統一デザインに。
 * 色変更は上の --color-btn-primary 系を編集すれば全ボタンに反映。
 * ======================================== */
.btn-app-primary,
.btn.btn-app-primary,
.btn.btn-primary.btn-app-primary,
.btn.custom-dialog-ok,
.btn.btn-primary.custom-dialog-ok,
.btn-app-primary:focus,
.btn.btn-app-primary:focus,
.btn.btn-primary.btn-app-primary:focus,
.btn.custom-dialog-ok:focus,
.btn.btn-primary.custom-dialog-ok:focus,
.btn-app-primary:focus-visible,
.btn.btn-app-primary:focus-visible,
.btn.btn-primary.btn-app-primary:focus-visible,
.btn.custom-dialog-ok:focus-visible,
.btn.btn-primary.custom-dialog-ok:focus-visible {
    --bs-btn-color: var(--color-btn-primary-text, #ffffff);
    --bs-btn-bg: var(--color-btn-primary, #f09d2e);
    --bs-btn-border-color: var(--color-btn-primary, #f09d2e);
    --bs-btn-hover-color: var(--color-btn-primary-text, #ffffff);
    --bs-btn-hover-bg: var(--color-btn-primary-hover, #d98517);
    --bs-btn-hover-border-color: var(--color-btn-primary-hover, #d98517);
    --bs-btn-active-color: var(--color-btn-primary-text, #ffffff);
    --bs-btn-active-bg: var(--color-btn-primary-hover, #d98517);
    --bs-btn-active-border-color: var(--color-btn-primary-hover, #d98517);
    background-color: var(--color-btn-primary, #f09d2e) !important;
    border: 1px solid var(--color-btn-primary, #f09d2e) !important;
    color: #ffffff !important;
}
.btn-app-primary:hover,
.btn.btn-app-primary:hover,
.btn.btn-primary.btn-app-primary:hover,
.btn.custom-dialog-ok:hover,
.btn.btn-primary.custom-dialog-ok:hover,
.btn-app-primary:active,
.btn.btn-app-primary:active,
.btn.btn-primary.btn-app-primary:active,
.btn.custom-dialog-ok:active,
.btn.btn-primary.custom-dialog-ok:active {
    background-color: var(--color-btn-primary-hover, #d98517) !important;
    border-color: var(--color-btn-primary-hover, #d98517) !important;
    color: #ffffff !important;
}

/* 共通キャンセルボタン（グレー塗り） */
.btn-app-cancel,
.btn.btn-app-cancel,
.btn-app-cancel:focus,
.btn.btn-app-cancel:focus,
.btn-app-cancel:focus-visible,
.btn.btn-app-cancel:focus-visible {
    background-color: #6c757d !important;
    border: 1px solid #6c757d !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-app-cancel:hover,
.btn.btn-app-cancel:hover,
.btn-app-cancel:active,
.btn.btn-app-cancel:active {
    background-color: #5c636a !important;
    border-color: #565e64 !important;
    color: #ffffff !important;
}

.custom-dialog-footer .custom-dialog-action-btn {
    min-width: 112px;
}

.custom-dialog-title-icon {
    color: var(--color-btn-primary, #f09d2e) !important;
}