/* =============================
   theme.css
   夜间模式、主题相关样式
   ============================= */

/* 为所有受主题影响的元素添加平滑过渡 */
h2 {
  transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-left-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: color, border-left-color;
}

.card .name {
  transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: color;
}

.price, .change {
  transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: color;
}

/* 夜间模式 */
body.dark {
  background: #1e1f24;
  color: #fff;  /* 修改为白色 */
}
body.dark h2 {
  border-left-color: #3a6ff7;
  color: #fff;  /* 修改为白色 */
}
body.dark .card {
  background: #2a2b31;
  box-shadow: none;
}

body.dark .card .name {
  color: #fff;  /* 修改为白色 */
}

body.dark h1 {
  color: #fff;
}

body.dark #lastUpdate,
body.dark #countdown {
  color: #aaa;
}

/* 涨跌颜色模式：红涨绿跌 */
body.red-green .price.up,
body.red-green .change.up { color: #ff4d4d; }
body.red-green .price.down,
body.red-green .change.down { color: #3cd97c; }

/* 涨跌颜色模式：红跌绿涨 */
body.green-red .price.up,
body.green-red .change.up { color: #3cd97c; }
body.green-red .price.down,
body.green-red .change.down { color: #ff4d4d; }

/* 夜间模式下的涨跌颜色 */
body.dark.red-green .price.up,
body.dark.red-green .change.up { color: #ff6666; }
body.dark.red-green .price.down,
body.dark.red-green .change.down { color: #4dff99; }

body.dark.green-red .price.up,
body.dark.green-red .change.up { color: #4dff99; }
body.dark.green-red .price.down,
body.dark.green-red .change.down { color: #ff6666; }

/* =============================
   色觉障碍辅助模式
   使用蓝/橙配色方案，并添加额外的视觉指示器
   ============================= */

/* 色觉障碍模式：使用蓝色表示上涨，橙色表示下跌 */
body.colorblind .price.up,
body.colorblind .change.up { 
  color: #0066cc; 
  font-weight: 700;
}
body.colorblind .price.down,
body.colorblind .change.down { 
  color: #ff8800; 
  font-weight: 700;
}

/* 色觉障碍模式：为卡片添加边框指示 */
body.colorblind .card .price.up,
body.colorblind .card .change.up {
  position: relative;
}

body.colorblind .card.up-indicator {
  border-left: 4px solid #0066cc;
  border-right: 1px solid #0066cc;
}

body.colorblind .card.down-indicator {
  border-left: 4px solid #ff8800;
  border-right: 1px solid #ff8800;
}

/* 色觉障碍模式：增强箭头显示 */
body.colorblind .change.up {
  font-size: 0.95rem;
}

body.colorblind .change.down {
  font-size: 0.95rem;
}

/* 夜间模式下的色觉障碍模式 */
body.dark.colorblind .price.up,
body.dark.colorblind .change.up { 
  color: #4da6ff; 
  font-weight: 700;
}
body.dark.colorblind .price.down,
body.dark.colorblind .change.down { 
  color: #ffaa44; 
  font-weight: 700;
}

body.dark.colorblind .card.up-indicator {
  border-left-color: #4da6ff;
  border-right-color: #4da6ff;
}

body.dark.colorblind .card.down-indicator {
  border-left-color: #ffaa44;
  border-right-color: #ffaa44;
}