/* AmanaOne カラーテーマ
 *
 * 全ページ共通のセマンティックトークン。実際の色はここだけで定義し、
 * 各ページ・各コンポーネントはトークンを参照する。
 * テーマは <html data-amana-theme="brown|blue|pink|dark"> で切り替える。
 * 属性の付与は assets/theme-boot.js が描画前に行う（フラッシュ防止）。
 *
 * トークンの役割
 *   accent        : ブランド／主要アクション色
 *   accent-2      : 旧来のインディゴ系（詩歌のリンク・聖書のTailwind indigo）
 *   paper         : グローバルナビの地色（半透明）
 *   page-bg       : ページ全体の地色
 *   surface       : カード・本文面
 *   ink           : 本文色
 *   border        : 罫線
 */

:root,
[data-amana-theme='brown'] {
  --amana-control-height: 44px;
  --amana-control-radius: 10px;
  --amana-accent: #8a7350;
  --amana-accent-hover: #735f41;
  --amana-accent-strong: #927a52;
  --amana-accent-soft: rgba(138, 115, 80, .10);
  --amana-accent-soft-strong: rgba(138, 115, 80, .20);
  --amana-accent-line: rgba(138, 115, 80, .32);
  --amana-accent-line-strong: rgba(138, 115, 80, .38);
  --amana-on-accent: #fff;

  --amana-accent-2: #667eea;
  --amana-accent-2-hover: #5263c7;
  --amana-accent-2-strong: #764ba2;
  --amana-accent-2-soft: rgba(102, 126, 234, .10);

  --amana-paper: rgba(252, 250, 245, .96);
  --amana-page-bg: #f5f0e6;
  --amana-surface: #fff;
  --amana-surface-translucent: rgba(255, 255, 255, .96);
  --amana-surface-muted: #f8f9fa;
  --amana-surface-sunken: #f0f1f4;
  --amana-surface-raised: #f5f6f8;

  --amana-ink: #212529;
  --amana-ink-nav: #17213a;
  --amana-ink-muted: #495057;
  --amana-ink-subtle: #6c757d;
  --amana-ink-faint: #7b8495;

  --amana-border: #e9ecef;
  --amana-border-strong: #dee2e6;
  --amana-border-hairline: rgba(23, 33, 58, .10);
  --amana-shadow: rgba(23, 33, 58, .12);
  --amana-scrim: rgba(23, 33, 58, .38);

  --amana-glow: #fffaf0;
  --amana-highlight-bg: #eee6d8;
  --amana-highlight-strong: #8a7350;

  color-scheme: light;
}

[data-amana-theme='blue'] {
  --amana-accent: #40639b;
  --amana-accent-hover: #33507f;
  --amana-accent-strong: #4a6ea9;
  --amana-accent-soft: rgba(64, 99, 155, .10);
  --amana-accent-soft-strong: rgba(64, 99, 155, .20);
  --amana-accent-line: rgba(64, 99, 155, .32);
  --amana-accent-line-strong: rgba(64, 99, 155, .38);
  --amana-on-accent: #fff;

  --amana-accent-2: #4f7bc4;
  --amana-accent-2-hover: #3f639f;
  --amana-accent-2-strong: #5b6fb8;
  --amana-accent-2-soft: rgba(79, 123, 196, .10);

  --amana-paper: rgba(247, 250, 253, .96);
  --amana-page-bg: #eaf0f7;
  --amana-surface: #fff;
  --amana-surface-translucent: rgba(255, 255, 255, .96);
  --amana-surface-muted: #f6f8fb;
  --amana-surface-sunken: #eef2f8;
  --amana-surface-raised: #f3f6fa;

  --amana-ink: #1b2433;
  --amana-ink-nav: #17213a;
  --amana-ink-muted: #45505f;
  --amana-ink-subtle: #667385;
  --amana-ink-faint: #7b8698;

  --amana-border: #e3e9f1;
  --amana-border-strong: #d5dde8;
  --amana-border-hairline: rgba(27, 36, 51, .10);
  --amana-shadow: rgba(27, 36, 51, .12);
  --amana-scrim: rgba(27, 36, 51, .38);

  --amana-glow: #f4f8ff;
  --amana-highlight-bg: #dfe9f6;
  --amana-highlight-strong: #40639b;

  color-scheme: light;
}

[data-amana-theme='pink'] {
  --amana-accent: #b06280;
  --amana-accent-hover: #934f69;
  --amana-accent-strong: #bd6f8d;
  --amana-accent-soft: rgba(176, 98, 128, .10);
  --amana-accent-soft-strong: rgba(176, 98, 128, .20);
  --amana-accent-line: rgba(176, 98, 128, .32);
  --amana-accent-line-strong: rgba(176, 98, 128, .38);
  --amana-on-accent: #fff;

  --amana-accent-2: #c06a92;
  --amana-accent-2-hover: #a05676;
  --amana-accent-2-strong: #9c5f9e;
  --amana-accent-2-soft: rgba(192, 106, 146, .10);

  --amana-paper: rgba(253, 249, 251, .96);
  --amana-page-bg: #f8ecf1;
  --amana-surface: #fff;
  --amana-surface-translucent: rgba(255, 255, 255, .96);
  --amana-surface-muted: #fbf6f8;
  --amana-surface-sunken: #f6eef2;
  --amana-surface-raised: #f9f3f6;

  --amana-ink: #2a1f25;
  --amana-ink-nav: #33202b;
  --amana-ink-muted: #574650;
  --amana-ink-subtle: #7b6771;
  --amana-ink-faint: #8d7a84;

  --amana-border: #eee1e7;
  --amana-border-strong: #e3d1da;
  --amana-border-hairline: rgba(42, 31, 37, .10);
  --amana-shadow: rgba(42, 31, 37, .12);
  --amana-scrim: rgba(42, 31, 37, .38);

  --amana-glow: #fff5f9;
  --amana-highlight-bg: #f4dde7;
  --amana-highlight-strong: #b06280;

  color-scheme: light;
}

[data-amana-theme='dark'] {
  --amana-accent: #c2a06a;
  --amana-accent-hover: #d5b784;
  --amana-accent-strong: #b08f5c;
  --amana-accent-soft: rgba(194, 160, 106, .16);
  --amana-accent-soft-strong: rgba(194, 160, 106, .28);
  --amana-accent-line: rgba(194, 160, 106, .34);
  --amana-accent-line-strong: rgba(194, 160, 106, .44);
  --amana-on-accent: #1a1710;

  --amana-accent-2: #8fa6e8;
  --amana-accent-2-hover: #a8bbf0;
  --amana-accent-2-strong: #a58ce0;
  --amana-accent-2-soft: rgba(143, 166, 232, .16);

  --amana-paper: rgba(23, 26, 33, .96);
  --amana-page-bg: #14171d;
  --amana-surface: #1c2029;
  --amana-surface-translucent: rgba(28, 32, 41, .96);
  --amana-surface-muted: #232833;
  --amana-surface-sunken: #10131a;
  --amana-surface-raised: #2b313d;

  --amana-ink: #e8e6e1;
  --amana-ink-nav: #e8e6e1;
  --amana-ink-muted: #c2c6cf;
  --amana-ink-subtle: #a4aab5;
  --amana-ink-faint: #9aa2af;

  --amana-border: #313846;
  --amana-border-strong: #3d4453;
  --amana-border-hairline: rgba(255, 255, 255, .12);
  --amana-shadow: rgba(0, 0, 0, .55);
  --amana-scrim: rgba(0, 0, 0, .62);

  --amana-glow: rgba(194, 160, 106, .10);
  --amana-highlight-bg: rgba(194, 160, 106, .22);
  --amana-highlight-strong: #c2a06a;

  color-scheme: dark;
}

/* 全画面で共有する操作・可読性の基準。 */
html {
  color: var(--amana-ink);
  background: var(--amana-page-bg);
}

body {
  color: var(--amana-ink);
  background-color: var(--amana-page-bg);
}

::selection {
  color: var(--amana-ink);
  background: var(--amana-highlight-bg);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--amana-accent-line-strong) !important;
  outline-offset: 2px;
}

/* 聖書・詩歌で共有する、本文を遮らない白色リキッドガラス操作。 */
.amana-liquid-glass-action {
  color: var(--amana-accent) !important;
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}

.amana-liquid-glass-action:hover {
  color: var(--amana-accent-hover) !important;
  background: rgba(255, 255, 255, .34) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------------
 * ダークテーマ：Tailwind CDN のユーティリティ上書き（聖書ページ）
 *
 * 聖書ページは bg-white / text-gray-700 などの固定色ユーティリティを
 * 約1,000箇所で使っており、CSS変数だけでは暗転できない。実際に使われて
 * いるクラスだけを列挙して上書きする。Tailwind CDN は実行時に <style> を
 * 差し込むため、詳細度ではなく !important で確実に勝たせる。
 * ------------------------------------------------------------------ */

[data-amana-theme='dark'] .bg-white { background-color: var(--amana-surface) !important; }
[data-amana-theme='dark'] .bg-gray-50 { background-color: var(--amana-surface-muted) !important; }
[data-amana-theme='dark'] .bg-gray-100 { background-color: var(--amana-surface-muted) !important; }
[data-amana-theme='dark'] .bg-gray-200 { background-color: var(--amana-surface-raised) !important; }
[data-amana-theme='dark'] .bg-gray-300 { background-color: #39404e !important; }
[data-amana-theme='dark'] .bg-gray-400 { background-color: #4b5364 !important; }
[data-amana-theme='dark'] .bg-gray-500 { background-color: #5c6577 !important; }
[data-amana-theme='dark'] .bg-gray-800 { background-color: var(--amana-surface-sunken) !important; }

[data-amana-theme='dark'] .hover\:bg-gray-50:hover { background-color: var(--amana-surface-muted) !important; }
[data-amana-theme='dark'] .hover\:bg-gray-100:hover { background-color: var(--amana-surface-raised) !important; }
[data-amana-theme='dark'] .hover\:bg-gray-200:hover { background-color: var(--amana-surface-raised) !important; }
[data-amana-theme='dark'] .hover\:bg-gray-300:hover { background-color: #39404e !important; }
[data-amana-theme='dark'] .hover\:bg-gray-600:hover { background-color: #4b5364 !important; }

[data-amana-theme='dark'] .text-gray-900,
[data-amana-theme='dark'] .text-gray-800 { color: var(--amana-ink) !important; }
[data-amana-theme='dark'] .text-gray-700,
[data-amana-theme='dark'] .text-gray-600 { color: var(--amana-ink-muted) !important; }
[data-amana-theme='dark'] .text-gray-500,
[data-amana-theme='dark'] .text-gray-400 { color: var(--amana-ink-subtle) !important; }
[data-amana-theme='dark'] .text-gray-300,
[data-amana-theme='dark'] .text-gray-200 { color: var(--amana-ink-muted) !important; }
[data-amana-theme='dark'] .hover\:text-gray-700:hover,
[data-amana-theme='dark'] .hover\:text-gray-600:hover { color: var(--amana-ink) !important; }

[data-amana-theme='dark'] .border-gray-100,
[data-amana-theme='dark'] .border-gray-200,
[data-amana-theme='dark'] .border-gray-300 { border-color: var(--amana-border) !important; }
[data-amana-theme='dark'] .hover\:border-gray-300:hover { border-color: var(--amana-border-strong) !important; }
[data-amana-theme='dark'] .divide-gray-200 > * + * { border-color: var(--amana-border) !important; }

/* インディゴ系（聖書の既定アクション色）は副アクセントに追従させる。 */
[data-amana-theme='dark'] .bg-indigo-600 { background-color: var(--amana-accent-2) !important; color: var(--amana-on-accent) !important; }
[data-amana-theme='dark'] .hover\:bg-indigo-700:hover,
[data-amana-theme='dark'] .hover\:bg-indigo-600:hover { background-color: var(--amana-accent-2-hover) !important; }
[data-amana-theme='dark'] .bg-indigo-50,
[data-amana-theme='dark'] .bg-indigo-100,
[data-amana-theme='dark'] .hover\:bg-indigo-100:hover { background-color: var(--amana-accent-2-soft) !important; }
[data-amana-theme='dark'] .text-indigo-600,
[data-amana-theme='dark'] .text-indigo-700,
[data-amana-theme='dark'] .text-indigo-800 { color: var(--amana-accent-2) !important; }
[data-amana-theme='dark'] .hover\:text-indigo-600:hover,
[data-amana-theme='dark'] .hover\:text-indigo-800:hover { color: var(--amana-accent-2-hover) !important; }
[data-amana-theme='dark'] .border-indigo-200,
[data-amana-theme='dark'] .border-indigo-600 { border-color: var(--amana-accent-2) !important; }
[data-amana-theme='dark'] .focus\:ring-indigo-500:focus { --tw-ring-color: var(--amana-accent-2) !important; }
[data-amana-theme='dark'] .focus\:border-indigo-500:focus { border-color: var(--amana-accent-2) !important; }

/* 意味色（成功・警告・エラーなど）は暗い地でも読めるよう明度を上げる。 */
[data-amana-theme='dark'] .text-red-600, [data-amana-theme='dark'] .text-red-500 { color: #f28b82 !important; }
[data-amana-theme='dark'] .text-green-600 { color: #7ec994 !important; }
[data-amana-theme='dark'] .text-blue-600 { color: #8ab4f8 !important; }
[data-amana-theme='dark'] .text-yellow-600, [data-amana-theme='dark'] .text-amber-600 { color: #e3c26b !important; }
[data-amana-theme='dark'] .text-purple-600 { color: #c9a4ee !important; }
[data-amana-theme='dark'] .text-pink-600 { color: #f0a0c0 !important; }
[data-amana-theme='dark'] .bg-green-50 { background-color: rgba(126, 201, 148, .14) !important; }
[data-amana-theme='dark'] .bg-yellow-50 { background-color: rgba(227, 194, 107, .14) !important; }
[data-amana-theme='dark'] .bg-blue-50 { background-color: rgba(138, 180, 248, .14) !important; }
[data-amana-theme='dark'] .bg-purple-50 { background-color: rgba(201, 164, 238, .14) !important; }
[data-amana-theme='dark'] .border-green-200 { border-color: rgba(126, 201, 148, .35) !important; }
[data-amana-theme='dark'] .border-yellow-200 { border-color: rgba(227, 194, 107, .35) !important; }
[data-amana-theme='dark'] .border-blue-200,
[data-amana-theme='dark'] .border-blue-500,
[data-amana-theme='dark'] .border-blue-600 { border-color: rgba(138, 180, 248, .35) !important; }
[data-amana-theme='dark'] .border-red-200 { border-color: rgba(242, 139, 130, .35) !important; }
[data-amana-theme='dark'] .border-purple-200 { border-color: rgba(201, 164, 238, .35) !important; }

/* ダークでは白地前提のシャドウが黒く潰れるため弱める。 */
[data-amana-theme='dark'] .shadow-sm,
[data-amana-theme='dark'] .shadow,
[data-amana-theme='dark'] .shadow-md,
[data-amana-theme='dark'] .shadow-lg { box-shadow: 0 2px 12px rgba(0, 0, 0, .45) !important; }

/* ------------------------------------------------------------------
 * 設定メニュー（聖書サブページの「表示設定」・本文の「訳本設定」）
 *
 * 中身は Tailwind の固定色ユーティリティ（bg-indigo-600 / bg-blue-500 など）
 * で組まれているため、変数だけでは追従しない。ID スコープで操作部品を
 * まとめてテーマ色へ寄せる。ダーク用の一般上書きより詳細度が高いので、
 * 設定メニュー内は全テーマでアクセント色に統一される。
 * ------------------------------------------------------------------ */

#settingsDropdown input[type='checkbox'],
#settingsDropdown input[type='radio'] {
  accent-color: var(--amana-accent);
}

#settingsDropdown select,
#settingsDropdown input[type='text'],
#settingsDropdown input[type='number'] {
  color: var(--amana-ink) !important;
  background-color: var(--amana-surface) !important;
}

#settingsDropdown select:focus,
#settingsDropdown input[type='text']:focus,
#settingsDropdown input[type='number']:focus {
  border-color: var(--amana-accent) !important;
  box-shadow: 0 0 0 2px var(--amana-accent-soft-strong) !important;
  outline: none;
}

/* 主ボタン（すべて表示・閉じる） */
#settingsDropdown .bg-blue-500,
#settingsDropdown .bg-indigo-600,
#styleDropdown .bg-indigo-600 {
  color: var(--amana-on-accent) !important;
  background-color: var(--amana-accent) !important;
}

#settingsDropdown .hover\:bg-blue-600:hover,
#settingsDropdown .hover\:bg-indigo-700:hover,
#styleDropdown .hover\:bg-indigo-700:hover {
  background-color: var(--amana-accent-hover) !important;
}

/* 副ボタン（すべて非表示） */
#settingsDropdown .bg-gray-500 {
  color: var(--amana-surface) !important;
  background-color: var(--amana-ink-subtle) !important;
}

#settingsDropdown .hover\:bg-gray-600:hover {
  background-color: var(--amana-ink-muted) !important;
}

/* 表示トグル（言語表示・フットノート）のオン／オフ状態 */
#settingsDropdown .bg-green-400,
#settingsDropdown .bg-green-500,
#settingsDropdown .bg-green-600 {
  color: var(--amana-on-accent) !important;
  background-color: var(--amana-accent) !important;
}

#settingsDropdown .hover\:bg-green-700:hover {
  background-color: var(--amana-accent-hover) !important;
}

#settingsDropdown .bg-gray-400 {
  background-color: var(--amana-border-strong) !important;
}

#settingsDropdown .bg-gray-400.text-gray-200 {
  color: var(--amana-ink-subtle) !important;
}

#settingsDropdown .focus\:ring-indigo-500:focus,
#settingsDropdown .focus\:ring-blue-500:focus {
  --tw-ring-color: var(--amana-accent) !important;
}

#settingsDropdown .focus\:border-blue-500:focus,
#settingsDropdown .focus\:border-indigo-500:focus {
  border-color: var(--amana-accent) !important;
}

/* 歯車ボタン自体（サブページのフッターに移設されるもの）の押下状態 */
.amana-bible-subpage-footer__actions #settingsButton[aria-expanded='true'] {
  color: var(--amana-on-accent);
  background: var(--amana-accent);
  border-color: var(--amana-accent);
}