// 原生CSS变量 -- 顶级作用域
:root {
  --layout-header-height: 60px;
  --layout-main-height: calc(100vh - var(--layout-header-height));

  --list-container-width: 1300px;

  --detail-container-width: 900px;

  --global-background-color: #392f41;
  --global-text-color: #ddd;
  --global-link-color: #2ca9e1;

  --layout-main-bg-color: rgba(20, 30, 40, 0.75);
  --layout-bg-color: #252748;
  
  --world-map-point-color: #fff143;

  --duration-color: #89c3eb;
  --transfer-color: #f9ed69;
  --transfer-in-color: var(--transfer-color);
  --transfer-out-color: #90f2ff;
  --net-speed-in-color: #f5b199;
  --net-speed-out-color: #89c3eb;
  --conn-color: #89c3eb;
  --conn-tcp-color: var(--conn-color);
  --conn-udp-color: #2ca9e1;
  --load-color: #90f2ff;
  --process-color: #f5b199;

  --list-item-price-color: #eee;
  --list-item-buy-link-color: #ffc300;
  --list-item-buy-link-color-hover: #ff9900;
  --public-note-tag-color: #ccc;
  --public-note-tag-bg: linear-gradient(125deg, #676ef7, #41459c);

  --option-high-color: #ff7500;
  --option-high-color-active: rgba(255, 177, 0, 0.75);

  --server-status-value-color: #a1eafb;
  --server-status-label-color: #ddd;
  --server-status-content-color: #eee;

  // 针对1440px以下的屏幕
  @media screen and (max-width: 1440px) {
    --list-container-width: 1120px;
  }

  // 针对1280px以下的屏幕
  @media screen and (max-width: 1280px) {
    --list-container-width: 1024px;
  }

  @media screen and (max-width: 1024px) {
    --list-container-width: 800px;
    --detail-container-width: 800px;
  }

  @media screen and (max-width: 800px) {
    --list-container-width: 720px;
    --detail-container-width: 720px;
  }

  @media screen and (max-width: 720px) {
    --list-container-width: 100vw;
    --detail-container-width: 100vw;
  }
}

body.simple-color-mode {

  --world-map-point-color: #cbf1f5;
  
  --simple-color: #ccc;
  --duration-color: var(--simple-color);
  --transfer-color: var(--simple-color);
  --transfer-in-color: var(--transfer-color);
  --transfer-out-color: var(--simple-color);
  --net-speed-in-color: var(--simple-color);
  --net-speed-out-color: var(--simple-color);

  --list-item-price-color: #eee;
  --list-item-buy-link-color: var(--simple-color);
  --list-item-buy-link-color-hover: draken(#cbf1f5, 10%);
  --public-note-tag-color: #eee;
  --public-note-tag-bg: transparent;

  --option-high-color: rgb(93, 122, 126);
  --option-high-color-active: rgba(93, 122, 126, 0.75);

  --server-status-value-color: var(--simple-color);
}