/* 統一カラーパレット - 全体トーン調整 */

/* 新しい統一カラーパレット定義 */
:root {
    /* 基調色 - より落ち着いたトーン */
    --primary-navy: #0f172a;           /* ダークネイビー */
    --secondary-navy: #1e293b;         /* ネイビー */
    --blue-gray: #475569;              /* ダークブルーグレー */
    --blue-gray-light: #64748b;        /* ブルーグレー */
    --pure-white: #ffffff;             /* ピュアホワイト */
    --soft-white: #f8fafc;             /* ソフトホワイト */
    
    /* アクセント色 - ミューテッドトーン */
    --muted-blue: #334155;             /* ミューテッドブルー */
    --muted-blue-light: #475569;       /* ミューテッドブルーライト */
    --brick-orange: #c2410c;           /* ブリックオレンジ */
    --muted-orange: #ea580c;           /* ミューテッドオレンジ */
    
    /* 補助色 */
    --success-green: #10b981;          /* 成功グリーン */
    --success-green-light: #34d399;    /* 成功グリーンライト */
    --warning-red: #ef4444;            /* 注意レッド */
    --warning-red-light: #f87171;      /* 注意レッドライト */
    
    /* 背景色 - より控えめなトーン */
    --bg-primary: #ffffff;             /* プライマリー背景 */
    --bg-secondary: #f8fafc;           /* セカンダリー背景 */
    --bg-blue-light: #f1f5f9;          /* 淡いブルー背景 */
    --bg-muted-blue: #f8fafc;          /* ミューテッドブルー背景 */
    --bg-accent: rgba(51, 65, 85, 0.03); /* アクセント背景（より控えめ） */
    
    /* テキスト色 - より落ち着いた色合い */
    --text-primary: #0f172a;           /* プライマリーテキスト（ダークネイビー） */
    --text-secondary: #334155;         /* セカンダリーテキスト（ネイビー） */
    --text-muted: #475569;             /* ミューテッドテキスト（ダークグレー） */
    --text-light: #64748b;             /* ライトテキスト（グレー） */
    --text-accent: #c2410c;            /* アクセントテキスト（ミューテッドオレンジ） */
}

/* 全体背景の統一 */
body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* セクション背景の統一 */
section {
    background-color: var(--bg-primary) !important;
}

/* 淡いブルー背景セクション */
.section-light-blue {
    background: linear-gradient(135deg, var(--bg-blue-light) 0%, var(--bg-secondary) 100%) !important;
}

/* ヘッダー・ナビゲーションの統一 */
header {
    background-color: var(--pure-white) !important;
    border-bottom: 1px solid var(--blue-gray-light) !important;
}

nav a {
    color: var(--text-secondary) !important;
}

nav a:hover {
    color: var(--muted-blue) !important;
}

/* Hero Section の統一 */
.hero-section {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 50%, var(--blue-gray) 100%) !important;
}

/* 見出し・強調文字の統一 */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

.section-header h2 {
    color: var(--primary-navy) !important;
}

.section-header p {
    color: var(--text-muted) !important;
}

/* 機能カードの統一 */
.feature-card-refined {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--blue-gray-light) !important;
}

.feature-card-refined:hover {
    border-color: var(--muted-blue) !important;
    box-shadow: 0 10px 25px -5px rgba(51, 65, 85, 0.1) !important;
}

.feature-icon-large {
    background: linear-gradient(135deg, var(--muted-blue), var(--primary-navy)) !important;
}

/* 統計・効果カードの統一 */
.stat-card,
.effect-card {
    background-color: var(--bg-primary) !important;
}

.stat-card-primary {
    background: linear-gradient(135deg, var(--muted-blue), var(--primary-navy)) !important;
}

.stat-card-success {
    background: linear-gradient(135deg, var(--success-green), var(--success-green-light)) !important;
}

.stat-card-warning {
    background: linear-gradient(135deg, var(--brick-orange), var(--muted-orange)) !important;
}

/* ボタンの統一 */
.btn-primary,
.bg-primary {
    background: linear-gradient(135deg, var(--muted-blue), var(--primary-navy)) !important;
    color: var(--pure-white) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--muted-blue-light), var(--secondary-navy)) !important;
}

.btn-accent,
.bg-accent {
    background: linear-gradient(135deg, var(--brick-orange), var(--muted-orange)) !important;
    color: var(--pure-white) !important;
}

.btn-accent:hover {
    background: linear-gradient(135deg, var(--muted-orange), var(--brick-orange)) !important;
}

/* CTA ボタンの統一 */
.cta-button {
    background: linear-gradient(135deg, var(--brick-orange), var(--muted-orange)) !important;
    color: var(--pure-white) !important;
    border: none !important;
}

.cta-button:hover {
    background: linear-gradient(135deg, var(--muted-orange), var(--brick-orange)) !important;
}

/* 数値・効果の強調 */
.highlight-metric {
    color: var(--text-accent) !important;
    font-weight: 700 !important;
}

.highlight-success {
    color: var(--success-green) !important;
    font-weight: 700 !important;
}

.highlight-primary {
    color: var(--muted-blue) !important;
    font-weight: 700 !important;
}

/* 比較表・課題の統一 */
.comparison-negative,
.problem-indicator {
    color: var(--warning-red) !important;
}

.comparison-positive,
.solution-indicator {
    color: var(--success-green) !important;
}

/* カラー置き換え - 既存クラスのオーバーライド */

/* 紫系カラーをネイビーに */
.bg-purple-600,
.bg-purple-700,
.text-purple-600,
.text-purple-700 {
    background-color: var(--primary-navy) !important;
    color: var(--pure-white) !important;
}

.bg-purple-50,
.bg-purple-100 {
    background-color: var(--bg-blue-light) !important;
}

.text-purple-800 {
    color: var(--primary-navy) !important;
}

/* オレンジ系の統一 */
.bg-orange-600,
.bg-orange-500 {
    background-color: var(--brick-orange) !important;
}

.bg-orange-50,
.bg-orange-100 {
    background-color: rgba(194, 65, 12, 0.1) !important;
}

.text-orange-600,
.text-orange-700,
.text-orange-800 {
    color: var(--brick-orange) !important;
}

/* 緑系の統一 */
.bg-green-600,
.bg-green-500 {
    background-color: var(--success-green) !important;
}

.bg-green-50,
.bg-green-100 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.text-green-600,
.text-green-700,
.text-green-800 {
    color: var(--success-green) !important;
}

/* 赤系の統一 */
.bg-red-600,
.bg-red-500 {
    background-color: var(--warning-red) !important;
}

.bg-red-50,
.bg-red-100 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.text-red-600,
.text-red-700 {
    color: var(--warning-red) !important;
}

/* ブルー系の統一強化 */
.bg-blue-600,
.bg-blue-700 {
    background-color: var(--muted-blue) !important;
}

.bg-blue-50,
.bg-blue-100 {
    background-color: var(--bg-blue-light) !important;
}

.text-blue-600,
.text-blue-700,
.text-blue-800 {
    color: var(--muted-blue) !important;
}

/* インディゴ・ティール系をブルー系に統一 */
.bg-indigo-600,
.bg-teal-600 {
    background-color: var(--secondary-navy) !important;
}

.bg-indigo-50,
.bg-teal-50 {
    background-color: var(--bg-blue-light) !important;
}

.text-indigo-700,
.text-teal-700,
.text-indigo-800,
.text-teal-800 {
    color: var(--secondary-navy) !important;
}

/* グラデーション背景の統一 */
.gradient-blue {
    background: linear-gradient(135deg, var(--muted-blue) 0%, var(--primary-navy) 100%) !important;
}

.gradient-orange {
    background: linear-gradient(135deg, var(--brick-orange) 0%, var(--muted-orange) 100%) !important;
}

.gradient-success {
    background: linear-gradient(135deg, var(--success-green) 0%, var(--success-green-light) 100%) !important;
}

/* チェックアイコン・ポイントマーカーの統一 */
.fas.fa-check,
.fas.fa-check-circle {
    color: var(--muted-blue) !important;
}

.point-dot {
    background-color: var(--muted-blue) !important;
}

/* ダッシュボード関連の統一 */
.dashboard-panel {
    background-color: var(--secondary-navy) !important;
    border: 1px solid var(--blue-gray) !important;
}

.kpi-card {
    background: linear-gradient(135deg, var(--muted-blue), var(--primary-navy)) !important;
}

/* アニメーション・ホバー効果の統一 */
.feature-card-refined:hover .feature-icon-large {
    box-shadow: 0 15px 25px -5px rgba(51, 65, 85, 0.3) !important;
}

/* ダークセクション専用カラー定義 */
:root {
    /* ダークセクション用テキストカラー */
    --dark-text-primary: #FFFFFF;      /* メイン見出し（純白） */
    --dark-text-secondary: #E0E0E0;    /* 通常テキスト（ライトグレー） */
    --dark-text-muted: #B0B0B0;        /* サブテキスト（ソフトグレー） */
    
    /* ダークセクション用アクセントカラー */
    --dark-accent-blue: #4A90E2;       /* ブルーアクセント */
    --dark-accent-orange: #FF7F32;     /* オレンジアクセント */
    --dark-accent-green: #2E7D4F;      /* グリーンアクセント */
    
    /* ダークセクション用ボタンカラー */
    --dark-btn-primary: #345B8C;       /* プライマリーボタン */
    --dark-btn-primary-hover: #4A90E2; /* ホバー時 */
    --dark-btn-accent: #D9822B;        /* アクセントボタン */
    --dark-btn-accent-hover: #FF7F32;  /* ホバー時 */
}

/* ダークセクション内のテキスト統一 */
.hero-section h1,
.hero-section h2,
.hero-section h3,
section[class*="from-primary"] h1,
section[class*="from-primary"] h2,
section[class*="from-primary"] h3,
section[class*="from-primary"] h4 {
    color: var(--dark-text-primary) !important;
}

.hero-section p,
section[class*="from-primary"] p {
    color: var(--dark-text-secondary) !important;
}

.hero-section .text-sm,
section[class*="from-primary"] .text-sm {
    color: var(--dark-text-secondary) !important;
}

/* ダークカード内のテキスト */
.bg-gray-800 h3,
.bg-gray-900 h3 {
    color: var(--dark-text-primary) !important;
}

.bg-gray-800 p,
.bg-gray-900 p {
    color: var(--dark-text-muted) !important;
}

/* ダークセクション用アクセント数値・強調テキスト */
.dark-accent-blue {
    color: var(--dark-accent-blue) !important;
    font-weight: 700 !important;
}

.dark-accent-orange {
    color: var(--dark-accent-orange) !important;
    font-weight: 700 !important;
}

.dark-accent-green {
    color: var(--dark-accent-green) !important;
    font-weight: 700 !important;
}

/* ダークセクション用リスト項目 */
section[class*="from-primary"] ul li {
    color: var(--dark-text-muted) !important;
}

/* 数値やキーワード強調のユーティリティクラス */
.highlight-number {
    color: var(--dark-accent-orange) !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
}

.highlight-keyword {
    color: var(--dark-accent-blue) !important;
    font-weight: 600 !important;
}

/* ダークセクション用ボタンスタイル */
.dark-btn-primary {
    background-color: var(--dark-btn-primary) !important;
    color: var(--dark-text-primary) !important;
    transition: all 0.3s ease !important;
}

.dark-btn-primary:hover {
    background-color: var(--dark-btn-primary-hover) !important;
}

.dark-btn-accent {
    background-color: var(--dark-btn-accent) !important;
    color: var(--dark-text-primary) !important;
    transition: all 0.3s ease !important;
}

.dark-btn-accent:hover {
    background-color: var(--dark-btn-accent-hover) !important;
}

/* ダークセクション全体の自動カラー適用 */
section[class*="from-primary"] *,
section[class*="bg-gray-8"] *,
section[class*="bg-gray-9"] *,
.hero-section * {
    /* デフォルトテキストカラーの上書き */
}

section[class*="from-primary"] .text-white,
section[class*="bg-gray-8"] .text-white,
section[class*="bg-gray-9"] .text-white,
.hero-section .text-white {
    color: var(--dark-text-primary) !important;
}

section[class*="from-primary"] .text-gray-100,
section[class*="from-primary"] .text-gray-200,
section[class*="from-primary"] .text-gray-300,
section[class*="bg-gray-8"] .text-gray-100,
section[class*="bg-gray-8"] .text-gray-200,
section[class*="bg-gray-8"] .text-gray-300,
.hero-section .text-gray-100,
.hero-section .text-gray-200,
.hero-section .text-gray-300 {
    color: var(--dark-text-secondary) !important;
}

section[class*="from-primary"] .text-gray-400,
section[class*="from-primary"] .text-gray-500,
section[class*="bg-gray-8"] .text-gray-400,
section[class*="bg-gray-8"] .text-gray-500 {
    color: var(--dark-text-muted) !important;
}

/* ダークセクション内のメトリック数値の統一 */
section[class*="from-primary"] .metric-value,
section[class*="bg-gray-8"] .metric-value,
.hero-section .metric-value {
    color: var(--dark-accent-orange) !important;
    font-weight: 700 !important;
}

/* ダークセクション内のアイコンカラー統一 */
section[class*="from-primary"] .fas.fa-check,
section[class*="from-primary"] .fas.fa-check-circle,
section[class*="bg-gray-8"] .fas.fa-check,
section[class*="bg-gray-8"] .fas.fa-check-circle {
    color: var(--dark-accent-blue) !important;
}

section[class*="from-primary"] .text-accent,
section[class*="bg-gray-8"] .text-accent,
.hero-section .text-accent {
    color: var(--dark-accent-orange) !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .section-light-blue {
        background: var(--bg-secondary) !important;
    }
    
    /* モバイルでのダークセクション調整 */
    section[class*="from-primary"] h1,
    section[class*="from-primary"] h2,
    section[class*="from-primary"] h3 {
        color: var(--dark-text-primary) !important;
    }
}