/* dark-mode.css - ダークモードテーマ
 * Reading Forest 全ページ共通のダークモード配色定義
 * 作成日: 2025-12-11
 */

/* ダークモード: OS設定に応じた自動切り替え */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

    /* 見出し */
    h1, h2, h3, h4, h5, h6 {
        color: #ffffff !important;
    }

    .page-header h1,
    .section-header h2 {
        color: #ffffff !important;
    }

    .page-header p,
    .section-header p {
        color: #b0b0b0 !important;
    }

    /* セクション・カード */
    .section,
    .card,
    .container {
        background: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-color: #444444 !important;
    }

    .section p,
    .step p {
        color: #b0b0b0 !important;
    }

    /* テーブル */
    .info-table,
    table {
        background: #2d2d2d !important;
    }

    .info-table th,
    th {
        background: #3a3a3a !important;
        color: #ffffff !important;
    }

    .info-table td,
    td {
        color: #b0b0b0 !important;
        border-bottom-color: #444444 !important;
    }

    /* アラートボックス */
    .alert-warning {
        background-color: #3a2a2a !important;
        border-color: #d4b0a0 !important;
        color: #d4b0a0 !important;
    }

    .alert-warning .alert-content,
    .alert-warning .alert-content strong,
    .alert-warning .alert-content li {
        color: #d4b0a0 !important;
    }

    .alert-info {
        background-color: #2a3540 !important;
        border-color: #a8c5d8 !important;
        color: #a8c5d8 !important;
    }

    .alert-info .alert-content,
    .alert-info .alert-content strong,
    .alert-info .alert-content li {
        color: #a8c5d8 !important;
    }

    .alert-danger {
        background-color: #3a2a2a !important;
        border-color: #d4aaaa !important;
        color: #d4aaaa !important;
    }

    .alert-danger .alert-content,
    .alert-danger .alert-content strong,
    .alert-danger .alert-content li {
        color: #d4aaaa !important;
    }

    /* スクリーンショット・画像エリア */
    .screenshot {
        background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%) !important;
        border-color: #444444 !important;
        color: #b0b0b0 !important;
    }

    /* FAQ項目 */
    .faq-item {
        background: #3a3a3a !important;
    }

    .faq-item h4 {
        color: #ffffff !important;
    }

    .faq-item p {
        color: #b0b0b0 !important;
    }

    /* 目次 */
    .toc-nav {
        background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%) !important;
    }

    /* フッター */
    footer {
        background: #1e1e1e !important;
        color: #b0b0b0 !important;
    }

    footer a {
        color: #b0b0b0 !important;
    }

    footer a:hover {
        color: #ffffff !important;
    }
}

/* ダークモード: アプリ内テーマ設定 (data-theme属性) */
[data-theme="dark"] {
    body {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

    /* 見出し */
    h1, h2, h3, h4, h5, h6 {
        color: #ffffff !important;
    }

    .page-header h1,
    .section-header h2 {
        color: #ffffff !important;
    }

    .page-header p,
    .section-header p {
        color: #b0b0b0 !important;
    }

    /* セクション・カード */
    .section,
    .card,
    .container {
        background: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-color: #444444 !important;
    }

    .section p,
    .step p {
        color: #b0b0b0 !important;
    }

    /* テーブル */
    .info-table,
    table {
        background: #2d2d2d !important;
    }

    .info-table th,
    th {
        background: #3a3a3a !important;
        color: #ffffff !important;
    }

    .info-table td,
    td {
        color: #b0b0b0 !important;
        border-bottom-color: #444444 !important;
    }

    /* アラートボックス */
    .alert-warning {
        background-color: #3a2a2a !important;
        border-color: #d4b0a0 !important;
        color: #d4b0a0 !important;
    }

    .alert-warning .alert-content,
    .alert-warning .alert-content strong,
    .alert-warning .alert-content li {
        color: #d4b0a0 !important;
    }

    .alert-info {
        background-color: #2a3540 !important;
        border-color: #a8c5d8 !important;
        color: #a8c5d8 !important;
    }

    .alert-info .alert-content,
    .alert-info .alert-content strong,
    .alert-info .alert-content li {
        color: #a8c5d8 !important;
    }

    .alert-danger {
        background-color: #3a2a2a !important;
        border-color: #d4aaaa !important;
        color: #d4aaaa !important;
    }

    .alert-danger .alert-content,
    .alert-danger .alert-content strong,
    .alert-danger .alert-content li {
        color: #d4aaaa !important;
    }

    /* スクリーンショット・画像エリア */
    .screenshot {
        background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%) !important;
        border-color: #444444 !important;
        color: #b0b0b0 !important;
    }

    /* FAQ項目 */
    .faq-item {
        background: #3a3a3a !important;
    }

    .faq-item h4 {
        color: #ffffff !important;
    }

    .faq-item p {
        color: #b0b0b0 !important;
    }

    /* 目次 */
    .toc-nav {
        background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%) !important;
    }

    /* フッター */
    footer {
        background: #1e1e1e !important;
        color: #b0b0b0 !important;
    }

    footer a {
        color: #b0b0b0 !important;
    }

    footer a:hover {
        color: #ffffff !important;
    }
}