/* ========================================
   軸馬先生 公式カラーパレット v2.0
   ブランドアイデンティティと統一性を重視
   ======================================== */

:root {
    /* ===== メインブランドカラー ===== */
    --jikuma-primary: #1E3A8A;          /* ロイヤルブルー（信頼・権威） */
    --jikuma-primary-dark: #172554;     /* ダークロイヤルブルー */
    --jikuma-primary-light: #3B5FBF;    /* ライトロイヤルブルー */
    
    --jikuma-secondary: #D97706;        /* ダークゴールド（成功・価値） */
    --jikuma-secondary-dark: #B45309;   /* ディープゴールド */
    --jikuma-secondary-light: #F59E0B;  /* ブライトゴールド */
    
    --jikuma-accent: #2563EB;           /* クリスタルブルー（透明性） */
    --jikuma-accent-dark: #1D4ED8;      /* ダーククリスタル */
    --jikuma-accent-light: #3B82F6;     /* ライトクリスタル */
    
    /* ===== ベースカラー ===== */
    --jikuma-white: #FFFFFF;            /* ピュアホワイト */
    --jikuma-gray-50: #F9FAFB;          /* 最薄グレー（背景） */
    --jikuma-gray-100: #F3F4F6;         /* 薄グレー（セクション背景） */
    --jikuma-gray-200: #E5E7EB;         /* ライトグレー（ボーダー） */
    --jikuma-gray-300: #D1D5DB;         /* ミドルグレー（無効状態） */
    --jikuma-gray-400: #9CA3AF;         /* グレー（プレースホルダー） */
    --jikuma-gray-500: #6B7280;         /* ミディアムグレー（補助テキスト） */
    --jikuma-gray-600: #4B5563;         /* ダークグレー（サブテキスト） */
    --jikuma-gray-700: #374151;         /* ディープグレー（メインテキスト） */
    --jikuma-gray-800: #1F2937;         /* エクストラダーク（見出し） */
    --jikuma-gray-900: #111827;         /* ほぼ黒（最重要テキスト） */
    
    /* ===== 機能的カラー ===== */
    --jikuma-success: #059669;          /* 成功・的中（グリーン） */
    --jikuma-success-light: #10B981;    /* ライト成功 */
    --jikuma-success-bg: #D1FAE5;       /* 成功背景 */
    
    --jikuma-warning: #D97706;          /* 注意・重要（ゴールド再利用） */
    --jikuma-warning-light: #F59E0B;    /* ライト警告 */
    --jikuma-warning-bg: #FEF3C7;       /* 警告背景 */
    
    --jikuma-error: #DC2626;            /* エラー・失敗（レッド） */
    --jikuma-error-light: #EF4444;      /* ライトエラー */
    --jikuma-error-bg: #FEE2E2;         /* エラー背景 */
    
    --jikuma-info: #2563EB;             /* 情報（クリスタルブルー再利用） */
    --jikuma-info-light: #3B82F6;       /* ライト情報 */
    --jikuma-info-bg: #DBEAFE;          /* 情報背景 */
    
    /* ===== 性格タイプ別カラー ===== */
    --mbti-analyst: #4F46E5;            /* NT型：インディゴ（分析的思考） */
    --mbti-analyst-light: #6366F1;      /* ライトインディゴ */
    --mbti-analyst-bg: #E0E7FF;         /* NT型背景 */
    
    --mbti-diplomat: #8B5CF6;           /* NF型：パープル（共感的直感） */
    --mbti-diplomat-light: #A78BFA;     /* ライトパープル */
    --mbti-diplomat-bg: #EDE9FE;        /* NF型背景 */
    
    --mbti-sentinel: #059669;           /* SJ型：グリーン（安定的実行） */
    --mbti-sentinel-light: #10B981;     /* ライトグリーン */
    --mbti-sentinel-bg: #D1FAE5;        /* SJ型背景 */
    
    --mbti-explorer: #DC2626;           /* SP型：レッド（冒険的行動） */
    --mbti-explorer-light: #EF4444;     /* ライトレッド */
    --mbti-explorer-bg: #FEE2E2;        /* SP型背景 */
    
    /* ===== 競馬予想関連カラー ===== */
    --uma-honmei: var(--jikuma-secondary);      /* 本命馬（ゴールド） */
    --uma-taikou: var(--jikuma-accent);         /* 対抗馬（クリスタルブルー） */
    --uma-renka: var(--jikuma-primary);         /* 連下馬（ロイヤルブルー） */
    --uma-ana: #DC2626;                         /* 穴馬（レッド） */
    
    /* ===== 透明度付きカラー ===== */
    --jikuma-primary-alpha-10: rgba(30, 58, 138, 0.1);
    --jikuma-primary-alpha-20: rgba(30, 58, 138, 0.2);
    --jikuma-primary-alpha-30: rgba(30, 58, 138, 0.3);
    --jikuma-primary-alpha-50: rgba(30, 58, 138, 0.5);
    
    --jikuma-secondary-alpha-10: rgba(217, 119, 6, 0.1);
    --jikuma-secondary-alpha-20: rgba(217, 119, 6, 0.2);
    --jikuma-secondary-alpha-30: rgba(217, 119, 6, 0.3);
    --jikuma-secondary-alpha-50: rgba(217, 119, 6, 0.5);
    
    --jikuma-accent-alpha-10: rgba(37, 99, 235, 0.1);
    --jikuma-accent-alpha-20: rgba(37, 99, 235, 0.2);
    --jikuma-accent-alpha-30: rgba(37, 99, 235, 0.3);
    --jikuma-accent-alpha-50: rgba(37, 99, 235, 0.5);
    
    --jikuma-white-alpha-10: rgba(255, 255, 255, 0.1);
    --jikuma-white-alpha-20: rgba(255, 255, 255, 0.2);
    --jikuma-white-alpha-30: rgba(255, 255, 255, 0.3);
    --jikuma-white-alpha-50: rgba(255, 255, 255, 0.5);
    --jikuma-white-alpha-90: rgba(255, 255, 255, 0.9);
    
    --jikuma-black-alpha-05: rgba(0, 0, 0, 0.05);
    --jikuma-black-alpha-10: rgba(0, 0, 0, 0.1);
    --jikuma-black-alpha-20: rgba(0, 0, 0, 0.2);
    --jikuma-black-alpha-30: rgba(0, 0, 0, 0.3);
    --jikuma-black-alpha-50: rgba(0, 0, 0, 0.5);
    
    /* ===== グラデーション ===== */
    --gradient-primary: linear-gradient(135deg, var(--jikuma-primary), var(--jikuma-primary-dark));
    --gradient-secondary: linear-gradient(135deg, var(--jikuma-secondary), var(--jikuma-secondary-dark));
    --gradient-accent: linear-gradient(135deg, var(--jikuma-accent), var(--jikuma-accent-dark));
    --gradient-hero: linear-gradient(135deg, var(--jikuma-primary) 0%, var(--jikuma-accent) 50%, var(--jikuma-secondary) 100%);
    --gradient-cta: linear-gradient(135deg, var(--jikuma-secondary), var(--jikuma-secondary-light));
    
    /* ===== シャドウ ===== */
    --shadow-xs: 0 1px 2px var(--jikuma-black-alpha-05);
    --shadow-sm: 0 2px 4px var(--jikuma-black-alpha-10);
    --shadow-md: 0 4px 8px var(--jikuma-black-alpha-10);
    --shadow-lg: 0 8px 16px var(--jikuma-black-alpha-10);
    --shadow-xl: 0 16px 32px var(--jikuma-black-alpha-10);
    
    --shadow-primary: 0 4px 12px var(--jikuma-primary-alpha-30);
    --shadow-secondary: 0 4px 12px var(--jikuma-secondary-alpha-30);
    --shadow-accent: 0 4px 12px var(--jikuma-accent-alpha-30);
    
    /* ===== 既存変数のマッピング（後方互換性） ===== */
    --color-primary: var(--jikuma-primary);
    --color-secondary: var(--jikuma-gray-900);
    --color-accent: var(--jikuma-secondary);
    --color-crystal: var(--jikuma-accent);
    --color-success: var(--jikuma-success);
    --color-alert: var(--jikuma-error);
    
    --color-text: var(--jikuma-gray-700);
    --color-text-light: var(--jikuma-gray-600);
    --color-text-muted: var(--jikuma-gray-500);
    
    --color-bg: var(--jikuma-white);
    --color-bg-light: var(--jikuma-gray-50);
    --color-bg-section: var(--jikuma-gray-100);
    --color-border: var(--jikuma-gray-200);
}

/* ===== ダークモード対応（将来実装用） ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* ベースカラーの反転 */
        --jikuma-white: #111827;
        --jikuma-gray-50: #1F2937;
        --jikuma-gray-100: #374151;
        --jikuma-gray-200: #4B5563;
        --jikuma-gray-700: #E5E7EB;
        --jikuma-gray-800: #F3F4F6;
        --jikuma-gray-900: #F9FAFB;
        
        /* 機能色の調整 */
        --jikuma-primary: #3B5FBF;
        --jikuma-secondary: #F59E0B;
        --jikuma-accent: #3B82F6;
        
        /* シャドウの調整 */
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    }
}

/* ===== ユーティリティクラス ===== */

/* テキストカラー */
.text-primary { color: var(--jikuma-primary) !important; }
.text-secondary { color: var(--jikuma-secondary) !important; }
.text-accent { color: var(--jikuma-accent) !important; }
.text-success { color: var(--jikuma-success) !important; }
.text-warning { color: var(--jikuma-warning) !important; }
.text-error { color: var(--jikuma-error) !important; }
.text-info { color: var(--jikuma-info) !important; }

/* 背景カラー */
.bg-primary { background-color: var(--jikuma-primary) !important; }
.bg-secondary { background-color: var(--jikuma-secondary) !important; }
.bg-accent { background-color: var(--jikuma-accent) !important; }
.bg-success { background-color: var(--jikuma-success-bg) !important; }
.bg-warning { background-color: var(--jikuma-warning-bg) !important; }
.bg-error { background-color: var(--jikuma-error-bg) !important; }
.bg-info { background-color: var(--jikuma-info-bg) !important; }

/* ボーダーカラー */
.border-primary { border-color: var(--jikuma-primary) !important; }
.border-secondary { border-color: var(--jikuma-secondary) !important; }
.border-accent { border-color: var(--jikuma-accent) !important; }
.border-gray { border-color: var(--jikuma-gray-200) !important; }

/* 性格タイプカラー */
.mbti-analyst { color: var(--mbti-analyst) !important; }
.mbti-diplomat { color: var(--mbti-diplomat) !important; }
.mbti-sentinel { color: var(--mbti-sentinel) !important; }
.mbti-explorer { color: var(--mbti-explorer) !important; }

.mbti-analyst-bg { background-color: var(--mbti-analyst-bg) !important; }
.mbti-diplomat-bg { background-color: var(--mbti-diplomat-bg) !important; }
.mbti-sentinel-bg { background-color: var(--mbti-sentinel-bg) !important; }
.mbti-explorer-bg { background-color: var(--mbti-explorer-bg) !important; }