/* 深色模式样式 */

/* 深色模式变量 */
.dark-mode {
  --background-color: #111827;
  --surface-color: #1f2937;
  --text-color: #f9fafb;
  --text-secondary: #d1d5db;
  --border-color: #374151;
  --primary-color: #60a5fa;
  --secondary-color: #818cf8;
  --accent-color: #f472b6;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* 深色模式下的头部 */
.dark-mode .header {
  background-color: var(--surface-color);
  border-bottom-color: var(--border-color);
}

.dark-mode .header.scrolled {
  background-color: rgba(17, 24, 39, 0.95);
}

/* 深色模式下的导航 */
.dark-mode .nav-menu {
  background-color: var(--surface-color);
  box-shadow: var(--shadow-lg);
}

.dark-mode .nav-menu li a {
  color: var(--text-color);
}

.dark-mode .nav-menu li a:hover {
  color: var(--primary-color);
}

.dark-mode .nav-menu li a::after {
  background-color: var(--primary-color);
}

/* 深色模式下的文章卡片 */
.dark-mode .post-card {
  background-color: var(--surface-color);
  box-shadow: var(--shadow-sm);
}

.dark-mode .post-card:hover {
  box-shadow: var(--shadow-lg);
}

.dark-mode .post-card-title {
  color: var(--text-color);
}

.dark-mode .post-card-excerpt {
  color: var(--text-secondary);
}

.dark-mode .post-card-meta {
  color: var(--text-secondary);
}

/* 深色模式下的侧边栏 */
.dark-mode .sidebar {
  background-color: var(--surface-color);
  box-shadow: var(--shadow-sm);
}

.dark-mode .widget-title {
  color: var(--text-color);
  border-bottom-color: var(--primary-color);
}

/* 深色模式下的文章详情页 */
.dark-mode .single-post {
  background-color: var(--surface-color);
  box-shadow: var(--shadow-sm);
}

.dark-mode .post-title {
  color: var(--text-color);
}

.dark-mode .post-meta {
  color: var(--text-secondary);
}

.dark-mode .post-content {
  color: var(--text-color);
}

.dark-mode .post-content p {
  color: var(--text-color);
}

/* 深色模式下的页脚 */
.dark-mode .footer {
  background-color: var(--surface-color);
  border-top-color: var(--border-color);
}

.dark-mode .footer-column h3 {
  color: var(--text-color);
}

.dark-mode .footer-links a {
  color: var(--text-secondary);
}

.dark-mode .footer-links a:hover {
  color: var(--primary-color);
}

.dark-mode .footer-bottom {
  color: var(--text-secondary);
  border-top-color: var(--border-color);
}

/* 深色模式下的分页 */
.dark-mode .pagination a {
  background-color: var(--surface-color);
  color: var(--text-color);
}

.dark-mode .pagination a:hover {
  background-color: var(--primary-color);
  color: white;
}

.dark-mode .pagination .current {
  background-color: var(--primary-color);
  color: white;
}

/* 深色模式下的返回顶部按钮 */
.dark-mode .back-to-top {
  background-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.dark-mode .back-to-top:hover {
  background-color: var(--secondary-color);
  box-shadow: var(--shadow-lg);
}

/* 深色模式下的搜索弹窗 */
.dark-mode .search-popup {
  background-color: rgba(0, 0, 0, 0.95);
}

.dark-mode .search-popup input {
  background-color: var(--surface-color);
  border-color: var(--primary-color);
  color: var(--text-color);
}

.dark-mode .search-popup input::placeholder {
  color: var(--text-secondary);
}

.dark-mode .search-popup-close {
  color: var(--text-color);
}

.dark-mode .search-popup-close:hover {
  color: var(--primary-color);
}

/* 深色模式下的加载动画 */
.dark-mode .loading-spinner {
  border-color: var(--border-color);
  border-top-color: var(--primary-color);
}

/* 深色模式下的404页面 */
.dark-mode .error-404 h1 {
  color: var(--primary-color);
}

.dark-mode .error-404 p {
  color: var(--text-secondary);
}

/* 深色模式下的表单元素 */
.dark-mode input, 
.dark-mode textarea, 
.dark-mode select {
  background-color: var(--surface-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

.dark-mode input:focus, 
.dark-mode textarea:focus, 
.dark-mode select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.dark-mode input::placeholder, 
.dark-mode textarea::placeholder {
  color: var(--text-secondary);
}

/* 深色模式下的代码样式 */
.dark-mode code, 
.dark-mode pre {
  background-color: var(--surface-color);
  color: var(--text-color);
}

/* 深色模式下的引用样式 */
.dark-mode blockquote {
  border-left-color: var(--primary-color);
  color: var(--text-secondary);
}

/* 深色模式下的分割线 */
.dark-mode hr {
  border-top-color: var(--border-color);
}

/* 深色模式下的滚动条 */
.dark-mode ::-webkit-scrollbar-track {
  background: var(--surface-color);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* 深色模式下的选择文本 */
.dark-mode ::selection {
  background-color: rgba(96, 165, 250, 0.3);
  color: var(--text-color);
}

/* 深色模式下的焦点样式 */
.dark-mode :focus-visible {
  outline: 2px solid var(--primary-color);
}

/* 深色模式下的骨架屏 */
.dark-mode .skeleton {
  background: linear-gradient(90deg, var(--border-color) 25%, rgba(255, 255, 255, 0.1) 50%, var(--border-color) 75%);
}

/* 深色模式下的按钮 */
.dark-mode button {
  color: var(--text-color);
}

/* 深色模式下的链接 */
.dark-mode a {
  color: var(--primary-color);
}

.dark-mode a:hover {
  color: var(--secondary-color);
}

/* 深色模式下的标题 */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
  color: var(--text-color);
}

/* 深色模式下的列表 */
.dark-mode ul, 
.dark-mode ol {
  color: var(--text-color);
}

/* 深色模式下的移动端菜单 */
.dark-mode .mobile-menu-toggle {
  color: var(--text-color);
}

/* 深色模式切换按钮 */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--text-color);
  transition: color var(--transition-fast);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  color: var(--primary-color);
  background-color: rgba(0, 0, 0, 0.05);
}

.dark-mode .theme-toggle {
  color: var(--text-color);
}

.dark-mode .theme-toggle:hover {
  color: var(--primary-color);
  background-color: rgba(255, 255, 255, 0.1);
}

/* 深色模式下的动画效果 */
.dark-mode .btn-ripple::after {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 深色模式下的打字机效果 */
.dark-mode .typewriter {
  border-right-color: var(--text-color);
}

/* 深色模式下的卡片悬停效果 */
.dark-mode .card-hover:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* 深色模式下的图片悬停效果 */
.dark-mode .img-hover-zoom img {
  transition: transform var(--transition-slow);
}

.dark-mode .img-hover-zoom:hover img {
  transform: scale(1.1);
}

/* 深色模式下的文字悬停效果 */
.dark-mode .text-hover::after {
  background-color: var(--primary-color);
}

/* 深色模式下的淡入动画 */
.dark-mode .fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* 深色模式下的滑入动画 */
.dark-mode .slide-in {
  animation: slideIn 0.5s ease-in-out;
}

/* 深色模式下的脉冲动画 */
.dark-mode .pulse {
  animation: pulse 2s infinite;
}

/* 深色模式下的摇摆动画 */
.dark-mode .shake {
  animation: shake 0.6s ease-in-out;
}

/* 深色模式下的弹跳动画 */
.dark-mode .bounce {
  animation: bounce 1s ease-in-out;
}

/* 深色模式下的呼吸动画 */
.dark-mode .breathe {
  animation: breathe 2s ease-in-out infinite;
}

/* 深色模式下的滚动显示动画 */
.dark-mode .scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.dark-mode .scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 深色模式下的波浪动画 */
.dark-mode .wave {
  animation: wave 1.5s ease-in-out infinite;
}

/* 深色模式下的渐变动画 */
.dark-mode .gradient-animate {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

/* 深色模式下的菜单动画 */
.dark-mode .menu-slide-in {
  animation: menuSlide 0.3s ease-in-out;
}

/* 深色模式下的模态框动画 */
.dark-mode .modal-fade-in {
  animation: modalFadeIn 0.3s ease-in-out;
}

/* 深色模式下的进度条动画 */
.dark-mode .progress-bar {
  animation: progress 2s ease-in-out;
}

/* 深色模式下的弹跳球动画 */
.dark-mode .bounce-ball {
  animation: bounceBall 1.5s ease-in-out infinite;
}

/* 深色模式下的翻转动画 */
.dark-mode .flip {
  animation: flip 1s ease-in-out;
}

/* 深色模式下的淡入淡出动画 */
.dark-mode .fade-in-out {
  animation: fadeInOut 3s ease-in-out infinite;
}