/* 圖書館／學習指南的暗色模式（2026-09-27 使用者要求，模式照搬本站）。
 *
 * 本站是 Tailwind 的 class 模式：暗色時 <html> 有 `dark` 類別（見 index.html 頁首那段載入前先套用的
 * 腳本、js/app.js 的 toggleTheme）。這些靜態頁面刻意不在每個元素上加 dark: 變體，而是用這份樣式表把
 * 頁面用到的每一個 Tailwind 顏色 class 在 `html.dark` 底下換成本站暗色配色（body slate-900、卡片
 * slate-800、文字 slate-100…）——頁面用到的顏色種類是有限的，新增頁面樣式時如果用了新的顏色 class，
 * 要回來這裡補一條，否則暗色模式下會露出淺色底。
 * 特異性：`html.dark .x` 比 Tailwind CDN 產生的 `.x` 高，所以 hover 變體也要各自寫一條（見最後一段）。
 */
html.dark { color-scheme: dark; }

/* 背景 */
html.dark .bg-slate-50 { background-color: #0f172a; }
html.dark .bg-white { background-color: #1e293b; }
html.dark .bg-slate-100 { background-color: #273449; }
html.dark .bg-slate-200 { background-color: #334155; }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.16); }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.28); }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.13); }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.13); }

/* 邊框 */
html.dark .border-slate-100 { border-color: #1e293b; }
html.dark .border-slate-200 { border-color: #334155; }
html.dark .border-slate-300 { border-color: #475569; }
html.dark .border-indigo-100 { border-color: #3730a3; }
html.dark .border-indigo-200 { border-color: #4338ca; }
html.dark .border-indigo-300 { border-color: #6366f1; }
html.dark .border-emerald-200 { border-color: #047857; }
html.dark .border-amber-200 { border-color: #b45309; }
html.dark .border-rose-300 { border-color: #be123c; }

/* 文字 */
html.dark body { color: #e2e8f0; }
html.dark .text-slate-900 { color: #f8fafc; }
html.dark .text-slate-800 { color: #f1f5f9; }
html.dark .text-slate-700 { color: #e2e8f0; }
html.dark .text-slate-600 { color: #cbd5e1; }
html.dark .text-slate-500 { color: #a3b1c6; }
html.dark .text-slate-400 { color: #94a3b8; }
html.dark .text-indigo-500 { color: #a5b4fc; }
html.dark .text-indigo-600 { color: #818cf8; }
html.dark .text-indigo-700 { color: #c7d2fe; }
html.dark .text-emerald-600 { color: #6ee7b7; }
html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .text-emerald-900 { color: #a7f3d0; }
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-amber-900 { color: #fde68a; }
html.dark .text-green-700 { color: #86efac; }
html.dark .text-red-600,
html.dark .text-rose-600 { color: #fca5a5; }

/* 表單（留言區） */
html.dark textarea { background-color: #1e293b; color: #e2e8f0; }
html.dark textarea::placeholder { color: #64748b; }

/* hover 變體（Tailwind 的 hover: 規則特異性比上面的暗色規則低，需要各自補一條） */
html.dark .hover\:bg-slate-50:hover { background-color: #273449; }
html.dark .hover\:bg-indigo-700:hover { background-color: #4338ca; }
html.dark .hover\:border-indigo-300:hover { border-color: #6366f1; }
html.dark .hover\:border-rose-300:hover { border-color: #be123c; }
html.dark .hover\:text-indigo-600:hover { color: #818cf8; }
html.dark .hover\:text-rose-600:hover { color: #fca5a5; }
html.dark .hover\:text-slate-600:hover { color: #cbd5e1; }