:root {
  /* Page base
     这些是全站基础颜色，普通页面文字、背景、分隔线会用到。 */
  --ink: #211b25;
  --muted: #6f6773;
  --paper: #fbf8f4;
  --intro-bg: rgba(251, 248, 244, 0.96);
  --line: rgba(33, 27, 37, 0.12);
  --shadow: 0 18px 52px rgba(43, 50, 38, 0.18);

  /* Main page controls
     首页左侧主按钮和链接标题 hover 色。 */
  --button-bg: rgb(188, 166, 194);
  --button-bg-hover: rgb(126, 148, 111);
  --button-shadow: 0 14px 30px rgba(89, 73, 105, 0.24);
  --link-hover: rgb(80, 91, 54);

  /* Link card defaults
     兜底值：如果某个 .link-item 没有单独配置颜色，就会使用这里。
     bg 是动态卡片背景；text 是正文颜色；meta 是底部英文说明颜色。 */
  --link-card-bg: rgb(126, 148, 111);
  --link-card-text: #ffffff;
  --link-card-meta: rgba(255, 255, 255, 0.82);

  /* Photo area and fullscreen pill
     首页右侧图片区域、图片遮罩、右上角 full screen 按钮。 */
  --media-bg: #27352f;
  --media-wash: rgba(255, 255, 255, 0.16);
  --media-shade-start: rgba(33, 27, 37, 0.02);
  --media-shade-end: rgba(33, 27, 37, 0.2);
  --badge-text: #ffffff;
  --badge-bg: rgba(33, 27, 37, 0.82);
  --badge-bg-hover: rgba(33, 27, 37, 0.92);
}

/* Dark mode
   点击首页左上角 You:You 会切换到这一套左侧文字区域配色。
   右侧媒体区域保持同一套视觉，只跟随按钮阴影等基础变量。 */
body[data-theme="dark"] {
  --ink: #f3edf4;
  --muted: #cfc3d1;
  --paper: #121015;
  --intro-bg: rgba(18, 16, 21, 0.96);
  --line: rgba(243, 237, 244, 0.16);
  --shadow: 0 18px 52px rgba(0, 0, 0, 0.5);
  --button-bg: rgb(116, 88, 124);
  --button-bg-hover: rgb(83, 116, 91);
  --button-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  --link-hover: rgb(190, 202, 156);
}

/* Home link cards
   改首页三个动态展开卡片的颜色，主要改下面每组的三个变量：
   - --link-card-bg: 卡片背景色
   - --link-card-text: 卡片正文颜色
   - --link-card-meta: 卡片底部英文说明颜色

   对应关系：
   - .link-item--reading -> Reading
   - .link-item--douban  -> DouBanWall
   - .link-item--work    -> And what

   如果背景比较深，text/meta 通常用白色或半透明白色；
   如果背景比较浅，text/meta 通常用深色或半透明深色。
*/
.link-item--reading {
  --link-card-bg: rgb(102, 139, 126);
  --link-card-text: #ffffff;
  --link-card-meta: rgba(255, 255, 255, 0.82);
}

.link-item--douban {
  --link-card-bg: rgb(126, 148, 111);
  --link-card-text: #ffffff;
  --link-card-meta: rgba(255, 255, 255, 0.82);
}

.link-item--work {
  --link-card-bg: rgb(201, 180, 207);
  --link-card-text: #211b25;
  --link-card-meta: rgba(33, 27, 37, 0.64);
}

body[data-theme="dark"] .link-item--reading {
  --link-card-bg: rgb(58, 103, 94);
  --link-card-text: #ffffff;
  --link-card-meta: rgba(255, 255, 255, 0.78);
}

body[data-theme="dark"] .link-item--douban {
  --link-card-bg: rgb(76, 93, 59);
  --link-card-text: #ffffff;
  --link-card-meta: rgba(255, 255, 255, 0.78);
}

body[data-theme="dark"] .link-item--work {
  --link-card-bg: rgb(110, 82, 120);
  --link-card-text: #ffffff;
  --link-card-meta: rgba(255, 255, 255, 0.78);
}