/*
 * public/css/themes.css
 *
 * このファイルには、Kamos Design System の異なるテーマ（例: ダークモード）に
 * 関連するスタイルを定義します。
 * 主に base.css で定義されたCSSカスタムプロパティを上書きすることで、
 * アプリケーション全体のカラースキームや外観を切り替えます。
 *
 * Vue.js移行時も、テーマ切り替え機能のロジックと連携して、
 * これらのスタイルが動的に適用されることが想定されます。
 */

/* ==========================================================================
   1. ダークモード (Dark Mode)
   ========================================================================== */
/*
 * body要素に 'dark' クラス（または kamos-ui.css の :root.dark に合わせて :root.dark ）が適用された場合に、
 * ダークモードのカラースキームを適用します。
 * kamos-ui.css の :root.dark 定義をここに統合。
 */
:root.dark { /* body.dark-mode でもよいが、kamos-ui.cssの定義に合わせ :root.dark を使用 */
    --kamos-primary-color: #68D391; /* Lighter green for dark mode */
    --kamos-primary-darker: #48BB78;
    --kamos-primary-darkest: #38A169;
    --kamos-secondary-color: #A0AEC0; /* Tailwind gray-400 */
    --kamos-accent-blue: #63B3ED; /* Tailwind blue-300 */
    --kamos-vitamin-yellow: #F6E05E; /* Tailwind yellow-300 */
    --kamos-vitamin-pink: #F687B3; /* Tailwind pink-300 */

    --kamos-text-color-default: #E2E8F0; /* Light gray text (Tailwind gray-200) */
    --kamos-text-color-light: #CBD5E0; /* Medium gray for subtle text (Tailwind gray-300) */
    --kamos-text-color-inverted: #1A202C; /* Dark text for inverted elements (Tailwind gray-900) */
    --kamos-text-color-error: #FC8181; /* Tailwind red-300 */
    --kamos-text-color-success: #81E6D9; /* Tailwind teal-300 */
    --kamos-text-color-warning: #F6D8A2; /* Tailwind amber-200に近く調整 */
    --kamos-text-color-info: #81E6D9; /* Dark Mode info color */

    /* --- RGBカラー変数のオーバーライド (RGBA使用のため) --- */
    --kamos-primary-color-rgb: 104, 211, 145; /* Override for #68D391 */
    --kamos-text-color-default-rgb: 226, 232, 240; /* Override for #E2E8F0 */
    --kamos-text-color-inverted-rgb: 26, 32, 44; /* Override for #1A202C */


    /* --- 背景の奥行き感を調整 --- */
    /* ダークモードでは現状の定義がすでに階層的な奥行きを提供しているため、大きな変更は不要です。 */
    /* body: 最も濃い */
    --kamos-bg-color-body: #1A202C; /* Very dark gray for body background */
    /* container-light (セクション): body よりわずかに明るい */
    --kamos-bg-color-container-light: #2D3748; /* Darker gray for cards/sections */
    --kamos-bg-color-body-login: #059669; /* Dark Mode login background */
    --kamos-bg-color-container-dark-alpha: rgba(0, 0, 0, 0.1);
    --kamos-bg-color-overlay: rgba(0, 0, 0, 0.85);
    --kamos-bg-color-overlay-light: rgba(18, 18, 18, 0.95);
    --kamos-bg-color-input: #2D3748; /* 入力フィールド: container-light と同じで「手前」の印象を維持 */
    --kamos-bg-color-table-header: #4A5568;
    --kamos-bg-color-table-row-even: var(--kamos-bg-color-container-light);
    --kamos-bg-color-edited-cell: #4A5568; /* Darker yellow for edited cells */
    --kamos-bg-color-reference-url-section: #1F2937; /* Tailwind gray-900に近い色 */

    /* Border */
    --kamos-border-color-default: #4A5568; /* Tailwind gray-600 */
    --kamos-border-color-light: #2D3748; /* Tailwind gray-800 */
    --kamos-border-color-focus: var(--kamos-primary-color);
    --kamos-border-color-error: var(--kamos-text-color-error);
    --kamos-border-color-edited-cell: #F6E05E; /* Tailwind yellow-300 */
    --kamos-border-color-reference-url-section: #4A5568; /* Tailwind gray-600 */

    /* Shadows */
    --kamos-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --kamos-box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --kamos-box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
    --kamos-box-shadow-focus: 0 0 0 3px rgba(104, 211, 145, 0.4);
    --kamos-box-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* ★追加: アニメーションするグラデーションの基本色 (ダークモード) */
    --gradient-color-1: rgba(104, 211, 145, 0.1); /* Lighter green for dark mode - 透過 */
    --gradient-color-2: rgba(246, 224, 94, 0.15); /* Tailwind yellow-300 - 透過 */
    --gradient-color-3: rgba(99, 179, 237, 0.1); /* Tailwind blue-300 - 透過 */
    --gradient-color-4: rgba(246, 135, 179, 0.08); /* Tailwind pink-300 - 透過 */
}

/* ==========================================================================
   2. ダークモード時のコンポーネント固有の調整
   ========================================================================== */
/*
 * kamos-ui.css にあったダークモード時の特定のコンポーネントスタイルを統合。
 * これらはテーマ変数だけでは表現しきれない、より具体的な要素への適用。
 */
:root.dark .action-proposal-card {
    background-color: var(--kamos-bg-color-container-light);
    border-color: var(--kamos-border-color-default);
    box-shadow: var(--kamos-box-shadow-md);
}
:root.dark .action-proposal-card h4 {
    color: var(--kamos-primary-color);
}
:root.dark .action-proposal-card p {
    color: var(--kamos-text-color-default);
}

:root.dark .table-wrapper-for-border-radius {
    border-color: var(--kamos-border-color-default);
    box-shadow: var(--kamos-box-shadow-md);
    background-color: var(--kamos-bg-color-body);
}
:root.dark table.analysis-table th,
:root.dark table.analysis-table td {
    border-color: var(--kamos-border-color-default);
}
:root.dark table.analysis-table th {
    background-color: var(--kamos-bg-color-table-header);
    color: var(--kamos-text-color-default);
}
:root.dark table.analysis-table tr:nth-child(even) td {
    background-color: var(--kamos-bg-color-container-light);
}
:root.dark table.analysis-table tr:nth-child(odd) td {
    background-color: var(--kamos-bg-color-body);
}
:root.dark table.analysis-table td.edited {
    background-color: var(--kamos-bg-color-edited-cell);
    box-shadow: 0 0 0 3px rgba(246, 224, 94, 0.4);
}

/* Prose styling for Markdown content in modals (Dark Mode overrides) */
:root.dark .prose :where(h1):not(:where([class~="not-prose"] *)) {
    color: var(--kamos-primary-color);
}
:root.dark .prose :where(h2):not(:where([class~="not-prose"] *)) {
    color: var(--kamos-secondary-color);
}
:root.dark .prose :where(h3):not(:where([class~="not-prose"] *)) {
    color: var(--kamos-text-color-default);
}
:root.dark .prose :where(p):not(:where([class~="not-prose"] *)) {
    color: var(--kamos-text-color-default);
}
:root.dark .prose :where(code):not(:where([class~="not-prose"] *)) {
    background-color: var(--kamos-secondary-color);
    color: var(--kamos-text-color-default);
}
:root.dark .prose :where(pre):not(:where([class~="not-prose"] *)) {
    background-color: var(--kamos-secondary-color);
    color: var(--kamos-text-color-default);
}
:root.dark .prose :where(blockquote):not(:where([class~="not-prose"] *)) {
    border-color: var(--kamos-border-color-default);
    color: var(--kamos-text-color-light);
}
:root.dark .prose :where(hr):not(:where([class~="not-prose"] *)) {
    border-color: var(--kamos-border-color-default);
}

/* Status Messages (Dark Mode overrides) */
:root.dark #updateStatusMessage.status-success {
    background-color: rgba(6, 95, 70, 0.4);
    color: var(--kamos-text-color-success);
    border-color: rgba(6, 95, 70, 0.6);
}
:root.dark #updateStatusMessage.status-error {
    background-color: rgba(239, 68, 68, 0.4);
    color: var(--kamos-text-color-error);
    border-color: rgba(239, 68, 68, 0.6);
}
:root.dark #updateStatusMessage.status-warning {
    background-color: rgba(217, 119, 6, 0.4);
    color: var(--kamos-text-color-warning);
    border-color: rgba(217, 119, 6, 0.6);
}
:root.dark #updateStatusMessage.status-info {
    background-color: rgba(59, 130, 246, 0.4);
    color: var(--kamos-accent-blue);
    border-color: rgba(59, 130, 246, 0.6);
}

/* Section Card (Dark Mode overrides) */
:root.dark .kamos-section-card {
    background-color: var(--kamos-bg-color-container-light);
    border-color: var(--kamos-border-color-default);
    box-shadow: var(--kamos-box-shadow-lg);
}

/* Reference URL Item (Dark Mode overrides) */
:root.dark .reference-url-item {
    background-color: var(--kamos-bg-color-input);
    border-color: var(--kamos-border-color-default);
}

/* Info Balloons (Dark Mode overrides) */
:root.dark #frameworkInfoBalloon, :root.dark #personaInfoBalloon {
    background-color: var(--kamos-bg-color-container-light);
    border-color: var(--kamos-border-color-default);
    box-shadow: var(--kamos-box-shadow-md);
}
:root.dark #frameworkInfoBalloon h3, :root.dark #personaInfoBalloon h4 {
    color: var(--kamos-primary-color);
    border-color: var(--kamos-border-color-default);
}

/* Download Buttons Container (Dark Mode overrides) */
:root.dark .download-button-container {
    background-color: var(--kamos-bg-color-container-dark-alpha);
    box-shadow: var(--kamos-box-shadow-lg);
}

/* Auth Container (Dark Mode overrides when not on login page) */
:root.dark body:not(.login-page) #authContainer {
    background-color: var(--kamos-bg-color-container-light); /* Darker background for header */
    box-shadow: var(--kamos-box-shadow-md); /* Adjust shadow for dark mode */
}

/* Action Button Group (Dark Mode overrides for open state) */
:root.dark .action-button-group.open {
    background-color: var(--kamos-bg-color-container-light); /* Darker background for open state */
    box-shadow: var(--kamos-box-shadow-lg); /* Adjust shadow for dark mode */
}