/* custom.css - カスタムテーマ（拡張テーマ定義）
 * Reading Forest カスタムテーマ定義
 * 作成日: 2025-12-11
 * 更新日: 2025-12-11 - セピア、ハイコントラスト、色覚サポート追加
 *
 * 提供テーマ:
 * - セピアモード（目に優しい暖色系）
 * - ハイコントラストモード（視認性重視、WCAG AAA準拠）
 * - プロタノピア対応（赤色弱サポート）
 * - デュータノピア対応（緑色弱サポート）
 * - トリタノピア対応（青色弱サポート）
 */

/* ========================================
   セピアモード（Sepia Mode）
   目に優しい、紙の本のような暖色系配色
   ======================================== */
[data-theme="sepia"] {
    /* 背景 */
    body {
        background-color: #f4ecd8 !important;
        color: #5c4a3a !important;
    }

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

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

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

    /* セクション・カード */
    .section,
    .card,
    .container {
        background: #f9f6ed !important;
        color: #5c4a3a !important;
        border-color: #d4c4a8 !important;
    }

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

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

    .info-table th,
    th {
        background: #ebe3d5 !important;
        color: #4a3929 !important;
    }

    .info-table td,
    td {
        color: #6d5d4d !important;
        border-bottom-color: #d4c4a8 !important;
    }

    /* アラートボックス */
    .alert-warning {
        background-color: #f0e4cc !important;
        border-color: #c9a96e !important;
        color: #7a5d3a !important;
    }

    .alert-info {
        background-color: #dfe9f0 !important;
        border-color: #8fa8c0 !important;
        color: #3a5570 !important;
    }

    .alert-danger {
        background-color: #f0d4d4 !important;
        border-color: #c98a8a !important;
        color: #7a3a3a !important;
    }

    /* スクリーンショット・画像エリア */
    .screenshot {
        background: #ebe3d5 !important;
        border-color: #d4c4a8 !important;
        color: #6d5d4d !important;
    }

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

    /* フッター */
    footer {
        background: #6d5d4d !important;
        color: #f4ecd8 !important;
    }

    footer a {
        color: #f4ecd8 !important;
    }

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

/* ========================================
   ハイコントラストモード（High Contrast Mode）
   視認性を最優先、WCAG AAA準拠（7:1以上のコントラスト比）
   ======================================== */
[data-theme="high-contrast"] {
    /* 背景 */
    body {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

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

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

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

    /* セクション・カード */
    .section,
    .card,
    .container {
        background: #000000 !important;
        color: #ffffff !important;
        border: 3px solid #ffffff !important;
    }

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

    /* テーブル */
    .info-table,
    table {
        background: #000000 !important;
        border: 2px solid #ffffff !important;
    }

    .info-table th,
    th {
        background: #1a1a1a !important;
        color: #ffff00 !important; /* 黄色で強調 */
        border: 2px solid #ffffff !important;
    }

    .info-table td,
    td {
        color: #ffffff !important;
        border: 1px solid #ffffff !important;
    }

    /* アラートボックス（WCAGコントラスト比7:1以上） */
    .alert-warning {
        background-color: #000000 !important;
        border: 3px solid #ffff00 !important;
        color: #ffff00 !important; /* 黄色 - 黒背景で7.9:1 */
    }

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

    .alert-info {
        background-color: #000000 !important;
        border: 3px solid #00ffff !important;
        color: #00ffff !important; /* シアン - 黒背景で12.6:1 */
    }

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

    .alert-danger {
        background-color: #000000 !important;
        border: 3px solid #ff4444 !important;
        color: #ff4444 !important; /* 明るい赤 - 黒背景で7.1:1 */
    }

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

    /* スクリーンショット・画像エリア */
    .screenshot {
        background: #000000 !important;
        border: 3px solid #ffffff !important;
        color: #ffffff !important;
    }

    /* FAQ項目 */
    .faq-item {
        background: #1a1a1a !important;
        border: 2px solid #ffffff !important;
    }

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

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

    /* リンク */
    a {
        color: #00ffff !important; /* シアン */
        text-decoration: underline !important;
    }

    a:hover {
        color: #ffff00 !important; /* 黄色 */
    }

    /* フッター */
    footer {
        background: #000000 !important;
        color: #ffffff !important;
        border-top: 3px solid #ffffff !important;
    }

    footer a {
        color: #00ffff !important;
        text-decoration: underline !important;
    }

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

/* ========================================
   色覚特性サポート（Color Vision Deficiency Support）
   赤緑色覚異常（プロタノピア・デュータノピア）に配慮
   ======================================== */

/* プロタノピア対応（赤色弱・1型2色覚）- 赤が見えにくい */
[data-theme="protanopia"] {
    /* 赤色を青色に置き換え */
    --color-error: #cce0f0 !important;       /* 淡い青 */
    --color-error-dark: #3b82f6 !important;  /* 濃い青 */
    --color-warning: #f0e4cc !important;     /* 黄色はそのまま */
    --color-warning-dark: #ed8936 !important;

    .alert-danger {
        background-color: #cce0f0 !important;
        border-color: #3b82f6 !important;
        color: #1e3a5f !important;
    }
}

/* デュータノピア対応（緑色弱・2型2色覚）- 緑が見えにくい */
[data-theme="deuteranopia"] {
    /* 緑色を青色に置き換え */
    --color-success: #cce0f0 !important;      /* 淡い青 */
    --color-success-dark: #3b82f6 !important; /* 濃い青 */

    .alert-success {
        background-color: #cce0f0 !important;
        border-color: #3b82f6 !important;
        color: #1e3a5f !important;
    }
}

/* トリタノピア対応（青色弱・3型2色覚）- 青が見えにくい */
[data-theme="tritanopia"] {
    /* 青色を赤色に置き換え */
    --color-info: #f0cccc !important;        /* 淡い赤 */
    --color-info-dark: #e53e3e !important;   /* 濃い赤 */
    --color-primary: #ed8936 !important;     /* オレンジ */

    .alert-info {
        background-color: #f0cccc !important;
        border-color: #e53e3e !important;
        color: #5f1e1e !important;
    }
}

/* ========================================
   人気のテーマ（Popular Themes）
   ======================================== */

/* ブルーライトカットモード（Night Reading Mode）
   就寝前の読書に最適、ブルーライトを抑えた暖色系 */
[data-theme="night-reading"] {
    body {
        background-color: #2d1810 !important; /* 深い茶色 */
        color: #ffcc99 !important; /* 暖色系オレンジ */
    }

    h1, h2, h3, h4, h5, h6 {
        color: #ffddaa !important;
    }

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

    .section,
    .card,
    .container {
        background: #3d2820 !important;
        color: #ffcc99 !important;
        border-color: #5d4030 !important;
    }

    .info-table th,
    th {
        background: #4d3830 !important;
        color: #ffddaa !important;
    }

    .info-table td,
    td {
        color: #ffcc99 !important;
        border-bottom-color: #5d4030 !important;
    }

    footer {
        background: #2d1810 !important;
        color: #ffcc99 !important;
    }
}

/* ノルディックモード（Nordic/Nord Theme）
   人気の Nord カラーパレット */
[data-theme="nord"] {
    body {
        background-color: #2e3440 !important; /* Nord Polar Night */
        color: #d8dee9 !important; /* Nord Snow Storm */
    }

    h1, h2, h3, h4, h5, h6 {
        color: #eceff4 !important;
    }

    .section,
    .card,
    .container {
        background: #3b4252 !important;
        color: #d8dee9 !important;
        border-color: #4c566a !important;
    }

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

    .info-table th,
    th {
        background: #434c5e !important;
        color: #88c0d0 !important; /* Nord Frost */
    }

    .info-table td,
    td {
        color: #d8dee9 !important;
        border-bottom-color: #4c566a !important;
    }

    .alert-info {
        background-color: #5e81ac !important; /* Nord Frost Blue */
        border-color: #88c0d0 !important;
        color: #eceff4 !important;
    }

    .alert-warning {
        background-color: #d08770 !important; /* Nord Aurora Orange */
        border-color: #bf616a !important;
        color: #2e3440 !important;
    }

    footer {
        background: #2e3440 !important;
        color: #d8dee9 !important;
    }
}

/* ソラライズドダーク（Solarized Dark）
   目に優しい人気のダークテーマ */
[data-theme="solarized-dark"] {
    body {
        background-color: #002b36 !important; /* Base 03 */
        color: #839496 !important; /* Base 0 */
    }

    h1, h2, h3, h4, h5, h6 {
        color: #93a1a1 !important; /* Base 1 */
    }

    .section,
    .card,
    .container {
        background: #073642 !important; /* Base 02 */
        color: #839496 !important;
        border-color: #586e75 !important; /* Base 01 */
    }

    .info-table th,
    th {
        background: #073642 !important;
        color: #2aa198 !important; /* Cyan */
    }

    .info-table td,
    td {
        color: #839496 !important;
        border-bottom-color: #586e75 !important;
    }

    .alert-info {
        background-color: #073642 !important;
        border-color: #268bd2 !important; /* Blue */
        color: #268bd2 !important;
    }

    .alert-warning {
        background-color: #073642 !important;
        border-color: #b58900 !important; /* Yellow */
        color: #b58900 !important;
    }

    .alert-danger {
        background-color: #073642 !important;
        border-color: #dc322f !important; /* Red */
        color: #dc322f !important;
    }

    footer {
        background: #002b36 !important;
        color: #839496 !important;
    }
}

/* モノカイモード（Monokai）
   開発者に人気のダークテーマ */
[data-theme="monokai"] {
    body {
        background-color: #272822 !important;
        color: #f8f8f2 !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #f92672 !important; /* Pink */
    }

    .section,
    .card,
    .container {
        background: #3e3d32 !important;
        color: #f8f8f2 !important;
        border-color: #75715e !important;
    }

    .info-table th,
    th {
        background: #49483e !important;
        color: #a6e22e !important; /* Green */
    }

    .info-table td,
    td {
        color: #f8f8f2 !important;
        border-bottom-color: #75715e !important;
    }

    .alert-info {
        background-color: #3e3d32 !important;
        border-color: #66d9ef !important; /* Cyan */
        color: #66d9ef !important;
    }

    .alert-warning {
        background-color: #3e3d32 !important;
        border-color: #e6db74 !important; /* Yellow */
        color: #e6db74 !important;
    }

    footer {
        background: #272822 !important;
        color: #f8f8f2 !important;
    }
}

/* ドラキュラモード（Dracula）
   人気のダークテーマ、目に優しいパープル系 */
[data-theme="dracula"] {
    body {
        background-color: #282a36 !important;
        color: #f8f8f2 !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #bd93f9 !important; /* Purple */
    }

    .section,
    .card,
    .container {
        background: #44475a !important;
        color: #f8f8f2 !important;
        border-color: #6272a4 !important;
    }

    .info-table th,
    th {
        background: #44475a !important;
        color: #8be9fd !important; /* Cyan */
    }

    .info-table td,
    td {
        color: #f8f8f2 !important;
        border-bottom-color: #6272a4 !important;
    }

    .alert-info {
        background-color: #44475a !important;
        border-color: #8be9fd !important; /* Cyan */
        color: #8be9fd !important;
    }

    .alert-warning {
        background-color: #44475a !important;
        border-color: #f1fa8c !important; /* Yellow */
        color: #f1fa8c !important;
    }

    .alert-danger {
        background-color: #44475a !important;
        border-color: #ff5555 !important; /* Red */
        color: #ff5555 !important;
    }

    footer {
        background: #282a36 !important;
        color: #f8f8f2 !important;
    }
}

/* グルーヴボックスダーク（Gruvbox Dark）
   レトロで温かみのあるダークテーマ */
[data-theme="gruvbox-dark"] {
    body {
        background-color: #282828 !important;
        color: #ebdbb2 !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #fabd2f !important; /* Yellow */
    }

    .section,
    .card,
    .container {
        background: #3c3836 !important;
        color: #ebdbb2 !important;
        border-color: #504945 !important;
    }

    .info-table th,
    th {
        background: #3c3836 !important;
        color: #b8bb26 !important; /* Green */
    }

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

    .alert-info {
        background-color: #3c3836 !important;
        border-color: #83a598 !important; /* Blue */
        color: #83a598 !important;
    }

    .alert-warning {
        background-color: #3c3836 !important;
        border-color: #fabd2f !important; /* Yellow */
        color: #fabd2f !important;
    }

    footer {
        background: #282828 !important;
        color: #ebdbb2 !important;
    }
}