:root {
  /* =========================================
   * 原子颜色
   * 用于 Three.js 原子球材质与图例展示
   * ========================================= */
  --atom-hydrogen: #FFFFFF;
  /* 氢原子 (H) - 白色 */
  --atom-oxygen: #FF0000;
  /* 氧原子 (O) - 红色 */
  --atom-carbon: #000000;
  /* 碳原子 (C) - 黑色 */
  --atom-nitrogen: #3050F8;
  /* 氮原子 (N) - 蓝色 */
  --atom-sulfur: #FFFF00;
  /* 硫原子 (S) - 黄色 */
  --atom-chlorine: #00FF00;
  /* 氯元素 (Cl) - 绿色 */
  --atom-fluorine: #00A100;
  /* 氟元素 (F) - 绿色 */
  --atom-bromine: #A52A2A;
  /* 溴元素 (Br) - 红棕色 */
  --atom-iodine: #9400D3;
  /* 碘元素 (I) - 紫色 */
  --atom-phosphorus: #FFA500;
  /* 磷元素 (P) - 橙色 */
  --atom-silicon: #DAA520;
  /* 硅元素 (Si) - 浅黄色 */
  --atom-selenium: #FFA100;
  /* 硒元素 (Se) - 橙色 */
  --atom-boron: #FFB5B5;
  /* 硼元素 (B) - 粉色 */
  --atom-manganese: #9C7AC7;
  /* 锰元素 (Mn) - 淡紫色 */
  --atom-copper: #B87333;
  /* 铜元素 (Cu) - 铜色 */
  --atom-sodium: #0000ff;
  /* 钠元素 (Na) - 蓝色 */
  --atom-cesium: #57178F;
  /* 铯元素 (Cs) - 紫色 */
  --atom-zinc: #7D80B0;
  /* 锌元素 (Zn) - 蓝灰色 */
  --atom-calcium: #3c652f;
  /* 钙元素 (Ca) - 亮绿色 */
  --atom-polonium: #AB5C00;
  /* 钋元素 (Po) - 棕色 */
  --atom-iron: #bfc7d1;
  /* 铁元素 (Fe) - 灰蓝色 */
  --atom-silver: #c0c0c0;
  /* 银元素 (Ag) - 亮银色 */
  --atom-gold: #ffd700;
  /* 金元素 (Au) - 金黄色 */

  --bond-default: #6C6C6C;
  /* 化学键 - 深灰色 */

}

/* 使用说明：
 * - 原子/化学键颜色变量用于 Three.js 材质 (MeshPhongMaterial) 与图例色块。
 * - 面板半透明背景建议使用：background: color-mix(in srgb, var(--ui-panel-bg-color) 55%, transparent);
 *   以避免在元素上使用整体 opacity 影响子元素。
 * - 若需在 JS 中读取颜色，可使用 getComputedStyle(document.documentElement).getPropertyValue('--var').
 */